MapLibre-GL

<div id="map" style="width: 100%; height: 450px;"></div>

<link rel="stylesheet" href="npm:maplibre-gl/dist/maplibre-gl.css">

import maplibregl from "npm:maplibre-gl";

const map = new maplibregl.Map({
  container: "map",
  zoom: 12,
  center: [11.39, 47.29],
  pitch: 52,
  hash: true,
  style: {
    version: 8,
    sources: {
      osm: {
        type: "raster",
        tiles: ["https://tile.openstreetmap.org/{z}/{x}/{y}.png"],
        tileSize: 256,
        attribution: "© OpenStreetMap Contributors",
        maxzoom: 19
      }
    },
    layers: [
      {
        id: "osm",
        type: "raster",
        source: "osm"
      }
    ]
  },
  maxZoom: 18,
  maxPitch: 85
});

map.addControl(
  new maplibregl.NavigationControl({
    visualizePitch: true,
    showZoom: true,
    showCompass: true
  })
);

new maplibregl.Marker()
  .setLngLat([11.39, 47.29])
  .addTo(map);