From Google Maps to Open Source With MapBox and Leaflet
Switching from the Google Maps API to an open source library like Leaflet gives you the ability to
choose between new, open, and less expensive
mapping alternatives like MapBox,
MapQuest Open,
and OpenStreetMap.
Since releasing our API connector Wax and documenting the MapBox API in its totality, we’ve paid special attention to making sure that MapBox maps
work in numerous clients — Modest Maps,
Leaflet, Polymaps,
OpenLayers
and even the Google Maps API v3. We’ve
been able to do this because the entire specification is open source,
including our interactivity code,
and because we provide something that Google doesn’t: direct tile access.
While you can use TileJSON to automatically
configure our maps, it’s just a shortcut to adding a normal layer to a mapping
API. It’s simple to use MapBox tiles without using any
code from MapBox — so it’s also easy to try out different tile providers to
find the one that best fits your usage and budget. Leaflet is a great place to start in making the jump from Google because it’s
very similar to the Google Maps API.
Creating a basic map with Google Maps:
var map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(51.505, -0.09),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
and in Leaflet:
var map = new L.Map('map', {
center: new L.LatLng(51.505, -0.09),
zoom: 8,
layers: new L.TileLayer('https://a.tiles.mapbox.com/v3/mapbox.world-bright/{z}/{x}/{y}.png')
});
Markers and overlays in Leaflet
Unlike Modest Maps, the nano-sized framework
we use for MapBox Hosting’s embed functionality, Leaflet
supports an array of markers and polygon overlays very similar to Google Maps. There
are custom icons, and you can
bring in your GeoJSON for polygon
overlays.
For large datasets and powerful styling controls,
TileMill is unbeatable, but smaller dynamic
data can work really well in Leaflet — and often better than it does with the
Google Maps API. One example of this is StreetEasy,
a real estate aggregator that just made the switch from Google Maps to
custom MapBox maps.
Adding a marker in the Google Maps API looks like:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(51.505, -0.09),
map: map,
title:'Hello World!'
});
And in Leaflet it isn’t much different:
var marker = new L.Marker(new L.LatLng(51.505, -0.09));
marker.bindPopup('Hello, world!');
map.addLayer(marker);
Try out Leaflet
If you’re looking to experiment with alternatives to Google Maps, Leaflet’s a
great way to go. It gives you flexibility between tile providers, a rich feature set,
and unlike the Google Maps API it’s BSD-licensed open source code. For help working with Leaflet and MapBox, just ask us on the MapBox support site.
MapBox for fast, reliable custom map tile hosting
In addition to your data markers and polygons rendered through Leaflet, you can add in layers of map tiles for a custom base map, or additional features like restaurants, transit stops, or neighborhood boundaries. Try using TileMill to style your own data or pull in extracts from OpenStreetMap. When you’re ready to share your maps, check out MapBox plans starting at just $5 a month. MapBox includes server-side compositing so your maps will be fast even as you add more layers and work well on mobiles.
