mapbox_google_rosetta.md

Creating a Map

// Google
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
});

---

// Mapbox
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')
});

Adding a Marker

// Google
var marker = new google.maps.Marker({
    position: new google.maps.LatLng(51.505, -0.09),
    map: map,
    title:'Hello World!'
});

// Mapbox
var marker = new L.Marker(new L.LatLng(51.505, -0.09));
marker.bindPopup('Hello, world!');
map.addLayer(marker);

Use GeoJSON

Given an instantiated map in a variable called map.

// Google
map.data.loadGeoJson('https://storage.googleapis.com/maps-devrel/google.json');

// Mapbox
L.mapbox.featureLayer()
    .loadURL('https://storage.googleapis.com/maps-devrel/google.json')
    .addTo(map);

Change Map Style

Google docs

// Google
var styles = [...];

map.setOptions({styles: styles});

With Mapbox, you create map styles on Mapbox.com and use them in Mapbox.js by referencing their map id, in this case me.mycustomstyle.

// Mapbox
L.mapbox.map('map', 'me.mycustomstyle');

Geocoding

// Google
geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {
    map.setCenter(results[0].geometry.location);
    var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
    });
  }
});

// Mapbox
geocoder = L.mapbox.geocoder();
geocoder.geocode(address, function(err, results) {
   map.setView(results[0]);
   var marker = L.marker(results[0]).addTo(map);
});

Drawing

Google documentation

// Google
var drawingManager = new google.maps.drawing.DrawingManager();
drawingManager.setMap(map);

Leaflet.draw documentation

// Mapbox
L.control.draw().addTo(map);

Events

// Google
google.maps.event.addListener(map, 'center_changed', function() {
    // do things with the event.
});

// Mapbox
map.on('moveend', function() {
    // do things with the event
});