0

leaflet with mapkitmutant and apple mapkit domToImage generates an all-grey image

This works as expected with openstreet, google maps and bing maps. The onscreen display is okay, just the domToImage output is all grey.

To add the map to leaflet:

} else if ( ml.name === 'Apple Maps') {
  if ( this.appleMapsApiKey !== 'n/a' ) {
    ml.layer = (L as any).mapkitMutant ({
      type: 'hybrid', // valid 'type' are 'standard', 'satellite' and 'hybrid'
      authorizationCallback: function(done) {
        console.log ( 'Apple Maps Authorization Callback with ' + outerThis.appleMapsApiKey );
        done ( outerThis.appleMapsApiKey  );
      },
      language: 'en',
      debugRectangle: false,
      attribution: '© ' + ml.name
    });
  }

To create the .png from the map:

const node = document.getElementById('map');
if ( node != null ) {
const container = this.map.getContainer();
const options = {
  width: container.clientWidth,
  height: container.clientHeight
};
try {
    console.log ( 'swlGetMapViewDomToImageInt dimensions are: ' + JSON.stringify ( options ) );
    const dataUrl = await domToImage.toPng(node, options);
    if ( dataUrl != null ) {
      this.swlDataUrl = dataUrl;
      console.log ( 'swlGetMapViewDomToImageInt url is' + dataUrl );
    }
    return this.swlDataUrl;
  } catch (error) {
    console.error('ERROR: swlGetMapViewDomToImageInt error ' + error);
  }
} else {
  console.error ( 'ERROR: swlGetMapViewDomToImageInt - no document node with id "map"' );
}
Werner Reiche
  • 31
  • 4

1 Answers1

0

The usual reason for not being able to programatically access image data from a <canvas> is tainting - do read https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image . You should be getting a warning about this in your browser's console.

In a nutshell, any and all of the data used to render a <canvas> must have appropriate CORS.

Note that MapkitMutant relies on the <canvas> created by the underlying MapKitJS library.

Since the graphical resources (icon images, raster tiles, etc) come from Apple's webservers, and you have no ability to configure CORS in those servers, there's nothing you can do about it.

IvanSanchez
  • 18,272
  • 3
  • 30
  • 45
  • I'm not getting any warnings in the browser console related to this. – Werner Reiche May 11 '23 at 17:41
  • I'm not getting any warnings in the browser console related to this. When I look at the request/response headers, I see the following in the headers but don't know what to make of it. Request: Sec-Fetch-Mode: cors Sec-Fetch-Site: cross-site Response: Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept Access-Control-Allow-Origin:* – Werner Reiche May 11 '23 at 17:48