An Introduction to Leaflet

A short introduction to the Leaflet JavaScript map library I gave at my local JS meetup.

Transcript

1. An introduction to
   Utrecht JavaScript Meetup
   2014-06-10
   Tom Kruijsen
   

   View Slide

2. Brightin
   

   View Slide

3. View Slide

4. View Slide

5. Appuccino
   

   View Slide

6. Maps
   

   View Slide

7. View Slide

8. Google Maps
   OpenLayers
   Leaflet
   

   View Slide

9. Google Maps
   OpenLayers
   Leaflet
   

   View Slide

10. Google Maps
    OpenLayers
    Leaflet
    

    View Slide

11. Creating a map
    

    View Slide

12. 
    #map {
    width: 600px;
    height: 400px;
    }
    

    View Slide

13. var map = L.map('map').setView([52.1551862, 5.3872315], 13);
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
    

    View Slide

14. View Slide

15. Map Data
    

    View Slide

16. OpenStreetMap
    MapBox
    PDOK
    

    View Slide

17. OpenStreetMap
    MapBox
    PDOK
    

    View Slide

18. View Slide

19. View Slide

20. L.tileLayer('http://{s}.tiles.mapbox.com/v3/tomkr.id/{z}/{x}/
    {y}.png').addTo(map);
    

    View Slide

21. OpenStreetMap
    MapBox
    PDOK
    

    View Slide

22. View Slide

23. var RD = new L.Proj.CRS.TMS(
    'EPSG:28992',
    '+proj=sterea +lat_0=52.15616055555555 +lon_0=5.38763888888889
    +k=0.9999079 +x_0=155000 +y_0=463000 +ellps=bessel +units=m
    +towgs84=565.2369,50.0087,465.658,-0.406857330322398,0.350732676542563,-
    1.8703473836068,4.0812 +no_defs',
    [-285401.92,22598.08,595401.9199999999,903401.9199999999], {
    resolutions: [3440.640, 1720.320, 860.160, 430.080, 215.040,
    107.520, 53.760, 26.880, 13.440, 6.720, 3.360, 1.680, 0.840, 0.420]
    });
    var map = L.map('map',{
    continuousWorld: true,
    crs: RD
    }).setView([52.1551862, 5.3872315], 8);
    L.tileLayer('http://geodata.nationaalgeoregister.nl/tms/1.0.0/
    brtachtergrondkaart/{z}/{x}/{y}.png', {
    continuousWorld: true,
    tms: true
    }).addTo(map);
    

    View Slide

24. View Slide

25. var RD = new L.Proj.CRS.TMS(
    'EPSG:28992',
    '+proj=sterea +lat_0=52.15616055555555 +lon_0=5.38763888888889
    +k=0.9999079 +x_0=155000 +y_0=463000 +ellps=bessel +units=m
    +towgs84=565.2369,50.0087,465.658,-0.406857330322398,0.350732676542563,-
    1.8703473836068,4.0812 +no_defs',
    [-285401.92,22598.08,595401.9199999999,903401.9199999999], {
    resolutions: [3440.640, 1720.320, 860.160, 430.080, 215.040,
    107.520, 53.760, 26.880, 13.440, 6.720, 3.360, 1.680, 0.840, 0.420]
    });
    

    View Slide

26. View Slide

27. View Slide

28. var map = L.map('map',{
    continuousWorld: true,
    crs: RD
    }).setView([52.1551862, 5.3872315], 8);
    L.tileLayer('http://geodata.nationaalgeoregister.nl/tms/1.0.0/
    brtachtergrondkaart/{z}/{x}/{y}.png', {
    continuousWorld: true,
    tms: true
    }).addTo(map);
    

    View Slide

29. OpenStreetMap
    MapBox
    PDOK
    

    View Slide

30. Layers
    

    View Slide

31. Markers
    Shapes
    GeoJSON
    

    View Slide

32. View Slide

33. var marker = L.marker([52.1599990, 5.3843390]).addTo(map)
    

    View Slide

34. Markers
    Shapes
    GeoJSON
    

    View Slide

35. View Slide

36. var circle = L.circle([52.1551862, 5.3872315], 300, {
    color: 'red',
    fillOpacity: 0.5
    }).addTo(map);
    

    View Slide

37. Markers
    Shapes
    GeoJSON
    

    View Slide

38. View Slide

39. {
    "type": "Feature",
    "geometry": {
    "type": "LineString",
    "coordinates": [[5.3843390, 52.1599990],[5.3872315, 52.1551862]]
    },
    "properties": {
    "color": "green"
    }
    }
    

    View Slide

40. var geojson = L.geoJson(data, {
    style: function (feature) {
    return {
    color: feature.properties.color,
    weight: 5,
    opacity: 0.65
    };
    }
    }).addTo(map);
    

    View Slide

41. Markers
    Shapes
    GeoJSON
    

    View Slide

42. More!
    

    View Slide

43. Popups
    Events
    Controls
    

    View Slide

44. An introduction to
    Utrecht JavaScript Meetup
    2014-06-10
    Tom Kruijsen
    

    View Slide