I am trying to add an azure maps layer to my openlayers project. I can make a basic map work using this third party plugin and example with my azure maps key. However when I try to add an additional layer such as OSM or a WMS layer from Geoserver it throws an error in the console: "Uncaught TypeError: ol.source.OSM is not a constructor". I have many different layer types (OSM, WMS, XYZ) that I would like to add alongisde the Azure but I cannot get any of these to work, they are all throwing similar error.

Any ideas how to add other layers alongside Azure maps in Openlayers?

Relevant code snippet:

    <!-- Add reference to the Azure Maps OpenLayers plugin.-->
<script src="./js/azure-maps-openlayers.js"></script>

<script type='text/javascript'>
    var map;
    function GetMap() {

        //Add authentication details for connecting to Azure Maps.
        var authOptions = {
            authType: 'subscriptionKey',
            subscriptionKey: 'aaaaaaaabbbbbbbbccccccccddddddddd'
        };

        //Create a map instance.
        map = new ol.Map({
            target: 'myMap',
            layers: [
                new ol.layer.Tile({
                    type: 'base',
                    visible: true,  
                    source: new ol.source.AzureMaps({
                        authOptions: authOptions,
                        tilesetId: 'microsoft.imagery'
                    })
                }),
                new ol.layer.Tile({
                    type: 'overlay',
                    visible: false, 
                    source: new ol.source.OSM()
                })
            ],
            view: new ol.View({
                center: [0, 0],
                zoom: 2
            })
        });
    }
</script>

CodePudding user response：

I have done some research but I didn't found any scenario or document which suggests how can we integrate OSM layer with the Azure Maps in OpenLayers.

If you check this Azure Maps Class, you will understand why are you getting the error.

Namespace: ol.source

A tile source that connects to the Azure Maps Render V2 services.

Contstructor AzureMaps(options?: AzureMapsTileSourceOptions)

But if you want to integrate WSM layer with Azure Maps then you can achieve it by adding the OGC web-mapping service with Azure Maps as shown in the following code snippet.

//Initialize a map instance.
var map = new atlas.Map('map', {
  view: "Auto",
  //Add your Azure Maps subscription client ID to the map SDK. Get an Azure Maps client ID at https://azure.com/maps
  authOptions: {
    authType: "anonymous",
    clientId: "04ec075f-3827-4aed-9975-d56301a2d663", //Your AAD client id for accessing your Azure Maps account

    getToken: function (resolve, reject, map) {
      //URL to your authentication service that retrieves an Azure Active Directory Token.
      var tokenServiceUrl = "https://azuremapscodesamples.azurewebsites.net/Common/TokenService.ashx";

      fetch(tokenServiceUrl).then(r => r.text()).then(token => resolve(token));
    }
  }
});

//Wait until the map resources are ready.
map.events.add('ready', function () {

  map.layers.add(new atlas.layer.TileLayer({
    tileUrl: 'https://mrdata.usgs.gov/services/gscworld?FORMAT=image/png&HEIGHT=1024&LAYERS=geology&REQUEST=GetMap&STYLES=default&TILED=true&TRANSPARENT=true&WIDTH=1024&VERSION=1.3.0&SERVICE=WMS&CRS=EPSG:3857&BBOX={bbox-epsg-3857}',
    tileSize: 1024
  }), 'transit');
});

For more information check this Add a tile layer Microsoft document.

If you want to work on Azure Maps with OpenLayers, then I would suggest you to Azure Maps OpenLayers plugin. OpenLayers plugin makes it easy to overlay tile layers from the Azure Maps tile services. You can only use the Azure Maps tile layers as shown in the example below.

//Create a map instance.
 map = new ol.Map({ 
     target: 'myMap', 
     layers: [
          new ol.layer.Tile({ 
              source: new ol.source.AzureMaps({ 
                  authOptions: authOptions, 
                  tilesetId: 'microsoft.imagery' 
              }) 
        }),
        new ol.layer.Tile({
            source: new ol.source.AzureMaps({
                authOptions: authOptions,
                tilesetId: 'microsoft.base.road'
            })
        }) 
    ], 
    view: new ol.View({ 
        center: [0, 0], 
        zoom: 2 
    }) 
});

I would strongly suggest to read this Azure Maps OpenLayers plugin document completely and also check this Azure-Samples/AzureMapsCodeSamples GitHub code sample for more information.

CodePudding user response：

Ok, I've managed to get this to work via the following code. It's actually posted on the Azure Maps Openlayers plugin page right at the bottom - "Alternative Option for OpenLayers". Ironically the plugin is not needed at all in order to get it to work - you just reference the Azure Maps layer as an ol.source.XYZ layer. Obviously you can change the visibility options of both layers in order to visualise them - or add them into a layer switcher.

        var map;
    function GetMap() {

        var subscriptionKey = 'my_subscription_key_goes_here';
        var tilesetId = 'microsoft.imagery';
        var language = 'EN';
        var view = new ol.View({
                center: [0, 0],
                zoom: 2
            });

        //Create a map instance.
        map = new ol.Map({
            target: 'myMap',
            layers: [
                new ol.layer.Tile({
                    type: 'base',
                    visible: true,                  
                    source: new ol.source.XYZ({
                        url: `https://atlas.microsoft.com/map/tile?subscription-key=${subscriptionKey}&api-version=2.0&tilesetId=${tilesetId}&zoom={z}&x={x}&y={y}&tileSize=256&language=${language}`,
                        attributions: `© ${new Date().getFullYear()} TomTom, Microsoft`
                    })
                }),
                new ol.layer.Tile({
                    type: 'overlay',
                    visible: true,  
                    source: new ol.source.OSM()
                })
            ],
            view: view
        });
    }