fix: Layers

Author: sjhoeksma

src/LayersControl.tsx

@@ -15,7 +15,7 @@ import { trans } from "./i18n/comps";
 import { Divider } from "antd"
 
 
-function layerSourceControl() {
+export function SourceControl() {
     // const childrenMap: any =
     const childrenMap: any = {
         url: stringSimpleControl(),
@@ -35,7 +35,7 @@ function layerSourceControl() {
     };
 
     //Class is rebuiled not retuning same class 
-    class LayerSourceTemp extends new MultiCompBuilder(childrenMap, (props: any) => props)
+    class SourceTemp extends new MultiCompBuilder(childrenMap, (props: any) => props)
         .setPropertyViewFn((children: any) => (<></>))
         .build() {
 
@@ -117,7 +117,7 @@ function layerSourceControl() {
             );
         }
     }
-    return LayerSourceTemp;
+    return SourceTemp;
 }
 
 var LayerObjectOption = new MultiCompBuilder(
@@ -135,7 +135,7 @@ var LayerObjectOption = new MultiCompBuilder(
             { label: "arcgis-mapserver-tile", value: "arcgis mapserver tile" },
             { label: "arcgis-mapserver-image", value: "arcgis mapserver image" }
         ]),
-        source: layerSourceControl(),
+        source: SourceControl(),
         visible: withDefault(BoolPureControl, true),
         selectable: withDefault(BoolPureControl, true),
         userVisible: withDefault(BoolPureControl, true),
@@ -186,12 +186,9 @@ LayerObjectOption = class extends LayerObjectOption {
     }
 };
 
-
-//TODO: Change this to a function so it can be used directly instead of data
-
 export function layersControl(config?: any) {
     const manualOptions = config ? config : [
-        { label: "Test", title: "test" }
+        { label: "Layer1", title: "Layer" }
     ]
     const childrenMap: any = {
         data: manualOptionsControl(LayerObjectOption, {

src/vendors/helpers/Layers.js

@@ -104,7 +104,6 @@ export function createLayer(layerConfig, map) {
         }),
       });
     case 'geojson':
-      console.log(JSON.stringify(layerConfig.source?.data || {}))
       return new VectorLayer({
         name: layerConfig.label,
         title: layerConfig.title || layerConfig.name,
@@ -119,11 +118,15 @@ export function createLayer(layerConfig, map) {
         splitscreen: layerConfig.splitscreen,
         displayInLayerSwitcher: layerConfig.userVisible,
         source: new VectorSource({
-          features: new GeoJSON().readFeatures(JSON.stringify(layerConfig.source?.data || {}), {
+          features: new GeoJSON().readFeatures(
+            (typeof layerConfig.source.data == "string") ?
+              layerConfig.source.data :
+              JSON.stringify(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: map.getView().getProjection() || 'EPSG:3857' // Assuming the map projection
-          }),
+          })
+
         }),
         // Add this line to apply a generic style to the layer
         style: geoJsonStyleFunction
@@ -255,9 +258,15 @@ export function findLayer(map, name) {
 }
 
 export function setFeatures(map, data, name, clear) {
+
   const layer = findLayer(map, name);
   if (layer) {
     const source = layer.getSource()
+    const reader = (source.getFormat ? source.getFormat() : null) || new GeoJSON({
+      dataProjection: source.get('projection') || 'EPSG:4326', // Assuming the GeoJSON is in WGS 84,
+      featureProjection: map.getView().getProjection() || 'EPSG:3857' // Assuming the map projection
+    })
+
     //Check if there is a undo stack connected to this source, if so clear and disable
     var undos = []
     //Disable all undo stacks
@@ -273,7 +282,6 @@ export function setFeatures(map, data, name, clear) {
       source.clear()
       undos.forEach((c) => { c.clear() })
     }
-    const reader = (source.getFormat ? source.getFormat() : null) || new GeoJSON()
     if (reader && data) {
       //Now add the features based on types
       if (Array.isArray(data)) {