Added getLayerByName and getFeatureById api function to the map compo…

…nent
thakurpriya1990 · Jun 13, 2024 · 335f80c · 335f80c
1 parent 758be71
commit 335f80c
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 2 deletions.
diff --git a/boranga/frontend/boranga/src/components/common/component_map.vue b/boranga/frontend/boranga/src/components/common/component_map.vue
@@ -4883,6 +4883,10 @@ export default {
                 layer.set('editing', false);
             }
         },
+        /**
+         * Queries the tenure layer at point coordinates and pans/zooms to coordinates
+         * @param {Array} coordinates Point coordinates
+         */
         highlightPointOnTenureLayer: function (coordinates) {
             if (!coordinates) {
                 return;
@@ -4898,6 +4902,37 @@ export default {
             });
             this.centerOnFeature(feature, 12);
         },
+        /**
+         * Returns a layer by its name
+         * @param {String} layer_name The 'name' property of the layer. Corresponds to the 'name' property in the layer definition prop
+         */
+        getLayerByName: function (layer_name) {
+            return this.map
+                .getLayers()
+                .getArray()
+                .find((layer) => {
+                    return layer.get('name') == layer_name;
+                });
+        },
+        /**
+         * Returns a layer's feature by its id
+         * @param {Object} layer A layer
+         * @param {String|Number} feature_id The id of a feature on the layer
+         */
+        getFeatureById: function (layer, feature_id) {
+            let featureId = Number(feature_id);
+            if (isNaN(featureId)) {
+                console.error(`Feature ID ${feature_id} is not a number`);
+                return;
+            }
+            return layer
+                .getSource()
+                .getFeatures()
+                .find((feature) => {
+                    // The features name property is the model instance pk
+                    return feature.getProperties().name == featureId;
+                });
+        },
     },
 };
 </script>

diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_locations.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_locations.vue
@@ -27,7 +27,7 @@
                     :spatial-operations-allowed="['__all__']"
                     :tile-layer-api-url="tileLayerApiUrl"
                     :query-layer-definition="{
-                        name: 'query_layer',
+                        name: queryLayerName,
                         title: 'Occurrence Reports',
                         default: false,
                         can_edit: true,
@@ -325,6 +325,7 @@ export default {
             coordination_source_list: [],
             location_accuracy_list: [],
             mapReady: false,
+            queryLayerName: 'query_layer',
         };
     },
     computed: {
@@ -590,7 +591,10 @@ export default {
             this.$refs.component_map.highlightPointOnTenureLayer(coordinates);
         },
         highlightIdOnMapLayer: function (id) {
-            console.log(id);
+            const map = this.$refs.component_map;
+            const layer = map.getLayerByName(this.queryLayerName);
+            const feature = map.getFeatureById(layer, id);
+            map.centerOnFeature(feature, 12);
         },
     },
 };