Updated OpenLayers dependencies and tweaked webpack and typescript to…

… work with new version. (#171)
Dorset-Council-UK · Oct 10, 2023 · a05feb9 · a05feb9
1 parent dbabf45
commit a05feb9
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 224 deletions.
diff --git a/GIFrameworkMaps.Web/Scripts/ContextMenu.ts b/GIFrameworkMaps.Web/Scripts/ContextMenu.ts
@@ -1,11 +1,11 @@
-import * as olProj from "ol/proj";
+import ContextMenu, { Item } from "ol-contextmenu";
+import * as olProj from "ol/proj";
 import { GIFWMousePositionControl } from "../Scripts/MousePositionControl";
 import { Streetview } from "./Streetview";
-const ContextMenu = require("ol-contextmenu");
 
 export class GIFWContextMenu {
-    control: typeof ContextMenu;
-    items: {}[];
+    control: ContextMenu;
+    items: Item[];
     streetviewInstance: Streetview;
 
     constructor(mousePosition: GIFWMousePositionControl) {
@@ -33,7 +33,7 @@ export class GIFWContextMenu {
 
     private setControl() {
         this.control = new ContextMenu({
-            width: 'fit-content',
+            width: 'fit-content' as unknown as number,
             defaultItems: false,
             items: this.items
         });
@@ -43,10 +43,10 @@ export class GIFWContextMenu {
         this.control.on('beforeopen', function (event: any) {
             // Disables the context menu where a map control or popup is under the right click position, or where an element at that position contains a 'context-menu-disabled' class
             // Adapted from: https://github.com/jonataswalker/ol-contextmenu/issues/130
-            let mapElement = this.map_.getTargetElement() as HTMLElement;
-            let { top, left } = mapElement.getBoundingClientRect();
-            let controlContainer = mapElement.querySelector('.ol-overlaycontainer-stopevent');
-            let elementsAtClick = document.elementsFromPoint(event.pixel[0] + left, event.pixel[1] + top);
+            const mapElement = this.map_.getTargetElement() as HTMLElement;
+            const { top, left } = mapElement.getBoundingClientRect();
+            const controlContainer = mapElement.querySelector('.ol-overlaycontainer-stopevent');
+            const elementsAtClick = document.elementsFromPoint(event.pixel[0] + left, event.pixel[1] + top);
             if (elementsAtClick.some(el => el.classList.contains('context-menu-disabled') || controlContainer.contains(el))) {
                 this.disable();
             } else {
@@ -59,12 +59,12 @@ export class GIFWContextMenu {
                 if (typeof item === 'object') {
                     if ('data' in item) {
                         if ('coord' in item.data) {
-                            let projectionCode = item.data.mousePosition.projection;
-                            let projectionString = item.data.mousePosition.getProjectionString(projectionCode);
-                            let coordDecimals = item.data.mousePosition.decimals;
-                            let clickCoord = this.map_.getCoordinateFromPixel(event.pixel);
-                            let transformedCoord = olProj.transform(clickCoord, 'EPSG:3857', projectionString);
-                            let coord = item.data.mousePosition.formatCoordinates(projectionCode, coordDecimals, transformedCoord);
+                            const projectionCode = item.data.mousePosition.projection;
+                            const projectionString = item.data.mousePosition.getProjectionString(projectionCode);
+                            const coordDecimals = item.data.mousePosition.decimals;
+                            const clickCoord = this.map_.getCoordinateFromPixel(event.pixel);
+                            const transformedCoord = olProj.transform(clickCoord, 'EPSG:3857', projectionString);
+                            const coord = item.data.mousePosition.formatCoordinates(projectionCode, coordDecimals, transformedCoord);
                             item.data.coord = coord;
                             this.clear();
                             this.extend([