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:
Ui-related maps inherit from view.
1 . First of all, you need to add a special file to the head section of your document. The script helps connect to thirdparty 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:
<script type="text/javascript" src="./googlemap.js"></script>
<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>
Additionally, you should have a Nokia Account registered. Once you register, they send you "appID" and "authenticationToken" keys that you need to specify:
webix.ready(function(){
nokia.Settings.set( "appId", "..."); //instead of dots enter your keys!
nokia.Settings.set( "authenticationToken", "...");
webix.ui({
//then init map
});
});
<script type="text/javascript" src="./openmap.js"></script>
Related sample: OpenStreet Map
<script type="text/javascript" src="./yandexmap.js"></script>
2 . Secondly, choose where on page the map will be inited. 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's properties define the initial position of the map:
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 colection of map options, controls, overlays, services, layers, etc. that you can use while working with a google-map intergrated 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
});
}