Azure Maps

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.6.1"
  },
  "devDependencies": {
    "vite": "^3.2.3"
  },
  "scripts": {
    "start": "vite",
    "build": "vite build"
  }
}