Add crossOrigin option to raster layer types

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Add snapshot control to download and print map. #202
+- Add crossOrigin option to raster layer types. #204
 
 ## [v2.3.0] - 2024-05-07
 

README.md

@@ -180,7 +180,8 @@ const wmsOpts = {
     VERSION: '1.1.1',
   },
   visible: true, // defaults to true
-  base: false // defaults to false
+  base: false, // defaults to false
+  crossOrigin: null, // defaults to null
 };
 const wmsLayer = myMap.addLayer('wms', wmsOpts);
 
@@ -189,7 +190,8 @@ const arcGISTileOpts = {
   title: 'StateCityHighway_USA', // defaults to 'arcgis-tile'
   url: 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer', // REQUIRED!
   visible: true, // defaults to true
-  base: false // defaults to false
+  base: false, // defaults to false
+  crossOrigin: null, // defaults to null
 };
 const arcGISTileLayer = myMap.addLayer('arcgis-tile', arcGISTileOpts);
 
@@ -198,7 +200,8 @@ const xyzOpts = {
   title: 'mapbox', // defaults to 'xyz'
   url: 'https://api.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.png?access_token=[APIKEY]', // REQUIRED!
   visible: true, // defaults to true
-  base: false // defaults to false
+  base: false, // defaults to false
+  crossOrigin: null, // defaults to null
 };
 const xyzLayer = myMap.addLayer('xyz', xyzOpts);
 
@@ -221,6 +224,13 @@ const clusterLayer = myMap.addLayer('cluster', clusterOpts);
 
 The method returns a reference to the newly created layer for later use.
 
+All raster layer types have an optional `crossOrigin` option that sets the
+`crossorigin` attribute for loaded images. You must provide a `crossOrigin`
+value if you want to allow access to pixel data with the canvas renderer.
+This is required for the `snapshot` behavior to save images from the canvas.
+See https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image
+for more detail.
+
 #### Layer groups
 
 Layers can optionally be placed inside layer groups. Simply provide a `group`

src/instance/methods/layer.js

@@ -105,13 +105,14 @@ function addGeoJSONLayer({
 
 // Add a Tile ArcGIS MapServer layer to the map.
 function addTileArcGISMapServerLayer({
-  title = 'arcgis-tile', url, params, visible = true, base = false, attribution = '',
+  title = 'arcgis-tile', url, params, visible = true, base = false, attribution = '', crossOrigin = null,
 }) {
   const attributions = [attribution];
   const source = new TileArcGISRest({
     url,
     params,
     attributions,
+    crossOrigin,
   });
   const layer = new TileLayer({
     title,
@@ -146,13 +147,14 @@ function addWKTLayer({
 
 // Add a WMS tile layer to the map.
 function addWMSTileLayer({
-  title = 'wms', url, params, visible = true, base = false, attribution = '',
+  title = 'wms', url, params, visible = true, base = false, attribution = '', crossOrigin = null,
 }) {
   const attributions = [attribution];
   const source = new TileWMS({
     url,
     params,
     attributions,
+    crossOrigin,
   });
   const layer = new TileLayer({
     title,
@@ -165,13 +167,14 @@ function addWMSTileLayer({
 
 // Add an XYZ tile layer to the map.
 function addXYZTileLayer({
-  title = 'xyz', url, tileSize = 256, visible = true, base = false, attribution = '',
+  title = 'xyz', url, tileSize = 256, visible = true, base = false, attribution = '', crossOrigin = null,
 }) {
   const attributions = [attribution];
   const source = new XYZ({
     url,
     tileSize,
     attributions,
+    crossOrigin,
   });
   const layer = new TileLayer({
     title,