feat: Map Projection in Advanced Options "needs enhancement"

Author: yharby

src/GEOComp.tsx

@@ -141,6 +141,7 @@ var GEOComp = (function () {
       maxZoom:30,
       menuTitle: "Menu",
       menuContent: "No Content",
+      projection: "EPSG:3857",
       buttons: { 
         draw: true
       },

src/vendors/Geo.jsx

@@ -122,7 +122,7 @@ function Geo(props) {
       const validatedLayers = layers.filter(layer => layer !== null && layer !== undefined);
       const sortedLayers = validatedLayers
         .sort((a, b) => (a.order || 0) - (b.order || 0))
-        .map(createLayer)
+        .map(layerConfig => createLayer(layerConfig, map))
         .filter(layer => layer !== null && layer !== undefined);
       map.getLayers().clear();
       sortedLayers.forEach(layer => { if (layer) map.addLayer(layer) });
@@ -152,7 +152,8 @@ function Geo(props) {
           center: fromLonLat((props.center.length == 2 ? props.center : props.defaults.center) || geoLoc || [0, 0]),
           zoom: props.zoom || props.defaults.zoom,
           maxZoom: props.maxZoom || props.defaults.maxZoom || 100,
-          rotation: props.rotation || props.defaults.rotation
+          rotation: props.rotation || props.defaults.rotation,
+          projection: props.defaults.projection || 'EPSG:3857'
         }),
         target: 'GEO_' + geoId,
         layers: [],

src/vendors/helpers/Layers.js

@@ -17,7 +17,7 @@ import { geoJsonStyleFunction } from './Styles'
 import { applyBackground, applyStyle } from 'ol-mapbox-style';
 import { createXYZ } from 'ol/tilegrid.js';
 
-export function createLayer(layerConfig) {
+export function createLayer(layerConfig, map) {
   if (!layerConfig || !layerConfig.type) {
     console.warn("Skipping layer due to missing type or configuration:", layerConfig);
     return null;
@@ -90,7 +90,7 @@ export function createLayer(layerConfig) {
           features: new GeoJSON().readFeatures(layerConfig.source.data, {
             // Ensure the features are read with the correct projection
             dataProjection: layerConfig.source.projection || 'EPSG:4326', // Assuming the GeoJSON is in WGS 84
-            featureProjection: 'EPSG:3857' // Assuming the map projection
+            featureProjection: map.getView().getProjection() || 'EPSG:3857' // Assuming the map projection
           }),
         }),
         // Add this line to apply a generic style to the layer
@@ -132,7 +132,7 @@ export function createLayer(layerConfig) {
         opacity: layerConfig.opacity,
         selectable: layerConfig.selectable,
         source: new VectorTileSource({
-          projection: layerConfig.source?.projection,
+          projection: layerConfig.source?.projection || 'EPSG:3857',
         }),
         style: layerConfig.source.style,
       });