Geo: zoom on feature WIP

3 files changed, 53 insertions, 0 deletions

diff --git a/ishtar_common/static/js/ishtar-map.js b/ishtar_common/static/js/ishtar-map.js
index c21cd890e..3fbfd390a 100644
--- a/ishtar_common/static/js/ishtar-map.js
+++ b/ishtar_common/static/js/ishtar-map.js
@@ -664,6 +664,7 @@ var initialize_base_map = function(map_id, layers){
         })
     ];
 
+    console.log(map_id);
     map_view[map_id] = new ol.View({
         projection: view_projection,
         center: ol.proj.fromLonLat([center[0], center[1]]),
@@ -785,6 +786,7 @@ var zoom_to_extent = function(map_id){
 
 var _geo_points = new Array();
 var _geo_other = new Array();
+var _geo_extents = new Array();
 
 var _point_list_crs = new Array();
 var _other_list_crs = new Array();
@@ -862,9 +864,22 @@ const refresh_map_finds_crs = function(url, attrs, idx, crs_check, finds_check)
 }
 
 
+var BASE_GEOJSON = {
+    'type': 'FeatureCollection',
+    'crs': {
+        'type': 'name',
+        'properties': {
+            'name': 'EPSG:4326'
+        }
+    },
+    'features': []
+};
+
+
 const refresh_map = function(idx, geodata_list, url, attrs) {
     _geo_points[idx] = {"type": "FeatureCollection", "features": []};
     _geo_other[idx] = {"type": "FeatureCollection", "features": []};
+    _geo_extents[idx] = new Array();
     for (const key in geodata_list){
         if ($("#map-ol-" + key).prop('checked')){
             let geo_type = geodata_list[key][0];
@@ -876,6 +891,18 @@ const refresh_map = function(idx, geodata_list, url, attrs) {
                 Array.prototype.push.apply(
                     _geo_other[idx]["features"], geojson["features"]);
             }
+            if (_geo_extents[idx].indexOf(key) === -1){
+                let feat = BASE_GEOJSON;
+                feat["features"] = geojson["features"];
+                _geo_extents[key] = new ol.source.Vector(
+                    {features: new ol.format.GeoJSON().readFeatures(feat)}
+                ).getExtent();
+                /// console.log(_geo_extents[key]);
+                register_zoom_on_map("#map-zoom-" + key);
+            }
+            $("#map-zoom-" + key).attr('aria-disabled', 'false');
+        } else {
+            $("#map-zoom-" + key).attr('aria-disabled', 'true');
         }
     }
     if (url && attrs){
@@ -885,3 +912,14 @@ const refresh_map = function(idx, geodata_list, url, attrs) {
     }
 }
 
+const register_zoom_on_map = function(){
+    $(".map-zoom-link").click(
+        function(){
+            let feat_key = $(this).attr("data-geo-id");
+            let map_idx = $(this).attr("data-map-id");
+            /// console.log(_geo_extents[feat_key]);
+            map_view[map_idx].fit(_geo_extents[feat_key]);
+            return false;
+        }
+    )
+}
\ No newline at end of file
diff --git a/ishtar_common/templates/ishtar/blocks/sheet_map.html b/ishtar_common/templates/ishtar/blocks/sheet_map.html
index ab4d2a4ee..70832e1a1 100644
--- a/ishtar_common/templates/ishtar/blocks/sheet_map.html
+++ b/ishtar_common/templates/ishtar/blocks/sheet_map.html
@@ -9,6 +9,13 @@
     <h4>{% trans "Geographic data" %}</h4>
     <ul>{% for geodata in geodata_list %}
         <li>
+            <a role="link" href="#" aria-disabled="true" class="map-zoom-link"
+               id="map-zoom-{{geo_item.SLUG}}-{{geo_item.pk}}-{{geodata.pk}}"
+               data-map-id="map-{{window_id}}-{{geo_item.SLUG}}-{{geo_item.pk}}"
+               data-geo-id="{{geo_item.SLUG}}-{{geo_item.pk}}-{{geodata.pk}}"
+            >
+                <i class="fa fa-search" aria-hidden="true"></i>
+            </a>&nbsp;&nbsp;
             <input type="checkbox" name="map-ol-{{geo_item.SLUG}}-{{geo_item.pk}}-{{geodata.pk}}"
                    class="map-ol-{{geo_item.SLUG}}-{{geo_item.pk}}"
                    id="map-ol-{{geo_item.SLUG}}-{{geo_item.pk}}-{{geodata.pk}}"
diff --git a/scss/custom.scss b/scss/custom.scss
index 8e0d9dd59..92ffbbec4 100644
--- a/scss/custom.scss
+++ b/scss/custom.scss
@@ -29,6 +29,14 @@ label {
     min-height: 1.5rem;
 }
 
+[aria-disabled="true"] {
+    opacity: 0.3;
+}
+
+[aria-disabled="true"]:hover {
+    cursor: not-allowed;
+}
+
 .clearfix{
 	clear: both;
 }