Advanced

Maps Integration

JS files for these components aren't included in the lib package and should be taken from https://github.com/webix-hub/components.

Webix library allows to embed geographical maps into the app with the help of its own components. The following maps are supported:

  • Here Map
  • OpenStreet Map
  • Yandex Map
  • GoogleMap (since version 4.0 is included into the main library package)

UI-related maps inherit from view.

Initialization

Step 1. Add the connecting file

First of all, you need to add a special file to the head section of your document. The script helps connect to third party applications without linking to them directly:

The extensions are taken from https://github.com/webix-hub/components. Note that in documentation samples they are linked in another way, but you should follow the patterns below:

  • For Here Map

<script type="text/javascript" src="./heremap.js"></script>

Related sample:  Here Map

  • For OpenStreet Map

<script type="text/javascript" src="./openmap.js"></script>

Related sample:  OpenStreet Map

  • For Yandex Map

<script type="text/javascript" src="./yandexmap.js"></script>

Related sample:  Yandex Map

Step 2. Specify the map container

Secondly, choose where on page the map will be initialized. You can render it into any HTML element defined as the map's container:

// <div id="mydiv"></div>
webix.ui({
    container:"mydiv",
    //map config
});

Additionally, you can put the map into Webix Window:

webix.ui({ 
    view:"window", id:"mapwin",
    body:{ ... }, //map config
    head:{ ... }, //place for toolbar 
    top:50, left:50, 
    width:600, height:500 // dimensions and positioning of the window
}).show();

Step 3. Create a map

Thirdly, create a map and assign properties to it according to your needs. All map constructors identical differing only in the map view name.

Map Initialization

{ 
    view:"yandex-map", // or "here-map", "open-map" 
    id:"map",
    zoom:6,
    center:[ 48.724, 8.215 ]
}

Map Properties

Map's properties define the initial position of the map:

  • id - string - defines the component unique ID;
  • zoom - number - defines how close you'd like to be to the Earth surface;
  • center - array - sets the center of the map. It's an array of two elements ( latitude and longitude) with comma delimiter.

Related sample:  Yandex Map

Working with Maps

Getting Map Object

To make online maps interactive you should refer to the API reference each of the services provides. To access the map object you need to use the getMap() method:

var mapObj = $$("map").getMap();

The method can take the waitMap parameter. If passed, the method returns a promise which will be resolved when the map is rendered.

$$("map").getMap().then(function(mapObj){
    // some code
});

Working with Map API

The API for each integrated map offers a rich collection of map options, controls, overlays, services, layers, etc. that you can use while working with a map instance integrated into our library.

For instance:

  • to show the necessary map piece on request, you can pass the desired lat, lng and zoom into the related map method:
//for Yandex Map
$$("map").getMap().setCenter([lat, lang], zoom);
 
//for Here Map
$$("map").getMap().setCenter({lat:lat, lng:lng});
 
//for Open Map
 $$("map").getMap().panTo([lat, lng]);
  • to show a marker on a Yandex map, you should take two steps:
    • create an instance of the Placemark class that implements markers
    • add the marker to the geoObjects collection (the global collection of map objects):
//for Yandex Map
var myPlacemark = new ymaps.Placemark([lat, lang]);
$$("map").getMap().geoObjects.add(myPlacemark);

Note that you need to check the API of each integrated map to learn its methods, properties and events.

Related Articles

Back to top