diff --git a/assets/js/map.js b/assets/js/map.js
index caa9997f1..333f3b85f 100644
--- 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 '' + url + '';
-}
-
-function getDescription(event) {
- var htmlStr = 'Event: ' + event.event_name;
-
- if (isWorkingUrl(event.url)) {
- htmlStr += '
URL: ' + getLink(event.url);
- }
-
- var date = event.event_date ? new Date(event.event_date).toDateString() : '';
- if (date) {
- htmlStr += '
Date: ' + date;
- }
-
- if (event.event_time) {
- htmlStr += '
Time: ' + event.event_time;
- if (event.timezone) {
- htmlStr += ' (' + event.timezone + ')';
- }
- }
-
- if (event.online) {
-
- htmlStr += '
Location: Online';
- if (event.country) {
- htmlStr += ', ' + event.country;
- }
- if (event.world_region_text) {
- htmlStr += ' (' + event.world_region_text + ')';
- }
-
- if (isWorkingUrl(event.online_event_url)) {
- htmlStr += '
Online Event: ' + getLink(event.online_event_url);
- }
-
- } else {
- if (event.place) {
- htmlStr += '
Location: ' + 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('
'))
- .addTo(map);
+ // create a leaflet popup whit descriptions as HTML
+
+ var popup = L.popup()
+ .setLatLng([e.lngLat.lat, e.lngLat.lng]).setContent(descriptions.join('
')).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 = '© Stadia Maps' +
+ '© Stamen Design ' +
+ '© OpenMapTiles ' +
+ '© OpenStreetMap contributors'
+
+ 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 '' + url + '';
+}
+
+function getDescription(event) {
+ var htmlStr = 'Event: ' + event.event_name;
+
+ if (isWorkingUrl(event.url)) {
+ htmlStr += '
URL: ' + getLink(event.url);
+ }
+
+ var date = event.event_date ? new Date(event.event_date).toDateString() : '';
+ if (date) {
+ htmlStr += '
Date: ' + date;
+ }
+
+ if (event.event_time) {
+ htmlStr += '
Time: ' + event.event_time;
+ if (event.timezone) {
+ htmlStr += ' (' + event.timezone + ')';
+ }
+ }
+
+ if (event.online) {
+
+ htmlStr += '
Location: Online';
+ if (event.country) {
+ htmlStr += ', ' + event.country;
+ }
+ if (event.world_region_text) {
+ htmlStr += ' (' + event.world_region_text + ')';
+ }
+
+ if (isWorkingUrl(event.online_event_url)) {
+ htmlStr += '
Online Event: ' + getLink(event.online_event_url);
+ }
+
+ } else {
+ if (event.place) {
+ htmlStr += '
Location: ' + 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
index a6af7dfe0..63b70173c 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -194,6 +194,6 @@