diff --git a/app/assets/javascripts/map.js b/app/assets/javascripts/map.js index daae3393b..9cbbb7c8a 100644 --- a/app/assets/javascripts/map.js +++ b/app/assets/javascripts/map.js @@ -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 "" + data.title + ""; diff --git a/app/components/admin/geozones/index_component.rb b/app/components/admin/geozones/index_component.rb index bdade404e..5d25a7188 100644 --- a/app/components/admin/geozones/index_component.rb +++ b/app/components/admin/geozones/index_component.rb @@ -25,7 +25,8 @@ class Admin::Geozones::IndexComponent < ApplicationComponent { outline_points: geozone.outline_points, color: geozone.color, - headings: [link_to(geozone.name, edit_admin_geozone_path(geozone))] + headings: [link_to(geozone.name, edit_admin_geozone_path(geozone))], + name: geozone.name } end end diff --git a/app/components/budgets/investments/map_component.rb b/app/components/budgets/investments/map_component.rb index 9730cf184..fe887ae28 100644 --- a/app/components/budgets/investments/map_component.rb +++ b/app/components/budgets/investments/map_component.rb @@ -27,7 +27,8 @@ class Budgets::Investments::MapComponent < ApplicationComponent [ { outline_points: heading.geozone.outline_points, - color: heading.geozone.color + color: heading.geozone.color, + name: heading.name } ] end diff --git a/app/components/budgets/map_component.rb b/app/components/budgets/map_component.rb index 3124f8cfa..97ae0ef20 100644 --- a/app/components/budgets/map_component.rb +++ b/app/components/budgets/map_component.rb @@ -27,10 +27,15 @@ class Budgets::MapComponent < ApplicationComponent { outline_points: geozone.outline_points, color: geozone.color, - headings: budget.headings.where(geozone: geozone).map do |heading| + headings: geozone_headings(geozone).map do |heading| link_to heading.name, budget_investments_path(budget, heading_id: heading.id) - end + end, + name: geozone_headings(geozone).map(&:name).join(", ") } end end + + def geozone_headings(geozone) + budget.headings.where(geozone: geozone) + end end diff --git a/spec/system/admin/geozones_spec.rb b/spec/system/admin/geozones_spec.rb index 922472574..37b448d2a 100644 --- a/spec/system/admin/geozones_spec.rb +++ b/spec/system/admin/geozones_spec.rb @@ -202,4 +202,47 @@ describe "Admin geozones", :admin do expect(page).to have_content "Zone 1\nTest zone" end + + scenario "includes a control to select which geozones to display" do + north = <<~JSON + { + "type": "Feature", + "geometry": { + "type": "Polygon", + "coordinates": [[[-0.1, 51.5], [-0.2, 51.5], [-0.2, 51.6], [-0.1, 51.6], [-0.1, 51.5]]] + }, + "properties": {} + } + JSON + + south = <<~JSON + { + "type": "Feature", + "geometry": { + "type": "Polygon", + "coordinates": [[[-0.1, 51.45], [-0.2, 51.45], [-0.2, 51.35], [-0.1, 51.35], [-0.1, 51.45]]] + }, + "properties": {} + } + JSON + + create(:geozone, name: "North", geojson: north) + create(:geozone, name: "South", geojson: south) + + visit admin_geozones_path + + within(".map-location") do + expect(page).to have_css ".map-polygon", count: 2 + + find(".leaflet-control-layers").click + uncheck "South" + + expect(page).to have_css ".map-polygon", count: 1 + + find(".map-polygon").click + + expect(page).to have_content "North" + expect(page).not_to have_content "South" + end + end end