Skip to content

Commit

Permalink
overwrite map tiling
Browse files Browse the repository at this point in the history
  • Loading branch information
microstudi committed Oct 17, 2019
1 parent a2c6bd8 commit 16d1756
Showing 1 changed file with 100 additions and 0 deletions.
100 changes: 100 additions & 0 deletions app/assets/javascripts/decidim/map.js.es6
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: '&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);
}
});

0 comments on commit 16d1756

Please sign in to comment.