From 16d1756c5b2fad8ec8a17700589c84083005e87f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ivan=20Verg=C3=A9s?= <ivan@platoniq.net>
Date: Thu, 17 Oct 2019 15:57:34 +0200
Subject: [PATCH] overwrite map tiling

---
 app/assets/javascripts/decidim/map.js.es6 | 100 ++++++++++++++++++++++
 1 file changed, 100 insertions(+)
 create mode 100644 app/assets/javascripts/decidim/map.js.es6

diff --git a/app/assets/javascripts/decidim/map.js.es6 b/app/assets/javascripts/decidim/map.js.es6
new file mode 100644
index 0000000..9fa7654
--- /dev/null
+++ b/app/assets/javascripts/decidim/map.js.es6
@@ -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: '&copy; <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);
+  }
+});