Cannot add BingMaps layer dynamically

Question

I'm trying to add a BingMaps layer to an already initialized map. I'm getting an errorwhich I cannot make any sense of. Do you have an idea what's wrong? I'm using OpenLayers 5.3.1.

TypeError: r is null[Weitere Informationen] map.js:1:677385
    •   a http://localhost:8080/map/map.js:1 
    •   inverse http://localhost:8080/map/map.js:1 
    •   I http://localhost:8080/map/map.js:1 
    •   transformInv_ http://localhost:8080/map/map.js:1 
    •   u http://localhost:8080/map/map.js:1 
    •   t http://localhost:8080/map/map.js:1 
    •   getTile http://localhost:8080/map/map.js:1 
    •   manageTilePyramid http://localhost:8080/map/map.js:1 
    •   prepareFrame http://localhost:8080/map/map.js:1 
    •   renderFrame http://localhost:8080/map/map.js:1 
    •   renderFrame_ http://localhost:8080/map/map.js:1 
    •   animationDelay_ http://localhost:8080/map/map.js:1 
    •   <anonym> self-hosted:974

My typescript looks like this:

import Map from 'ol/Map';
import OlTileLayer from 'ol/layer/Tile';
import BingMaps from 'ol/source/BingMaps';

@injectable()
export class MapWrapper {
    private _map: Map;

    public getMap() {
        return this._map;
    }

    set map(value: Map) {
        this._map = value;
    }

    public createBingLayer(bingKey: string, style : string) : OlTileLayer {
        return new OlTileLayer({
            visible: true,
            preload: Infinity,
            source: new BingMaps({
                key: bingKey,
                imagerySet: style
            })
        });
    }
}

And the javascript in my HTML is just this:

    function addBingMap() {
      var realMap = map.mapWrapper.getMap();
      var bingLayer = map.mapHolder.createBingLayer("someAPIKey", "Road");
      //realMap.getLayers().insertAt(0, bingLayer);
      realMap.addLayer(bingLayer);
    }

Update

I figured out that the error I see is caused by BingMaps tiles being reprojected to EPSG:32632, which all my other layers use. The error is thrown in the proj4 transformer() method. I've created a bug ticket for ol, since I think it should at least throw a meaningful error message even in case I can not mix BingMaps (web mercator projection) with layers using another projection.

Mike Mike · Accepted Answer · 2019-04-27T22:07:06

I cannot reproduce the error but since the Bing source authenticates the API key asynchronously before it is ready to use you could try

function addBingMap() {
  var realMap = map.mapWrapper.getMap();
  var bingLayer = map.mapHolder.createBingLayer("someAPIKey", "Road");
  var onKey = bingLayer.getSource().on("change", function() {
    if (bingLayer.getSource().getState() == "ready") {
      ol.Observable.unByKey(onKey);
      realMap.addLayer(bingLayer);
    }
  });
}

Where an impossible transform such as pole to web mercator causes an error which can be ignored:

    var forward = ol.proj.getTransform(projection1, projection2);
    var inverse = ol.proj.getTransform(projection2, projection1);

    ol.proj.addCoordinateTransforms(
        projection1,
        projection2,
        function(coordinate) {
            try {
                return forward(coordinate)
            } catch (e) {
                return [undefined, undefined];
            }
        },
        function(coordinate) {
            try {
                return inverse(coordinate)
            } catch (e) {
                return [undefined, undefined];
            }
        }
    );

Where valid direct transforms fail but can be made to work using an intermediate projection:

    var forward1 = ol.proj.getTransform(projection1, intermediate);
    var forward2 = ol.proj.getTransform(intermediate, projection2);
    var inverse1 = ol.proj.getTransform(projection2, intermediate);
    var inverse2 = ol.proj.getTransform(intermediate, projection1);

    ol.proj.addCoordinateTransforms(
        projection1,
        projection2,
        function(coordinate) {
            try {
                return forward2(forward1(coordinate));
            } catch (e) {
                return [undefined, undefined];
            }
        },
        function(coordinate) {
            try {
                return inverse2(inverse1(coordinate));
            } catch (e) {
                return [undefined, undefined];
            }
        }
    );

Cannot add BingMaps layer dynamically

1 Answers