-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
a2c6bd8
commit 16d1756
Showing
1 changed file
with
100 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,100 @@ | ||
// = require leaflet | ||
// = require leaflet-tilelayer-here | ||
// = require leaflet-svg-icon | ||
// = require leaflet.markercluster | ||
// = require jquery-tmpl | ||
// = require_self | ||
|
||
L.DivIcon.SVGIcon.DecidimIcon = L.DivIcon.SVGIcon.extend({ | ||
options: { | ||
fillColor: "#cd5360", | ||
opacity: 0 | ||
}, | ||
_createPathDescription: function() { | ||
return "M14 1.17a11.685 11.685 0 0 0-11.685 11.685c0 11.25 10.23 20.61 10.665 21a1.5 1.5 0 0 0 2.025 0c0.435-.435 10.665-9.81 10.665-21A11.685 11.685 0 0 0 14 1.17Zm0 17.415A5.085 5.085 0 1 1 19.085 13.5 5.085 5.085 0 0 1 14 18.585Z"; | ||
}, | ||
_createCircle: function() { | ||
return "" | ||
} | ||
}); | ||
|
||
const popupTemplateId = "marker-popup"; | ||
$.template(popupTemplateId, $(`#${popupTemplateId}`).html()); | ||
|
||
const addMarkers = (markersData, markerClusters, map) => { | ||
const bounds = new L.LatLngBounds(markersData.map((markerData) => [markerData.latitude, markerData.longitude])); | ||
|
||
markersData.forEach((markerData) => { | ||
let marker = L.marker([markerData.latitude, markerData.longitude], { | ||
icon: new L.DivIcon.SVGIcon.DecidimIcon() | ||
}); | ||
let node = document.createElement("div"); | ||
|
||
$.tmpl(popupTemplateId, markerData).appendTo(node); | ||
|
||
marker.bindPopup(node, { | ||
maxwidth: 640, | ||
minWidth: 500, | ||
keepInView: true, | ||
className: "map-info" | ||
}).openPopup(); | ||
|
||
markerClusters.addLayer(marker); | ||
}); | ||
|
||
map.addLayer(markerClusters); | ||
map.fitBounds(bounds, { padding: [100, 100] }); | ||
}; | ||
|
||
const loadMap = (mapId, markersData) => { | ||
let markerClusters = L.markerClusterGroup(); | ||
const { hereAppId, hereAppCode } = window.Decidim.mapConfiguration; | ||
|
||
if (window.Decidim.currentMap) { | ||
window.Decidim.currentMap.remove(); | ||
window.Decidim.currentMap = null; | ||
} | ||
|
||
const map = L.map(mapId); | ||
|
||
// L.tileLayer.here({ | ||
// appId: hereAppId, | ||
// appCode: hereAppCode | ||
// }).addTo(map); | ||
|
||
// We will use openstreetmaps directly as our site is not a big traffic dealer | ||
L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', { | ||
attribution: '© <a href="https://osm.org/copyright">OpenStreetMap</a> | <a href="https://www.openstreetmap.org/fixthemap">Improve this map</a>' | ||
}).addTo(map); | ||
|
||
if (markersData.length > 0) { | ||
addMarkers(markersData, markerClusters, map); | ||
} else { | ||
map.fitWorld(); | ||
} | ||
|
||
map.scrollWheelZoom.disable(); | ||
|
||
return map; | ||
}; | ||
|
||
window.Decidim = window.Decidim || {}; | ||
|
||
window.Decidim.loadMap = loadMap; | ||
window.Decidim.currentMap = null; | ||
window.Decidim.mapConfiguration = {}; | ||
|
||
$(() => { | ||
const mapId = "map"; | ||
const $map = $(`#${mapId}`); | ||
|
||
const markersData = $map.data("markers-data"); | ||
const hereAppId = $map.data("here-app-id"); | ||
const hereAppCode = $map.data("here-app-code"); | ||
|
||
window.Decidim.mapConfiguration = { hereAppId, hereAppCode }; | ||
|
||
if ($map.length > 0) { | ||
window.Decidim.currentMap = loadMap(mapId, markersData); | ||
} | ||
}); |