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

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`.

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 "<a href='" + data.link + "'>" + data.title + "</a>";

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

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

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

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