v2-wmts -> v3-wms

main.js

@@ -4,9 +4,11 @@ import OSM from "ol/source/OSM.js";
 import projectionBNG from "./projection";
 import TileLayer from "ol/layer/Tile";
 import getWMTSLayer from "./wmts";
+import getWMSLayer from "./wms";
 
 // Create layer from imported functions
 const mastermapWMTS = await getWMTSLayer("os_licensed_background_colour");
+const woodlandWMS = getWMSLayer("sf_nwss");
 
 // Set up a new Tile Layer
 const openStreetMap = new TileLayer({
@@ -21,6 +23,7 @@ const map = new Map({
   layers: [
     // openStreetMap,
     mastermapWMTS,
+    woodlandWMS,
   ],
   // A View object represents a simple 2D view of the map.
   // This is the object to act upon to change the center, resolution, and rotation of the map

wms.js

@@ -0,0 +1,26 @@
+import ImageLayer from 'ol/layer/Image';
+import ImageWMS from 'ol/source/ImageWMS';
+
+// Helper function to get a WMS layer from theMapCloud
+const getWMSLayer = (layerName) => {
+  // Define the source of the WMS layer
+  const wmsSource = new ImageWMS({
+    url: "https://api.themapcloud.com/maps/wms",
+    params: {
+      layers: layerName,
+      token: import.meta.env.VITE_TMC_TOKEN,
+    }
+  })
+  // Create the WMS layer
+  const wmsLayer = new ImageLayer({
+    source: wmsSource,
+    opacity: 0.6,
+    // Assigning layerName here is not mandatory, but will help us reference this layer later
+    properties: {
+      layerName: layerName
+    }
+  });
+  return wmsLayer;
+}
+
+export default getWMSLayer;