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. Four maps are supported:

  • Google Map
  • Here Map
  • OpenStreet Map
  • Yandex Map

Ui-related maps inherit from view.

Initialization

1 . 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 Google Map

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

Related sample:  Google Map

  • For Here Map

<script type="text/javascript" src="./nokiamap.js"></script>
<script src="http://js.api.here.com/se/2.5.3/jsl.js" type="text/javascript" 
    charset="utf-8"></script>

Related sample:  Nokia 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

2 . 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();

3 . 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 "nokia-map", "google-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:  Google Map

Working with Maps

To make online maps interactive you should refer to the API reference each of the services provides.

For instance, the GoogleMap API for javascript-based applications offers a rich collection of map options, controls, overlays, services, layers, etc. that you can use while working with a google-map integrated into our library.

For instance, to show the necessary map piece on request, you can use the following function with the desired lat, lng and zoom:

function show_position(lat, lng, zoom) {
    var myLatlng = new google.maps.LatLng(lat, lng);
    $$('map').map.setOptions({
        zoom: zoom,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
}
  • google.maps.map class features lots of methods, one of them being setOptions() that allows for defining the area on the map;
  • google.maps.LatLng class is a point on the map defined by latitude and longitude coordinates;
  • mapTypeId is a property of google.maps.mapOptions object, that allows setting a map type (HYBRID, ROADMAP, SATELLITE, TERRAIN).

Related Articles

Back to top