$30 off During Our Annual Pro Sale. View Details »

An Introduction to Leaflet

An Introduction to Leaflet

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

Tom Kruijsen

June 10, 2014
Tweet

More Decks by Tom Kruijsen

Other Decks in Programming

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