Evaluating Leaflet JS as alternative of Google Maps

I am using Google Maps at work. Their map API is robust. To play with maps and to do interesting thing. But there are some issues that one can have with Google Maps. Majority of people might be not facing them. Why I am thinking alternatives to Google Map is because they are not free on HTTPs. You have to purchase their licence. And I also have a concern on the load time of Google Map JS file.

foursquare (a location sharing social networking app) was also using Google Maps and recently they shifted to OpenStreetMaps and Leaflet JS API. It attracted me to see what this JS API is providing. It is easy use and has basic things that everyone needs for their web maps. They provide tile base maps for web and mobile devices. What thing that I am missing is, they do not provide Geocoding service. For that you need to use some other source. As they claim, they are only a JavaScript library.

Example

Following is the basic map by Leaflet JS API


<html>
    <head>
        <title>Leaflet test</title>
        <script src="http://code.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
        <link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.css" />
		<script>
		jQuery(document).ready(function() {
			var map = new L.Map('map');
			var cloudmade = new L.TileLayer('http://{s}.tile.cloudmade.com/65122fc35d994da0b652aef47430d27c/997/256/{z}/{x}/{y}.png', {
			    attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
			    maxZoom: 18
			});
			
			var lahore = new L.LatLng(31.5925, 74.309444); // geographical point (longitude and latitude)
			map.setView(lahore, 13).addLayer(cloudmade);
			
			var markerLocation = new L.LatLng(31.5925, 74.309444);
			
			var marker = new L.Marker(markerLocation);
			map.addLayer(marker);			

		});		
		
		</script>	
    </head>
    <body>
   		
       		<div id="map" style="height: 600px;"></div>
		
    </body>
</html>

There is no feature comparison available on Leaflet site. They only provided their reference and some examples. They should have a community support and discussion forum.

Geocoding service

For gecoding service the makers of Leaflet JS, CloudMade also has a HTTP service.

You May Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.