Support different colors and headings on each feature

We're making sure each feature contains properties in order to avoid
possible JavaScript errors.

We're also adding a default color to a geozone.

app/assets/javascripts/map.js

@@ -223,14 +223,18 @@
       var geojsonData = JSON.parse(geozone.outline_points);
 
       var geoJsonLayer = L.geoJSON(geojsonData, {
-        style: {
-          color: geozone.color,
+        style: function(feature) {
+          return {
+            color: feature.properties.color || geozone.color,
             fillOpacity: 0.3,
             className: "map-polygon"
+          };
         },
         onEachFeature: function(feature, layer) {
-          if (geozone.headings) {
-            layer.bindPopup(geozone.headings.join("<br>"));
+          var headings = feature.properties.headings || geozone.headings;
+
+          if (headings) {
+            layer.bindPopup(headings.join("<br>"));
           }
         }
       });

app/models/geozone.rb

@@ -1,6 +1,8 @@
 class Geozone < ApplicationRecord
   include Graphqlable
 
+  attribute :color, default: "#0000ff"
+
   has_many :proposals
   has_many :debates
   has_many :users
@@ -31,10 +33,18 @@ class Geozone < ApplicationRecord
         parsed_geojson = JSON.parse(geojson)
 
         if parsed_geojson["type"] == "FeatureCollection"
+          parsed_geojson["features"].each do |feature|
+            feature["properties"] ||= {}
+          end
+
           parsed_geojson
         elsif parsed_geojson["type"] == "Feature"
+          parsed_geojson["properties"] ||= {}
+
           wrap_in_feature_collection(parsed_geojson)
         elsif parsed_geojson["geometry"]
+          parsed_geojson["properties"] ||= {}
+
           wrap_in_feature_collection(wrap_in_feature(parsed_geojson["geometry"]))
         elsif parsed_geojson["type"] && parsed_geojson["coordinates"]
           wrap_in_feature_collection(wrap_in_feature(parsed_geojson))
@@ -47,7 +57,8 @@ class Geozone < ApplicationRecord
     def wrap_in_feature(geometry)
       {
         type: "Feature",
-        geometry: geometry
+        geometry: geometry,
+        properties: {}
       }
     end
 

spec/models/geozone_spec.rb

@@ -101,7 +101,8 @@ describe Geozone do
               [-3.9247799675785, 40.8789131852224],
               [-3.9259027239257, 40.8792937308316]
             ]]
-          }
+          },
+          properties: {}
         }]
       }
 
@@ -136,7 +137,8 @@ describe Geozone do
               [-3.9247799675785, 40.8789131852224],
               [-3.9259027239257, 40.8792937308316]
             ]]
-          }
+          },
+          properties: {}
         }]
       }
 
@@ -170,7 +172,8 @@ describe Geozone do
               [-3.9247799675785, 40.8789131852224],
               [-3.9259027239257, 40.8792937308316]
             ]]
-          }
+          },
+          properties: {}
         }]
       }
 
@@ -202,7 +205,8 @@ describe Geozone do
               [-3.9247799675785, 40.8789131852224],
               [-3.9259027239257, 40.8792937308316]
             ]]
-          }
+          },
+          properties: {}
         }]
       }
 

spec/system/admin/geozones_spec.rb

@@ -173,4 +173,33 @@ describe "Admin geozones", :admin do
       expect(page).to have_link "Polygon me!", href: edit_admin_geozone_path(geozone)
     end
   end
+
+  scenario "overwrites geozone data with features data" do
+    geojson = <<~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": {
+          "color": "#ff5733",
+          "headings": ["Zone 1", "Test zone"]
+        }
+      }
+    JSON
+
+    create(:geozone, color: "#001122", geojson: geojson)
+
+    visit admin_geozones_path
+
+    expect(page).to have_css ".map-polygon[fill='#ff5733']"
+    expect(page).not_to have_css ".map-polygon[fill='#001122']"
+    expect(page).not_to have_content "Zone 1"
+    expect(page).not_to have_content "Test zone"
+
+    find(".map-polygon").click
+
+    expect(page).to have_content "Zone 1\nTest zone"
+  end
 end