Add support for non Mercator projection in OL view

give the opportunity to translate the zoom level before giving it to MapLibre. This makes it possible to have OL functioning with a non-Mercator projection system, and still be able to have MapLibre receiving a valid Mercator zoom level to keep the maps in sync.

You can see this code in action here : geoadmin/web-mapviewer#981
where we have our OL instance working in LV95.

Author: pakb

src/MapLibreLayer.ts

@@ -12,9 +12,20 @@ import getMapLibreAttributions from './getMapLibreAttributions.js';
 
 export type MapLibreOptions = Omit<MapOptions, 'container'>;
 
+/**
+ * Receives the zoom level from the OpenLayers view
+ * and can transform it for MapLibre in case the projection
+ * system used by OL isn't using a standard Mercator pyramid.
+ *
+ * This enables the MapLibreLayer to work in Mercator zooms even if OL
+ * is using a localized projection (such as LV95 for Switzerland)
+ */
+export type MapLibreLayerTranslateZoomFunction = (zoom: number) => number;
+
 export type MapLibreLayerOptions = LayerOptions & {
   mapLibreOptions: MapLibreOptions;
   queryRenderedFeaturesOptions?: QueryRenderedFeaturesOptions;
+  translateZoom?: MapLibreLayerTranslateZoomFunction
 };
 
 export default class MapLibreLayer extends Layer {
@@ -105,6 +116,7 @@ export default class MapLibreLayer extends Layer {
   }
 
   override createRenderer(): MapLibreLayerRenderer {
-    return new MapLibreLayerRenderer(this);
+    const translateZoom = this.get('translateZoom') as MapLibreLayerTranslateZoomFunction | undefined;
+    return new MapLibreLayerRenderer(this, translateZoom);
   }
 }

src/MapLibreLayerRenderer.ts

@@ -12,6 +12,7 @@ import type {Geometry} from 'ol/geom.js';
 import {SimpleGeometry} from 'ol/geom.js';
 import type {Pixel} from 'ol/pixel.js';
 import type MapLibreLayer from './MapLibreLayer.js';
+import type { MapLibreLayerTranslateZoomFunction } from './MapLibreLayer.js'
 
 const VECTOR_TILE_FEATURE_PROPERTY = 'vectorTileFeature';
 
@@ -28,6 +29,13 @@ const formats: {
  * functionalities like map.getFeaturesAtPixel or map.hasFeatureAtPixel.
  */
 export default class MapLibreLayerRenderer extends LayerRenderer<MapLibreLayer> {
+  private readonly translateZoom: MapLibreLayerTranslateZoomFunction | undefined
+
+  constructor(layer: MapLibreLayer, translateZoom: MapLibreLayerTranslateZoomFunction | undefined) {
+    super(layer)
+    this.translateZoom = translateZoom
+  }
+
   getFeaturesAtCoordinate(
     coordinate: Coordinate | undefined,
     hitTolerance: number = 5,
@@ -71,8 +79,8 @@ export default class MapLibreLayerRenderer extends LayerRenderer<MapLibreLayer>
 
     // adjust view parameters in MapLibre
     mapLibreMap.jumpTo({
-      center: toLonLat(viewState.center) as [number, number],
-      zoom: viewState.zoom - 1,
+      center: toLonLat(viewState.center, viewState.projection) as [number, number],
+      zoom: (this.translateZoom ? this.translateZoom(viewState.zoom) : viewState.zoom) - 1 ,
       bearing: toDegrees(-viewState.rotation),
     });