NEW VERSION RELEASED! Webix 11 Read More Core Updates, Extended Functionalities in SpreadSheet and File Manager and more

OpenStreet Map, JavaScript Programming Example of OpenStreet Map

OpenStreet Map, JavaScript Programming Example of OpenStreet Map

Get the free programming example of OpenStreet Map. Webix library allows you to embed geographical maps into your app via its own components. Webix supports Here Map, OpenStreet Map, Yandex Map, and Google Map. Note, there are many other code samples developed by our team in the public domain. Feel free to use these code pieces for creating your web applications.

JS Code

webix.ui({ 
  // creates window with map inside
  view:"window", 
  id: "mapwin",
  head:{
    view:"toolbar", elements:[
      { view:"label",  label: "OpenStreet Map", align:'left'}, 
      { view:'button', label: 'Close', width:120, click:function(){
        $$("mapwin").close();
      }}
    ]
  },
  body:{
    view:"open-map",
    id:"map",
    zoom:15,
    center:[ 51.505, -0.09 ]
  },
  top:50, left:50, 
  width:600, height:500
}).show();

HTML Code

<!-- You can get these files from https://github.com/webix-hub/components -->
<script src="//cdn.webix.com/components/edge/openmap/openmap.js"></script>