JS mapping slides

13.js-mapping/d3.html

@@ -45,7 +45,7 @@
         Finland: 5,
         Sweden: 5,
         Cyprus: 6,
-        "Czech Republic": 6,
+        Czechia: 6,
         Estonia: 6,
         Hungary: 6,
         Latvia: 6,
@@ -90,10 +90,12 @@
         .geoMercator()
         //.geoConicEqualArea()
         .center([15, 54])
-        .scale(600)
+        .scale(700)
         .translate([width / 2, height / 2]);
       const path = d3.geoPath().projection(projection);
 
+      let globalData = null;
+
       // load TopoJSON
       d3.json(
         // DEMO change to 110m/10m
@@ -106,6 +108,7 @@
         const europeCountries = geojson.features.filter(
           (d) => euMemberStates[d.properties.name] !== undefined,
         );
+        console.log(europeCountries);
 
         svg
           .selectAll("path")

13.js-mapping/leaflet.html

@@ -42,14 +42,15 @@ https://leafletjs.com/examples.html
       const initialZoom = 12;
       // Leaflet makes a global variable "L" available.
       // this creates a map in the div above
-      const map = L.map("map-goes-here").setView(chicago, initialZoom);
+      const map = L.map("map-goes-here");
+      map.setView(chicago, initialZoom);
 
       // OSM base layer
       // DEMO change of base layer
       const watercolorURL =
         "https://tiles.stadiamaps.com/tiles/stamen_watercolor/{z}/{x}/{y}.jpg";
       const osmURL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
-      L.tileLayer(osmURL, {
+      L.tileLayer(watercolorURL, {
         maxZoom: 19,
         attribution: "© OpenStreetMap contributors",
       }).addTo(map);

13.js-mapping/maplibre.html

@@ -67,7 +67,7 @@
         zoom: 12,
         style: tileJSON,
         // DEMO toggle style
-        style: watercolor,
+        //style: watercolor,
       });
 
       const points = [

13.js-mapping/slides.md

@@ -134,11 +134,22 @@ MaplibreGL/MapboxGL are mostly compatible.
 - Use library to render map(s) to div(s) on page.
 - Pick base layer, either raster or vector.
     - If vector, possibly apply additional styling to base.
-- Add additional vector layers based on your data & its features.
+- Add additional vector layers based on your data & its features. Do this using methods on the `map` object you got back in the earlier steps.
 - Attach event handlers for interactivity on your features and/or input elements adjacent to the map.
 
 ---
 
+## Clustering
+
+![bg fit right](clustering.png)
+
+Helps reduce visual clutter and increase performance when there are many points.
+
+- <https://github.com/Leaflet/Leaflet.markercluster>
+- <https://maplibre.org/maplibre-gl-js/docs/examples/cluster/>
+
+---
+
 ## Pop-ups
 
 Leaflet/MapLibre offer a simple API for adding pop-ups to features.