I have an angular 13 leaflet application that can display OpenStreetMap, google, bing and apple maps. I have a function which uses DomToImage.toPng to generate an image of the currently displayed map. This works as expected with OpenStreetMap, google and bing. However, with apple maps, the maps are rendered as a solid grey. There are no exceptions shown in the console as one might expect from a tainted canvas.
Loading the map:
if ( this.appleMapsApiKey !== 'n/a' ) {
ml.layer = (L as any).mapkitMutant ({
type: 'hybrid', // valid 'type' are 'standard', 'satellite', 'hybrid', 'muted'
authorizationCallback: function(done) {
// console.log ( 'Apple Maps Authorization Callback with ' + outerThis.appleMapsApiKey );
done ( outerThis.appleMapsApiKey );
},
language: 'en',
attribution: '© ' + ml.name,
debugRectangle: false,
opacity: 1,
minzoom: 3,
maxzoom: 23
});
}
Saving the map as a .png
this.swlDataUrl = null;
const node = document.getElementById('map');
if ( node != null ) {
const container = this.map.getContainer();
const options = {
width: container.clientWidth,
height: container.clientHeight
};
try {
const dataUrl = await domToImage.toPng(node, options);
if ( dataUrl != null ) {
this.swlDataUrl = dataUrl;
}
return this.swlDataUrl;
} catch (error) {
console.error('ERROR: swlGetMapViewDomToImageInt error ' + error);
}
} else {
console.error ( 'ERROR: swlGetMapViewDomToImageInt - no document node with id "map"' );
}
Any ideas?