maps: Add more features to the colour coding

This adds logic and fields that can be selected for colour coding. The fields will take the pretty field name and attach either the field value or if the field does not exist
Open-Telecoms-Data · Nov 16, 2022 · 2a8c5c3 · 2a8c5c3
1 parent f557858
commit 2a8c5c3
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 20 deletions.
diff --git a/cove_ofds/process.py b/cove_ofds/process.py
@@ -236,11 +236,11 @@ class ConvertJSONIntoGeoJSON(ProcessDataTask):
         "/features/properties/phase/name": "Phase",
         "/features/properties/physicalInfrastructureProvider/name": "Physical Infrastructure Provider",
         "/features/properties/networkProvider/name": "Network Provider",
-        # "/features/properties/technologies": "Technologies",
-        # "/features/properties/status": "Status",
-        # "/features/properties/type": "Type",
-        # "/features/properties/accessPoint": "accessPoint",
-        # "/features/properties/power": "Power",
+        "/features/properties/technologies": "Technologies",
+        "/features/properties/status": "Status",
+        "/features/properties/type": "Type",
+        "/features/properties/accessPoint": "accessPoint",
+        "/features/properties/power": "Power",
     }
 
     spanFields = {
@@ -250,13 +250,13 @@ class ConvertJSONIntoGeoJSON(ProcessDataTask):
         "/features/properties/physicalInfrastructureProvider/name": "Physical Infrastructure Provider",
         "/features/properties/networkProvider/name": "Network Provider",
         "/features/properties/supplier/name": "Supplier",
-        # "/features/properties/transmissionMedium": "Transmission Medium",
-        # "/features/properties/deployment": "Deployment",
-        # "/features/properties/darkFibre": "Dark Fibre",
-        # "/features/properties/fibreType": "Fibre Type",
-        # "/features/properties/fibreCount": "Fibre Count",
-        # "/features/properties/technologies": "Technologies",
-        # "/features/properties/capacity": "Capacity",
+        "/features/properties/transmissionMedium": "Transmission Medium",
+        "/features/properties/deployment": "Deployment",
+        "/features/properties/darkFibre": "Dark Fibre",
+        "/features/properties/fibreType": "Fibre Type",
+        "/features/properties/fibreCount": "Fibre Count",
+        "/features/properties/technologies": "Technologies",
+        "/features/properties/capacity": "Capacity",
     }
 
     def __init__(self, supplied_data):
@@ -326,8 +326,16 @@ def get_context(self):
                 data = json.load(fp)
             context["any_nodes_with_geometry"] = data["any_nodes_with_geometry"]
             context["any_spans_with_geometry"] = data["any_spans_with_geometry"]
-            context["nodes_fields"] = {field.split("/")[3]: label for field, label in self.nodeFields.items() if field in data["nodes_output_field_coverage"]}
-            context["spans_fields"] = {field.split("/")[3]: label for field, label in self.spanFields.items() if field in data["spans_output_field_coverage"]}
+            context["nodes_fields"] = {
+                field.split("/")[3]: label
+                for field, label in self.nodeFields.items()
+                if field in data["nodes_output_field_coverage"]
+            }
+            context["spans_fields"] = {
+                field.split("/")[3]: label
+                for field, label in self.spanFields.items()
+                if field in data["spans_output_field_coverage"]
+            }
         else:
             context["can_download_geojson"] = False
         # done!

diff --git a/cove_ofds/templates/cove_ofds/explore.html b/cove_ofds/templates/cove_ofds/explore.html
@@ -313,6 +313,8 @@ <h4 class="panel-title">
 {% block extrafooterscript %}
   {{ block.super }}
   {% if can_download_geojson %}{% if any_nodes_with_geometry or any_spans_with_geometry %}
+  {{ nodes_fields|json_script:"node-fields" }}
+  {{ spans_fields|json_script:"span-fields" }}
     <script>
       function geojsonMarkerOptions(colour) {
         return {
@@ -367,12 +369,47 @@ <h4 class="panel-title">
         })
       }
 
+      function getFeatureID(feature, field) {
+        if (feature?.properties[field]?.id !== undefined) {
+          return feature.properties[field].id
+        } else if ((feature?.properties[field] !== undefined)) {
+          return feature.properties[field]
+        } else {
+          return "unknown"
+        }
+      }
+
+      function getJsonFromDict(feature) {
+        console.log(feature.geometry.type)
+        if (feature.geometry.type === 'Point') {
+          console.log('node', document.getElementById('node-fields').textContent)
+          return JSON.parse(document.getElementById('node-fields').textContent);
+        } else if (feature.geometry.type === 'LineString') {
+          return JSON.parse(document.getElementById('span-fields').textContent);
+        } else {
+          throw "The field options cannot be found."
+        }
+      }
+
+
+      function getFeatureName(feature, field) {
+        var fieldOptions = getJsonFromDict(feature);
+        if (feature?.properties[field]?.name !== undefined) {
+          return feature.properties[field].name
+        } else if ((feature?.properties[field] !== undefined)) {
+          return `${fieldOptions[field]}: ${feature?.properties[field] || 'no data'}`
+        } else {
+          return `${fieldOptions[field]}: ${feature?.properties[field] || 'no data'}`
+        }
+      }
+
       function generateFeatureData(features, field) {
-        var uniqueIDs = [...new Set(features.map((feature) => feature.properties[field].id))]
+        var uniqueIDs = [...new Set(features.map((feature) => getFeatureID(feature, field)))]
         var featureDetails = uniqueIDs.map((uniqueNetwork, index) => {
-          var uniqueFeature = features.find(feature => feature.properties[field].id === uniqueNetwork)
+          var uniqueFeature = features.find(feature => getFeatureID(feature, field) === uniqueNetwork);
+          var fieldName = getFeatureName(uniqueFeature, field);
           var networkColour = {[uniqueNetwork]: {
-            name: uniqueFeature.properties[field].name,
+            name: [fieldName],
             type: uniqueFeature.geometry.type,
             colour: networkColours[index % networkColours.length]
           }}
@@ -396,7 +433,7 @@ <h4 class="panel-title">
           var spanFeatureData = generateFeatureData(spanJson.features, spanSelect)
           var layer = await L.geoJson(spanJson, {
             style: function(feature) {
-              return {color: spanFeatureData[feature.properties[spanSelect].id]['colour']}
+              return {color: spanFeatureData[getFeatureID(feature, spanSelect)]['colour']}
             }
           }).bindPopup(layer => generatePopup(layer), customOptions)
           spanLayerGroup.addLayer(layer)
@@ -411,10 +448,10 @@ <h4 class="panel-title">
           var nodeFeatureData = generateFeatureData(nodeJson.features, nodeSelect)
           var layer = await L.geoJson(nodeJson, {
             pointToLayer: function (feature, latlng) {
-              return L.circleMarker(latlng, geojsonMarkerOptions(nodeFeatureData[feature.properties[nodeSelect].id]['colour']));
+              return L.circleMarker(latlng, geojsonMarkerOptions(nodeFeatureData[getFeatureID(feature, nodeSelect)]['colour']));
             },
             style: function(feature) {
-              return {color: nodeFeatureData[feature.properties[nodeSelect].id]['colour']}
+              return {color: nodeFeatureData[getFeatureID(feature, nodeSelect)]['colour']}
             }
           }).bindPopup(layer => generatePopup(layer), customOptions)
           nodeLayerGroup.addLayer(layer)