This example uses OpenLayers v10.9.0. The latest is v.
Edit

#### Azure Maps

azure 1 azure-maps 1 bing-maps 1

#####

Example of a Azure Maps layer.

This example renders a tile layer with a source that uses the Azure maps API (former Bing). The Processing API requires a key. The form above can be used to provide YOUR primary key. You can follow this documentation to get your own Azure Maps key: https://learn.microsoft.com/en-us/azure/azure-maps/quick-demo-map-app

##### main.js

    import Map from 'ol/Map.js';
    import View from 'ol/View.js';
    import TileLayer from 'ol/layer/Tile.js';
    import {useGeographic} from 'ol/proj.js';
    import ImageTile from 'ol/source/ImageTile.js';

    useGeographic();

    const someTilesetId = [
      'microsoft.imagery',
      'microsoft.base.road',
      'microsoft.base.darkgrey',
    ];

    const baseUrl =
      'https://atlas.microsoft.com/map/tile?zoom={z}&x={x}&y={y}&tileSize=256&language=EN&&api-version=2.0';

    let subscriptionKey, currentLayer, map;

    document.getElementById('auth-form').addEventListener('submit', (event) => {
      event.preventDefault();
      subscriptionKey = document.getElementById('secret').value.trim();

      map = new Map({
        target: 'map',
        view: new View({
          center: [2.35, 48.85],
          zoom: 12,
        }),
      });
      document.getElementById('auth-interface').style.display = 'none';
      document.getElementById('map-container').style.display = 'block';

      // Add behavior to the tileset buttons
      document.querySelectorAll('.layer-btn').forEach((btn) => {
        btn.addEventListener('click', () => {
          updateLayer(Number(btn.value));
        });
      });

      updateLayer(0);
    });

    function updateLayer(index) {
      currentLayer = new TileLayer({
        source: new ImageTile({
          url: `${baseUrl}&subscription-key=${subscriptionKey}&tilesetId=${someTilesetId[index]}`,
          crossOrigin: 'anonymous',
          attributions: `© ${new Date().getFullYear()} TomTom, Microsoft`,
        }),
      });

      map.addLayer(currentLayer);

      // Remove previous layers after the map has rendered
      map.once('rendercomplete', () => {
        for (const layer of map.getLayers().getArray()) {
          if (layer === currentLayer) {
            break; // Skip the newly added layer
          }
          map.removeLayer(layer);
        }
      });

      // Update state of the tileset buttons
      document.querySelectorAll('.layer-btn').forEach((btn) => {
        btn.classList.toggle('active', btn.value == index);
      });
    }

##### index.html

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>Azure Maps</title>
        <link rel="stylesheet" href="node_modules/ol/ol.css">
        <style>
          .map {
            width: 100%;
            height: 400px;
          }
              #auth-interface {
                background: #f5f5f5;
                padding: 20px;
                border-radius: 8px;
                margin-bottom: 20px;
              }
              #map-container {
                display: none;
                border: 1px solid #ddd;
                border-radius: 8px;
                overflow: hidden;
                box-shadow: 0 2px 10px rgba(0,0,0,0.1);
              }
              #map {
                width: 100%;
                height: 500px;
              }
              .layer-switcher {
                display: flex;
                gap: 10px;
                padding: 15px;
                background: #f9f9f9;
                border-top: 1px solid #eee;
              }
              .layer-btn {
                padding: 8px 15px;
                background: #fff;
                border: 1px solid #ddd;
                border-radius: 4px;
                cursor: pointer;
                transition: all 0.2s;
              }
              .layer-btn:hover {
                background: #f0f0f0;
              }
              .layer-btn.active {
                background: #4CAF50;
                color: white;
                border-color: #4CAF50;
              }
              #auth-form {
                display: flex;
                gap: 10px;
              }
              #secret {
                flex: 1;
                padding: 10px;
                border: 1px solid #ddd;
                border-radius: 4px;
              }
              button[type="submit"] {
                padding: 10px 20px;
                background: #4CAF50;
                color: white;
                border: none;
                border-radius: 4px;
                cursor: pointer;
              }
        </style>
      </head>
      <body>
          <div id="auth-interface">
            <form id="auth-form">
              <input type="text" id="secret" placeholder="Your Azure Maps primary key" required>
              <button type="submit">Ok show the map</button>
            </form>
          </div>

          <div id="map-container">
            <div id="map"></div>
            <div class="layer-switcher">
              <button class="layer-btn active" value="0">Satellite</button>
              <button class="layer-btn" value="1">Roads</button>
              <button class="layer-btn" value="2">Dark</button>
            </div>
          </div>

        <script type="module" src="main.js"></script>
      </body>
    </html>

##### package.json

    {
      "name": "azure-maps",
      "dependencies": {
        "ol": "10.9.0"
      },
      "devDependencies": {
        "vite": "^3.2.3"
      },
      "scripts": {
        "start": "vite",
        "build": "vite build"
      }
    }