CODEWITHSUNDEEP
javascriptcorsmapscross-domainopenlayers
Liran Perkins
Liran Perkins

Reputation: 47

Openlayers 2 + HERE tiles caching

I need to create an offline maps demo on a windows machine and the only option to do that is by using tile caching, I am using Openlayers 2, when I initialize an OSM layer everything works as expected:

map = new OpenLayers.Map({
    layers: [
        new OpenLayers.Layer.OSM("OpenStreetMap (CORS)", null, {
            eventListeners: {
                tileloaded: updateStatus,
                loadend: detect
        }})
    ]
}

The "detect" method is called and checking if the function getCanvasContext() can be called for a tile and everything works great! When I replace the OSM with HERE maps using XYZ layer, it stops working:

var urlTpl = 'https://1.{base}.maps.cit.api.here.com' + '/{type}/2.1/maptile/newest/{scheme}/${z}/${x}/${y}/256/png' + '?app_id=?????&app_code=??????';

var hereLayer = {
  base: 'base',
  type: 'maptile',
  scheme: 'normal.day',
  app_id: platform['app_id'],
  app_code: platform['app_code']
};

map = new OpenLayers.Map({
    layers: [
        new OpenLayers.Layer.XYZ("HERE", [createUrl(urlTpl, hereLayer)], {
        eventListeners: {
                tileloaded: updateStatus,
                loadend: detect
            }
        })
    ]
}

In this example the detect method does being called but this time the function getCanvasContext() throws an exception:

code: 18
message: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
name: SecurityError

What can I do?

Upvotes: 0

Views: 408

Answers (1)

Mike
Mike

Reputation: 17962

From an answer in https://gis.stackexchange.com/questions/71715/enabling-cors-in-openlayers: you will need to include a tileOptions setting in the layers options to enable CORS:

map = new OpenLayers.Map({
    layers: [
    new OpenLayers.Layer.XYZ("HERE", [createUrl(urlTpl, hereLayer)], {
    tileOptions: {crossOriginKeyword: 'anonymous'},
    eventListeners: {
        tileloaded: updateStatus,
        loadend: detect
        }
    })
    ]
}

Upvotes: 1

Related Questions