Search code examples
dictionaryionic-frameworkhybrid-mobile-app

How to use skobbler map in hybrid mobile app

Can you please help me to implement Skobbler map in ionic based app ?

thanks

Solution 
  • by using following code i can draw map.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script src="js/skobbler-2.0.js"></script>
<style>
#map {
    height: 500px;
}
</style>
<div id="map"></div>
<script>
   function initMap() {
         navigator.geolocation.getCurrentPosition(function(position) {
           var pos = {
             lat: position.coords.latitude,
             lng: position.coords.longitude
           };
            console.log(pos.lat + "/" +pos.lng);
                    //  alert(pos.lat + "/" +pos.lng);
                        mytest(pos.lat,pos.lng);
       });

     }
window.setInterval(function(){
initMap()
}, 1000);
var mymap = '';
var marker = '';
function mytest(lat,long)
{
    if(mymap == '' || marker == '')
    {
        mymap = L.skobbler.map('map', {
                apiKey: 'API_KEY',
                mapStyle: 'day',
                bicycleLanes: true,
                onewayArrows: true,
                pois: 'all',
                primaryLanguage: 'en',
                fallbackLanguage: 'en',
                mapLabels: 'localNaming',
                retinaDisplay: 'auto',

                zoomControl: true,
                zoomControlPosition: 'top-left',
                center: [lat,long],
                zoom: 18,
        });
        marker = L.marker([lat,long]).addTo(mymap);
    }
    else
    {
        mymap.center = [lat,long];
        marker.remove(marker);
        marker = L.marker([lat,long]).addTo(mymap);
    }
}
</script>
</head>
<body>
</body>
</html>