February 1, 2015 · Front-end Code JavaScript

Code: Leaflet with OSM, Google Map and Bing Map

If you always use google for your map, you should try Leaflet. Leaflet is an awesome JavaScript map library with a small size, only 33 KB gzipped. It's very easy to use, has a rich features, got good documentation and have a lot of plugins.

OpenStreetMap (OSM)

OpenStreetMap is a free map service, created and maintaned by community of mapper around the world.

<!-- Leaflet styles -->  
<link href="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" rel="stylesheet">  
<!-- Leaflet script -->  
<script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>  
...
<!-- Map container -->  
<div id="map-leaflet-1" style="height:300px;background:#efefef;"></div>  
var map = L.map('map-leaflet-1').setView([-6.1762031,106.8289601], 15);  
L.tileLayer('//{s}.tile.osm.org/{z}/{x}/{y}.png', {  
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

Google Maps

Google Maps is a web mapping service from Google. Its free to use, if you have less than 25,000 views per day. To use Google Map in Leaflet, you have to add additional plugin. One of the plugin is "Leaflet Plugin"

<!-- Leaflet styles -->  
<link href="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" rel="stylesheet">  
<!-- Leaflet script -->  
<script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>  
<!-- Leaflet plugin for Google -->  
<script src="/assets/uploads/js/Google.js"></script>  
<!-- Google map script -->  
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false&callback=loadGoogleMap"></script>  
...
<!-- Map container -->  
<div id="map-leaflet-2" style="height:300px;background:#efefef;"></div>  
function loadGoogleMap(){  
    var map2 = L.map('map-leaflet-2').setView([-6.1762031,106.8289601], 15);
    var google = new L.Google('ROAD');
    map2.addLayer(google);
};

Bing Maps

Bing Maps is a web mapping service from Microsoft. Its free for non profit use and for commercial that lower than 125.000 billable transaction per year. You need to have the Bing Api Key to use it. To get the Bing Key, you need to have Microsoft account.

Just like Google Map, we need to add additional plugin to load the Bing Map on Leaflet. We can use the previous one we use on Google, "Leaflet Plugin".

<!-- Leaflet styles -->  
<link href="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" rel="stylesheet">  
<!-- Leaflet script -->  
<script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>  
<!-- Leaflet plugin for Bing -->>  
<script src="/assets/uploads/js/Bing.js"></script>  
...
<!-- Map container -->  
<div id="map-leaflet-3" style="height:300px;background:#efefef;"></div>  
var map3 = L.map('map-leaflet-3').setView([-6.1762031,106.8289601], 15);  
var bing = new L.BingLayer("AlTq6EVcon6TNnja0zdhtpZOIqvNHsMLJaSdItdwSlX7sNYKhfdBotjP8clyPdDd", {type: 'Road'})  
map3.addLayer(bing);  
};

Other Map

There's also plenty other good map services and leaflet plugins that you can use, like Nokia HERE map, ESRI maps or if you have Mapbox Map, you can also load it from leaflet.

Comments powered by Disqus