Azure Maps with OSM / WMS / other layers in OpenLayers

Question

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>

Answer 1

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
        });
    }