Change map

okfn · Feb 2, 2024 · c3b26b9 · c3b26b9
1 parent a8d521f
commit c3b26b9
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 170 deletions.
diff --git a/assets/js/map.js b/assets/js/map.js
@@ -1,79 +1,7 @@
 var url = 'https://raw.githubusercontent.com/okfn/opendataday/master/databags/events-2024.json';
 
-mapboxgl.accessToken = 'TO-DO'
-
-var clusterRadius = 50,
-  clusterMaxZoom = 14; // Max zoom to cluster points on
-
-var map = new mapboxgl.Map({
-  container: 'map-container',
-  style: 'mapbox://styles/mapbox/bright-v9',
-  zoom: 1,
-  center: [0, 0],
-  scrollZoom: false
-});
-
-function truncate(str, n) {
-  return (str.length > n) ? str.substr(0, n - 1) + '…' : str;
-}
-
-function isWorkingUrl(url) {
-  return new RegExp('^' + 'http').test(url);
-}
-
-function getLink(url) {
-  return '<a href="' + url + '" target="_blank">' + url + '</a>';
-}
-
-function getDescription(event) {
-  var htmlStr = '<strong>Event:</strong> ' + event.event_name;
-
-  if (isWorkingUrl(event.url)) {
-    htmlStr += '<br><strong>URL:</strong> ' + getLink(event.url);
-  }
-
-  var date = event.event_date ? new Date(event.event_date).toDateString() : '';
-  if (date) {
-    htmlStr += '<br><strong>Date:</strong> ' + date;
-  }
-
-  if (event.event_time) {
-    htmlStr += '<br><strong>Time:</strong> ' + event.event_time;
-    if (event.timezone) {
-      htmlStr += ' (' + event.timezone + ')';
-    }
-  }
-
-  if (event.online) {
-
-    htmlStr += '<br><strong>Location:</strong> Online';
-    if (event.country) {
-      htmlStr += ', ' + event.country;
-    }
-    if (event.world_region_text) {
-      htmlStr += ' (' + event.world_region_text + ')';
-    }
-
-    if (isWorkingUrl(event.online_event_url)) {
-      htmlStr += '<br><strong>Online Event:</strong> ' + getLink(event.online_event_url);
-    }
-
-  } else {
-    if (event.place) {
-      htmlStr += '<br><strong>Location:</strong> ' + event.place;
-      if (event.country) {
-        htmlStr += ', ' + event.country;
-      }
-      if (event.world_region_text) {
-        htmlStr += ' (' + event.world_region_text + ')';
-      }
-    }
-  }
-
-  return htmlStr;
-}
-
-map.addControl(new mapboxgl.NavigationControl(), 'top-left');
+var map = L.map('map');
+// on load map event
 
 map.on('load', function () {
   $.getJSON(url).done(function (data) {
@@ -95,11 +23,17 @@ map.on('load', function () {
       }
 
       if (lng && lat && title) {
+
+        // add it to the map
+        let marker = L.marker([lat, lng]).addTo(map);
+        // set up a description for on mouse over
+        marker.bindPopup(getDescription(event));
+
         geojson.features.push({
           type: 'Feature',
           properties: {
             title: title,
-            icon: "marker",  // https://labs.mapbox.com/maki-icons/
+            icon: "marker",
             description: getDescription(event)
           },
           geometry: {
@@ -112,85 +46,6 @@ map.on('load', function () {
 
     $("#event-number").text(events.length);
 
-
-    map.addSource("events", {
-      "type": "geojson",
-      "data": geojson,
-      cluster: true,
-      clusterRadius: clusterRadius,
-      clusterMaxZoom: clusterMaxZoom
-    });
-
-    map.addLayer({
-      "id": "points",
-      "interactive": true,
-      "type": "symbol",
-      "source": "events",
-      "filter": ["!", ["has", "point_count"]],
-      "layout": {
-        "icon-allow-overlap": true,
-        "text-allow-overlap": true,
-        "icon-image": "{icon}-15",
-        "text-size": 15,
-        "text-field": "{title}",
-        "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
-        "text-offset": [0, 0.6],
-        "text-anchor": "top"
-      },
-      "paint": {
-        "text-color": "#333"
-      }
-    });
-
-    map.addLayer({
-      "id": "clusters",
-      "type": "circle",
-      "source": "events",
-      "filter": ["has", "point_count"],
-      "paint": {
-        "circle-color": [
-          "step",
-          ["get", "point_count"],
-          '#00d1ff',     // blue
-          10, '#e077ff', // red from count 10 up
-          20, '#e4ff36'  // yellow from count 20 up
-        ],
-        "circle-radius": 18
-      }
-    });
-
-    map.addLayer({
-      "id": "cluster-count",
-      "type": "symbol",
-      "source": "events",
-      "layout": {
-        "icon-allow-overlap": true,
-        "text-allow-overlap": true,
-        "text-field": "{point_count}",
-        "text-font": [
-          "DIN Offc Pro Medium",
-          "Arial Unicode MS Bold"
-        ],
-        "text-size": 14
-      },
-      "paint": {
-        "text-color": "#fff"
-      }
-    });
-
-    map.on('mousemove', 'points', function (e) {
-      map.getCanvas().style.cursor = 'pointer';
-    });
-    map.on('mouseleave', 'points', function (e) {
-      map.getCanvas().style.cursor = '';
-    });
-    map.on('mousemove', 'clusters', function (e) {
-      map.getCanvas().style.cursor = 'pointer';
-    });
-    map.on('mouseleave', 'clusters', function (e) {
-      map.getCanvas().style.cursor = '';
-    });
-
     map.on('click', function (e) {
       var features = map.queryRenderedFeatures(e.point, { layers: ['points', 'clusters'] });
       if (!features.length) {
@@ -200,10 +55,10 @@ map.on('load', function () {
 
       if (!feature.properties.cluster) {
         var descriptions = features.map(function (f) { return f.properties.description; });
-        var popup = new mapboxgl.Popup()
-          .setLngLat(features.length == 1 ? features[0].geometry.coordinates : e.lngLat)
-          .setHTML(descriptions.join('<br><br>'))
-          .addTo(map);
+        // create a leaflet popup whit descriptions as HTML
+
+        var popup = L.popup()
+          .setLatLng([e.lngLat.lat, e.lngLat.lng]).setContent(descriptions.join('<br><br>')).openOn(map);
       } else {
         // We need to expand a cluster
         var oldZoom = map.getZoom();
@@ -253,14 +108,78 @@ map.on('load', function () {
 
 });
 
-function pointsToBounds(points) {
-  return points.reduce(
-    function (bounds, point) {
-      return bounds.extend(point.geometry.coordinates);
-    },
-    new mapboxgl.LngLatBounds(
-      points[0].geometry.coordinates,
-      points[0].geometry.coordinates
-    )
-  );
+map.setView([0, 0], 4);
+
+var attr = '&copy; <a href="https://www.stadiamaps.com/" target="_blank">Stadia Maps</a>' +
+  '&copy; <a href="https://www.stamen.com/" target="_blank">Stamen Design</a> ' +
+  '&copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> ' +
+  '&copy; <a href="https://www.openstreetmap.org/about/" target="_blank">OpenStreetMap contributors</a>'
+
+  L.tileLayer('https://tiles.stadiamaps.com/tiles/stamen_terrain/{z}/{x}/{y}@2x.jpg', {
+    attribution: attr
+}).addTo(map);
+
+function truncate(str, n) {
+  return (str.length > n) ? str.substr(0, n - 1) + '…' : str;
+}
+
+function isWorkingUrl(url) {
+  return new RegExp('^' + 'http').test(url);
 }
+
+function getLink(url) {
+  return '<a href="' + url + '" target="_blank">' + url + '</a>';
+}
+
+function getDescription(event) {
+  var htmlStr = '<strong>Event:</strong> ' + event.event_name;
+
+  if (isWorkingUrl(event.url)) {
+    htmlStr += '<br><strong>URL:</strong> ' + getLink(event.url);
+  }
+
+  var date = event.event_date ? new Date(event.event_date).toDateString() : '';
+  if (date) {
+    htmlStr += '<br><strong>Date:</strong> ' + date;
+  }
+
+  if (event.event_time) {
+    htmlStr += '<br><strong>Time:</strong> ' + event.event_time;
+    if (event.timezone) {
+      htmlStr += ' (' + event.timezone + ')';
+    }
+  }
+
+  if (event.online) {
+
+    htmlStr += '<br><strong>Location:</strong> Online';
+    if (event.country) {
+      htmlStr += ', ' + event.country;
+    }
+    if (event.world_region_text) {
+      htmlStr += ' (' + event.world_region_text + ')';
+    }
+
+    if (isWorkingUrl(event.online_event_url)) {
+      htmlStr += '<br><strong>Online Event:</strong> ' + getLink(event.online_event_url);
+    }
+
+  } else {
+    if (event.place) {
+      htmlStr += '<br><strong>Location:</strong> ' + event.place;
+      if (event.country) {
+        htmlStr += ', ' + event.country;
+      }
+      if (event.world_region_text) {
+        htmlStr += ' (' + event.world_region_text + ')';
+      }
+    }
+  }
+
+  return htmlStr;
+}
+
+// Add control to map
+L.control.scale().addTo(map);
+L.control.zoom({ position: 'topright' }).addTo(map);
+
diff --git a/templates/home.html b/templates/home.html
@@ -194,6 +194,6 @@ <h2>{{ this.support_scheme_heading }}</h2>
 {% endblock %}
 
 {% block extra_js %}
-<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js"></script>
+<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
 <script src="{{ '/js/map.js'|url }}"></script>
 {% endblock %}
diff --git a/templates/layout.html b/templates/layout.html
@@ -26,7 +26,8 @@
   <link rel="stylesheet" href="{{ '/css/style.css'|url }}">
   <!-- okf ribbon -->
   <link rel="stylesheet" href="https://a.okfn.org/html/oki/panel/assets/css/frontend.css"/>
-  <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css" rel="stylesheet" />
+
+  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
   <script defer data-domain="opendataday.org" src="https://plausible.io/js/plausible.js"></script>
 </head>
 <body class="{{ this._model }}">