leaflet.js

Open source, mobile friendly maps

The Plan

• Why I needed it

• Mobile friendly & open source

• Migration is easy

A bit about me

Alex Zak

CTO @ KiddyUP

PhoneGap TLV

a@alexzak.me

Leaflet.js

Why I needed it

Google sucks /:

  • v3 is painfully slow
  • Andrid map views are all different
  • Angular gMaps directive is not mobile friendly

Leaflet.js

Mobile friendly & open source

CSS3 & Plugins

Leaflet.js

Migration is easy

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

Google Maps v3

leaflet.js

Taken from the MapBox guide

One last tip for all you cordova people

Thanks :)

leaflet.js

By Alex Zak

leaflet.js

  • 844