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
2. Brightin
5. Appuccino
6. Maps
8. Google Maps OpenLayers Leaflet
9. Google Maps OpenLayers Leaflet
10. Google Maps OpenLayers Leaflet
11. Creating a map
12. <div id=“map"></div> #map { width: 600px; height: 400px; }
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);
15. Map Data
16. OpenStreetMap MapBox PDOK
17. OpenStreetMap MapBox PDOK
20. L.tileLayer('http://{s}.tiles.mapbox.com/v3/tomkr.id/{z}/{x}/ {y}.png').addTo(map);
21. OpenStreetMap MapBox PDOK
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);
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] });
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);
29. OpenStreetMap MapBox PDOK
30. Layers
31. Markers Shapes GeoJSON
33. var marker = L.marker([52.1599990, 5.3843390]).addTo(map)
34. Markers Shapes GeoJSON
36. var circle = L.circle([52.1551862, 5.3872315], 300, { color: 'red', fillOpacity: 0.5 }).addTo(map);
37. Markers Shapes GeoJSON
39. { "type": "Feature", "geometry": { "type": "LineString", "coordinates": [[5.3843390, 52.1599990],[5.3872315, 52.1551862]] }, "properties": { "color": "green" } }
40. var geojson = L.geoJson(data, { style: function (feature) { return { color: feature.properties.color, weight: 5, opacity: 0.65 }; } }).addTo(map);
41. Markers Shapes GeoJSON
42. More!
43. Popups Events Controls
44. An introduction to Utrecht JavaScript Meetup 2014-06-10 Tom Kruijsen