Add zoom to layer in LayerTree

adrianbrosz · Apr 29, 2020 · 473ca94 · 473ca94
1 parent 1c44f52
commit 473ca94
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 3 deletions.
diff --git a/icons/zoom.svg b/icons/zoom.svg
diff --git a/plugins/LayerTree.jsx b/plugins/LayerTree.jsx
@@ -17,7 +17,7 @@ const FileSaver = require('file-saver');
 const Message = require('../components/I18N/Message');
 const {LayerRole, changeLayerProperty, removeLayer, reorderLayer, setSwipe, addLayerSeparator} = require('../actions/layers')
 const {setActiveLayerInfo} = require('../actions/layerinfo');
-const {toggleMapTips} = require('../actions/map');
+const {toggleMapTips, zoomToExtent} = require('../actions/map');
 const ConfigUtils = require("../utils/ConfigUtils");
 const LocaleUtils = require("../utils/LocaleUtils");
 const Icon = require('../components/Icon');
@@ -232,9 +232,17 @@ class LayerTree extends React.Component {
                     (<Icon key="layertree-item-move-up" className="layertree-item-move" icon="arrow-up" onClick={() => this.props.reorderLayer(layer, path, -1)} />)
                 ];
             }
+            let zoomToLayerButton = null;
+            if(sublayer.bbox && sublayer.bbox.bounds && sublayer.bbox.crs) {
+                let zoomToLayerTooltip = LocaleUtils.getMessageById(this.context.messages, "layertree.zoomtolayer");
+                zoomToLayerButton = (
+                    <Icon icon="zoom" title={zoomToLayerTooltip} onClick={() => this.props.zoomToExtent(sublayer.bbox.bounds, sublayer.bbox.crs)} />
+                )
+            }
             editframe = (
                 <div className="layertree-item-edit-frame" style={{marginRight: allowRemove ? '1.75em' : 0}}>
                     <div className="layertree-item-edit-items">
+                        {zoomToLayerButton}
                         <Icon icon="transparency" />
                         <input className="layertree-item-transparency-slider" type="range" min="0" max="255" step="1" defaultValue={255-sublayer.opacity} onMouseUp={(ev) => this.layerTransparencyChanged(layer, path, ev.target.value)} onTouchEnd={(ev) => this.layerTransparencyChanged(layer, path, ev.target.value)} />
                         {reorderButtons}

diff --git a/translations/data.de-DE b/translations/data.de-DE
@@ -102,7 +102,8 @@
       "deletealllayers": "Alle Ebenen entfernen",
       "visiblefilter": "Unsichtbare Ebenen filtern",
       "separator": "Separator",
-      "separatortooltip": "Separator hinzufügen"
+      "separatortooltip": "Separator hinzufügen",
+      "zoomtolayer": "Auf den Layer zoomen"
     },
     "locate": {
       "metersUnit": "Meter",

diff --git a/translations/data.en-US b/translations/data.en-US
@@ -102,7 +102,8 @@
       "deletealllayers": "Remove all layers",
       "visiblefilter": "Filter invisible layers",
       "separator": "Separator",
-      "separatortooltip": "Add separator"
+      "separatortooltip": "Add separator",
+      "zoomtolayer": "Zoom to layer"
     },
     "locate": {
       "metersUnit": "meters",

diff --git a/translations/tsconfig.json b/translations/tsconfig.json
@@ -90,6 +90,7 @@
     "layertree.visiblefilter",
     "layertree.separator",
     "layertree.separatortooltip",
+    "layertree.zoomtolayer",
     "locate.metersUnit",
     "locate.feetUnit",
     "locate.popup",