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 @@

{{ this.support_scheme_heading }}

{% endblock %} {% block extra_js %} - + {% endblock %} diff --git a/templates/layout.html b/templates/layout.html index 87c0535a3..0dfd0f4fb 100644 --- a/templates/layout.html +++ b/templates/layout.html @@ -26,7 +26,8 @@ - + +