Adds notification box (fixes #166 )

Signed-off-by: Daniel Kastl <[email protected]>

Author: dkastl

config/locales/de.yml

@@ -86,6 +86,7 @@ de:
       cancel: Abbrechen
     messages:
       baselayer_missing: "There is no baselayer available!"
+      zoom_in_more: "Zoom in to view objects."
   gtt_map_rotate_label: Kartenrotation
   gtt_map_rotate_info_html: Hold down <code>Shift+Alt</code> and drag the map to rotate.
   gtt_settings_label_general: "General"

config/locales/en.yml

@@ -110,3 +110,4 @@ en:
       cancel: "Cancel"
     messages:
       baselayer_missing: "There is no baselayer available!"
+      zoom_in_more: "Zoom in to view objects."

config/locales/ja.yml

@@ -109,4 +109,5 @@ ja:
       cancel: キャンセル
     messages:
       baselayer_missing: "There is no baselayer available!"
+      zoom_in_more: "Zoom in to view objects."
   title_geojson_upload: GeoJSONのインポート

src/components/gtt-client/init/layers.ts

@@ -181,6 +181,34 @@ function addVectorLayer(this: any, features: Feature<Geometry>[] | null): void {
   });
   this.vector.set('title', 'Features');
   this.vector.set('displayInLayerSwitcher', false);
+
+  // Listen to the moveend event and show message when zoom level is too low
+  let previousZoom = this.map.getView().getZoom();
+
+  const notification = document.createElement('div');
+  notification.className = 'gtt-map-notification';
+  notification.innerText = this.i18n.messages.zoom_in_more;
+
+  const mapContainer = this.map.getTargetElement();
+  Object.assign(mapContainer.style, {
+    position: 'relative',
+  });
+
+  this.map.on('moveend', () => {
+    const currentZoom = this.map.getView().getZoom();
+    if (previousZoom !== currentZoom) {
+      if (currentZoom <= Number(this.defaults.vectorMinzoom || 0)) {
+        mapContainer.appendChild(notification);
+      }
+      else {
+        try {
+          mapContainer.removeChild(notification);
+        } catch (error) {}
+      }
+      previousZoom = currentZoom;
+    }
+  });
+
   this.map.addLayer(this.vector);
 }
 

src/components/gtt-client/openlayers/index.ts

@@ -318,23 +318,15 @@ export function setPopover() {
 */
 export function setBasemap(): void {
   if (this.layerArray.length == 0) {
-    console.warn(this.i18n.messages.baselayer_missing);
-
     const notification = document.createElement('div');
+    notification.className = 'gtt-map-notification';
     notification.innerText = this.i18n.messages.baselayer_missing;
 
     const mapContainer = this.map.getTargetElement();
     Object.assign(mapContainer.style, {
       position: 'relative',
     });
 
-    Object.assign(notification.style, {
-      position: 'absolute',
-      top: '55%',
-      left: '50%',
-      transform: 'translate(-50%, -50%)',
-    });
-
     mapContainer.appendChild(notification);
     return
   }

src/styles/scss/app.scss

@@ -90,6 +90,16 @@ div.ol-rotate {
   font-size: 1.5rem;
 }
 
+.gtt-map-notification {
+  background-color: #f1515c;
+  color: #fff;
+  padding: 0.5em;
+  position: absolute;
+  top: 55%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
 // map.png icon as data URI
 $data-uri: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAK2SURBVBgZBcHLjxN1AADg79eZttvddttll+WxIGrAV4QYTbxoYsSLgjc5arx68qCGf8G7J+NBEg8e9GqURDEmEiOJAWNUwIi8sryWDbSdmc60Mx2/Lxw78caZ1fXVo1EUAYAAACAIgICymrt/7/6P8er66tHPPzklNIJyPgNAENRqAWSzBEFdN9TzWq3y0ckPj8ZRFKmUwuxL6fcXrJzJbJ18xFKv6/LlX1xMP3Nra6jXW3Z3eyiKm0Zp7t1jtWYcaQAMh9uGT7eMkkR2+m9JcluSJEJxQTEZm2Rj00liMkmUeSqEOYI4APr9ndQzi+/v4OPz2m+tWd+zV2d2xaQ8pDfoaUUNcbMlyXIhFAgaQDAcDiXJ2MP1ymilNPn6X6q5OvvZrEhk49SsyBR5alpkQqhBDNDvr1PPDPrLhu89Y+XTbeUre7TXCo9MtzW7+y22I81W0zibYkSgQQB5XkiTzHA0NF6qPHiC/Iv/1FWuMf1WPklMi1SeJubTVABBHACdzkB3OdVfXgbNtx/V+eCsuDpg7+pf8s7ERvcP7daW6eSaqPGOgDgAxsNUkhRI/bZ5x41Zw66DlSdPXbZ5PLUr+kYx+slg8Yj2uW1hNRPQEIKA5cFuFgZ+z0rXpk2DwU53XjtgX7xisrXXoDuycX1B54dLbrQqdbMFYqjr2rmbV13YvKTb7cnzXJKkkqLw61MNh7+6Ijl/3eZK0+3nHzdqBvtbbRAHZGVqq5ppt7qWOn15MdVd6Or/ed2+W5lWkwfPHnbzsZZ2e8HStKCuQUwQQkPPsknItKuOxdC16+I9rc2Jqy8dURxMvHz2oX/27xa1m5irZqWAuCwrVVXZ2PGcjVUCCMIhvMpaCCC8OPdCNBMttESNSDWvlFUlvHni+Hc719dej5oxggAIAAAIAIGyrGzd3Tr9P5JrNp8Zt4rCAAAAAElFTkSuQmCC');