Web Cartography
Leaflet Basics
Learn to create web maps with Leaflet.
Learn to read and understand the docs.
Goals
Libraries
◉ Third party
◉ Make coding easier
◉ Open-source?
◉ Docs!
Leaflet
◉ http://leafletjs.com
◉ v1.2.0
◉ Extensible
◉ Lightweight
◉ Clean API
◉ Easy to understand
◉ Proj4 support
◉ No basemap included
◉ Raster, vector
L.*
◉ create a new empty web page
◉ link assets mentioned at
http://leafletjs.com/examples/quick-start/
◉ create a div#map and set its width and height
L.Map
const map = L.map(“divId”).setView([lat, lon], zoom);
Raster: L.tileLayer
const url =
“https://cartodb-basemaps-{s}.global.ssl.fastly.net/l
ight_all/{z}/{x}/{y}.png”;
const carto = L.tileLayer(url);
map.addLayer(carto);
UI: L.marker
const center = L.marker(map.getCenter());
center.bindPopup(“I’m the center of your map”);
map.addLayer(center);
Vector: L.path
◉ L.Polyline
◉ L.Polygon
◉ L.Rectangle
◉ L.Circle
◉ L.CircleMarker
Vector: L.polyline
const line = L.polyline([[0, 0], [10, 10], [0, 10]]);
map.addLayer(line);
map.fitBounds(line.getBounds());
Other: L.layerGroup
const lg = L.layerGroup([center, line]);
map.removeLayer(center);
map.removeLayer(line);
map.addLayer(lg);
Controls: L.control.layers
const baseLayers = {
"Carto": carto
};
const overlays = {
"Vectors": lg
};
map.addControl(L.control.layers(baseLayers, overlays));
Exercise
◉ Set max and min zoom of the map
◉ Try to add a new WMS layer to the map
◉ Try to ask for user’s location and center the map accordingly
◉ Try to change the polyline default style
Vladimir Agafonkin on GitHub https://github.com/mourner
Tips
anytime, anywhere, anyhow
zimmicz@gmail.com
357484@mail.muni.cz
@zimmicz
Feel free to ask