consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added layer control to map to allow each geozone display to be toggled on/off

Browse Source 
Note we're adding a `name` property to the geozones investments sidebar
map even if we don't render the geozones in the map, in order to
simplify the JavaScript function `geozoneLayers`.
This commit is contained in:
CoslaJohn
2024-08-07 14:14:34 +01:00
committed by Javi Martín
parent cb8b0ad6ff
commit 624e60eab9
5 changed files with 81 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
app/assets/javascripts/map.js
View File

@@ -15,7 +15,7 @@
App.Map.maps = [];
},
initializeMap: function(element) {
var createMarker, editable, investmentsMarkers, map, marker, markerClustering,
var createMarker, editable, geozoneLayers, investmentsMarkers, map, marker, markerClustering,
markerData, markerIcon, markers, moveOrPlaceMarker, removeMarker, removeMarkerSelector;
App.Map.cleanInvestmentCoordinates(element);
removeMarkerSelector = $(element).data("marker-remove-selector");
@@ -84,7 +84,10 @@
}
App.Map.addInvestmentsMarkers(investmentsMarkers, createMarker);
App.Map.addGeozones(map);
geozoneLayers = App.Map.geozoneLayers(map);
App.Map.addGeozones(map, geozoneLayers);
App.Map.addLayerControl(map, geozoneLayers);
map.addLayer(markers);
},
leafletMap: function(element) {
@@ -210,19 +213,34 @@
map.attributionControl.setPrefix(App.Map.attributionPrefix());
L.tileLayer(mapTilesProvider, { attribution: mapAttribution }).addTo(map);
},
addGeozones: function(map) {
addGeozones: function(map, geozoneLayers) {
$.each(geozoneLayers, function(_, geozoneLayer) {
App.Map.addGeozone(map, geozoneLayer);
});
},
addLayerControl: function(map, geozoneLayers) {
if (Object.keys(geozoneLayers).length > 1) {
L.control.layers(null, geozoneLayers).addTo(map);
}
},
geozoneLayers: function(map) {
var geozones = $(map._container).data("geozones");
var layers = {};
if (geozones) {
geozones.forEach(function(geozone) {
App.Map.addGeozone(geozone, map);
if (geozone.outline_points) {
layers[geozone.name] = App.Map.geozoneLayer(geozone);
}
});
}
return layers;
},
addGeozone: function(geozone, map) {
geozoneLayer: function(geozone) {
var geojsonData = JSON.parse(geozone.outline_points);
var geoJsonLayer = L.geoJSON(geojsonData, {
return L.geoJSON(geojsonData, {
style: function(feature) {
return {
color: feature.properties.color || geozone.color,
@@ -238,8 +256,9 @@
}
}
});
geoJsonLayer.addTo(map);
},
addGeozone: function(map, geozoneLayer) {
geozoneLayer.addTo(map);
},
getPopupContent: function(data) {
return "<a href='" + data.link + "'>" + data.title + "</a>";