feat: add overviewmap for map-view

map-view/src/api/__mocks__/mock-data.ts

@@ -39,6 +39,10 @@ export const mockMapConfig: MapConfig = {
       },
     ],
   },
+  overviewConfig: {
+    imageExtent: [0, 0, 0, 0],
+    imageUrl: "testurl",
+  },
   traffic_sign_icons_url: "http://127.0.0.1:8000/static/traffic_control/svg/traffic_sign_icons/",
   featureTypeEditNameMapping: {},
 };

map-view/src/common/Map.ts

@@ -5,7 +5,7 @@ import Control from "ol/control/Control";
 import MousePosition from "ol/control/MousePosition";
 import { createStringXY } from "ol/coordinate";
 import ScaleLine from "ol/control/ScaleLine";
-import { defaults as defaultControls } from "ol/control";
+import { defaults as defaultControls, OverviewMap } from "ol/control";
 import View from "ol/View";
 import { Feature, LayerConfig, MapConfig } from "../models";
 import ImageLayer from "ol/layer/Image";
@@ -25,6 +25,7 @@ import { Cluster } from "ol/source";
 import BaseObject from "ol/Object";
 import { getCenter } from "ol/extent";
 import { getSinglePointStyle, isCoordinateInsideFeature } from "./MapUtils";
+import Static from "ol/source/ImageStatic";
 
 class Map {
   /**
@@ -35,6 +36,10 @@ class Map {
    * Openlayers Map instance
    */
   private map: OLMap;
+  /**
+   * OpenLayers overviewmap
+   */
+  private overViewMap: OverviewMap;
   /**
    * Current visible basemap
    */
@@ -74,22 +79,22 @@ class Map {
    * @param mapConfig Configurations for the map
    */
   initialize(target: string, mapConfig: MapConfig) {
-    const { basemapConfig, overlayConfig } = mapConfig;
+    const { basemapConfig, overlayConfig, overviewConfig } = mapConfig;
     const basemapLayerGroup = this.createBasemapLayerGroup(basemapConfig);
     const clusteredOverlayLayerGroup = this.createClusteredOverlayLayerGroup(mapConfig);
     const nonClusteredOverlayLayerGroup = this.createNonClusteredOverlayLayerGroup(mapConfig);
     this.planRealDiffVectorLayer = Map.createPlanRealDiffVectorLayer();
 
-    const helsinkiCoords = [25499052.02, 6675851.38];
     const resolutions = [256, 128, 64, 32, 16, 8, 4, 2, 1, 0.5, 0.25, 0.125, 0.0625];
     const projection = this.getProjection();
     const view = new View({
       projection,
-      center: helsinkiCoords,
+      center: this.getDefaulViewCenter(),
       zoom: 5,
       resolutions,
       extent: projection.getExtent(),
     });
+
     this.map = new OLMap({
       target: target,
       layers: [
@@ -102,6 +107,25 @@ class Map {
       view,
     });
 
+    this.overViewMap = new OverviewMap({
+      className: "ol-overviewmap",
+      layers: [
+        new ImageLayer({
+          source: new Static({
+            url: overviewConfig["imageUrl"],
+            imageExtent: overviewConfig["imageExtent"],
+          }),
+        }),
+      ],
+      collapsed: false,
+      view: new View({
+        extent: overviewConfig["imageExtent"],
+        showFullExtent: true,
+        resolutions: [128],
+      }),
+    });
+    this.map.addControl(this.overViewMap);
+
     /**
      * Return all features that exist in the position that user clicked the map
      * This is ran once per visible layer
@@ -565,6 +589,10 @@ class Map {
 
     return defaultControls().extend([mousePosition, scaleLine]);
   }
+
+  private getDefaulViewCenter() {
+    return [25499052.02, 6675851.38];
+  }
 }
 
 export default new Map();

map-view/src/models.ts

@@ -15,9 +15,15 @@ export interface LayerConfig {
   sourceUrl: string;
 }
 
+export interface OverviewConfig {
+  imageUrl: string;
+  imageExtent: number[];
+}
+
 export interface MapConfig {
   basemapConfig: LayerConfig;
   overlayConfig: LayerConfig;
+  overviewConfig: OverviewConfig;
   traffic_sign_icons_url: string;
   featureTypeEditNameMapping: Record<string, string>;
 }

map/tests/test_views.py

@@ -1,5 +1,6 @@
 import json
 
+from django.conf import settings
 from django.test import RequestFactory, TestCase
 from django.urls import reverse
 
@@ -58,4 +59,9 @@ def test_layer_config_return_ok(self):
         response_data = json.loads(response.content)
         self.assertEqual(len(response_data["basemapConfig"]["layers"]), 1)
         self.assertEqual(len(response_data["overlayConfig"]["layers"]), 2)
+        self.assertEqual(
+            response_data["overviewConfig"]["imageUrl"],
+            f"{request.build_absolute_uri(settings.STATIC_URL)}traffic_control/png/map/cityinfra_overview_map-704x704.png",
+        )
+        self.assertEqual(response_data["overviewConfig"]["imageExtent"], [25490088.0, 6665065.0, 25512616, 6687593.0])
         self.assertEqual(response_data["featureTypeEditNameMapping"], {"featurename": "edit_featurename"})

map/views.py

@@ -49,7 +49,20 @@ def map_config(request):
             "layers": overlays,
             "sourceUrl": request.build_absolute_uri("/")[:-1] + reverse("wfs-city-infrastructure"),
         },
+        "overviewConfig": {
+            "imageUrl": f"{request.build_absolute_uri(settings.STATIC_URL)}"
+            f"traffic_control/png/map/cityinfra_overview_map-704x704.png",
+            "imageExtent": _get_overview_image_extent(),
+        },
         "traffic_sign_icons_url": traffic_sign_icons_url,
         "featureTypeEditNameMapping": FeatureTypeEditMapping.get_featuretype_edit_name_mapping(),
     }
     return JsonResponse(config)
+
+
+def _get_overview_image_extent():
+    """In the hardcoded png file 1 px means 32 meters in real world.
+    Resolution of the image is 704x704
+    Coordinates for top left corner are 25490088.0, 6687593.0
+    """
+    return [25490088.0, 6687593.0 - 32 * 704, 25490088 + 32 * 704, 6687593.0]