Zum Inhalt springen
pixel.map Dokumentation

Beispielanwendung

Einbindung in Webanwendungen mit MapLibre GL JS

Um den Map Server von pixel.map in einer Webanwendung mit MapLibre GL JS zu integrieren und die Authentifizierung über den Authorization Header zu implementieren, kannst du das folgende Codebeispiel verwenden:

const map = new maplibregl.Map({
  container: 'map', // ID des HTML-Elements für die Karte
  style: 'https://tiles.pixelmap.at/styles/basic.json',
  center: [14.3050, 46.6249], // Längengrad, Breitengrad (Klagenfurt am Wörthersee)
  zoom: 12, // Zoomstufe
  transformRequest: (url, resourceType) => {
    if (url.startsWith("https://tiles.pixelmap.at")) {
      return {
        url: url,
        headers: {
          Authorization: "Bearer YOUR_API_TOKEN", // Ersetze durch deinen Token
        }
      };
    }
  }
});

Erläuterungen:

  • container: Die ID des HTML-Elements, in dem die Karte gerendert wird.
  • style: Die URL zum Kartenstil. Hier kannst du auch eigene Styles verwenden.
  • center: Startkoordinaten der Karte (Klagenfurt am Wörthersee).
  • zoom: Anfangs-Zoomstufe.
  • transformRequest: Eine Funktion, die jede ausgehende Anfrage abfängt und modifiziert, um den Authorization Header hinzuzufügen.

Vollständiges HTML-Beispiel:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>pixel.map mit MapLibre GL JS</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- MapLibre GL JS CSS -->
  <link href="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css" rel="stylesheet" />
  <style>
    #map { position: absolute; top: 0; bottom: 0; width: 100%; }
  </style>
</head>
<body>
  <div id="map"></div>
  <!-- MapLibre GL JS -->
  <script src="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js"></script>
  <script>
    const map = new maplibregl.Map({
      container: 'map',
      style: 'https://tiles.pixelmap.at/styles/basic.json',
      center: [14.3050, 46.6249], // Klagenfurt am Wörthersee
      zoom: 12,
      transformRequest: (url, resourceType) => {
        if (url.startsWith("https://tiles.pixelmap.at")) {
          return {
            url: url,
            headers: {
              Authorization: "Bearer YOUR_API_TOKEN",
            }
          };
        }
      }
    });
  </script>
</body>
</html>

Wichtig:

  • Sicherheit: Bewahre deinen API-Token sicher auf und teile ihn nicht öffentlich. In Produktionsumgebungen solltest du Mechanismen implementieren, um den Token auf dem Server zu schützen.
  • CORS-Unterstützung: Der Map Server unterstützt Cross-Origin Resource Sharing (CORS), sodass Ressourcen problemlos von anderen Domains aus angefragt werden können.

Alternative mit URL-Parameter:

Falls du die Authentifizierung über den URL-Parameter token bevorzugst, kannst du den Stil-Link entsprechend anpassen:

const map = new maplibregl.Map({
  container: 'map',
  style: 'https://tiles.pixelmap.at/styles/basic.json?token=YOUR_API_TOKEN',
});

Hinweis: Die Verwendung des URL-Parameters kann Sicherheitsrisiken bergen, da der Token in der URL sichtbar ist. Die Verwendung des Authorization Headers wird empfohlen.