fix: selectable layer assigned and cursor Style

Author: yharby

src/i18n/comps/locales/enObj.tsx

@@ -9,6 +9,7 @@ export const enObj: I18nObjects = {
       "minZoom": 0,
       "maxZoom": 22,
       "visible": true,
+      "selectable": true,
       "source": {
         "peojection": "EPSG:4326",
         "data": {
@@ -282,6 +283,7 @@ export const enObj: I18nObjects = {
       maxZoom: 22,
       visible: true,
       opacity: 1,
+      selectable: false,
       source: {
         url: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
         projection: "EPSG:3857",

src/vendors/Geo.jsx

@@ -554,12 +554,25 @@ function Geo(props) {
 
       // Optional: pointer move logic for changing cursor over WMS layers
       olMap.on('pointermove', function (evt) {
-        if (evt.dragging) return;
+        if (evt.dragging) return; // skip if the map is being dragged
+
+        var cursorStyle = 'default'; // Default cursor style
         const pixel = olMap.getEventPixel(evt.originalEvent);
-        const hit = olMap.hasFeatureAtPixel(pixel);
-        olMap.getTargetElement().style.cursor = hit ? 'pointer' : '';
+
+        // Check for features at the current pointer position
+        olMap.forEachFeatureAtPixel(pixel, function (feature, layer) {
+          // If a layer is found and its selectable property is not false
+          if (layer && layer.get('selectable') !== false) {
+            cursorStyle = 'pointer'; // Change the cursor to pointer
+            return true; // Stop iterating through the features
+          }
+        });
+
+        // Apply the determined cursor style to the map target element
+        olMap.getTargetElement().style.cursor = cursorStyle;
       });
 
+
       //Handle the loaded event
       olMap.on('loadend', function (event) {
         fireEvent('map:loaded', event)

src/vendors/helpers/Layers.js

@@ -31,6 +31,7 @@ export function createLayer(layerConfig) {
         maxZoom: layerConfig.maxZoom,
         visible: layerConfig.visible,
         opacity: layerConfig.opacity,
+        selectable: layerConfig.selectable,
         source: new VectorTileSource({
           attributions: layerConfig.attributions,
           format: new MVT(),
@@ -44,6 +45,7 @@ export function createLayer(layerConfig) {
         maxZoom: layerConfig.maxZoom,
         visible: layerConfig.visible,
         opacity: layerConfig.opacity,
+        selectable: layerConfig.selectable,
         source: new TileWMS({
           url: layerConfig.source.url,
           params: layerConfig.source.params,
@@ -58,6 +60,7 @@ export function createLayer(layerConfig) {
         maxZoom: layerConfig.maxZoom,
         visible: layerConfig.visible,
         opacity: layerConfig.opacity,
+        selectable: layerConfig.selectable,
         source: new VectorSource({
           format: new GeoJSON(),
           url: layerConfig.source.url,
@@ -70,6 +73,7 @@ export function createLayer(layerConfig) {
         maxZoom: layerConfig.maxZoom,
         visible: layerConfig.visible,
         opacity: layerConfig.opacity,
+        selectable: layerConfig.selectable,
         source: new XYZ({
           url: layerConfig.source.url,
         }),
@@ -81,6 +85,7 @@ export function createLayer(layerConfig) {
         maxZoom: layerConfig.maxZoom,
         visible: layerConfig.visible,
         opacity: layerConfig.opacity,
+        selectable: layerConfig.selectable,
         source: new VectorSource({
           features: new GeoJSON().readFeatures(layerConfig.source.data, {
             // Ensure the features are read with the correct projection
@@ -99,6 +104,7 @@ export function createLayer(layerConfig) {
         maxZoom: layerConfig.maxZoom,
         visible: layerConfig.visible,
         opacity: layerConfig.opacity,
+        selectable: layerConfig.selectable,
         source: new GeoTIFF({
           sources: [
             {
@@ -124,6 +130,7 @@ export function createLayer(layerConfig) {
         maxZoom: layerConfig.maxZoom,
         visible: layerConfig.visible,
         opacity: layerConfig.opacity,
+        selectable: layerConfig.selectable,
         source: new VectorTileSource({
           projection: layerConfig.source?.projection,
         }),