Veröffentlichen¶

HTTPS

Ihr könnt euren Kartendienst einfach über HTTPS veröffentlichen.

HTTPS ist auch für HTTP/2 erforderlich, wodurch die Kartenanzeige auch schneller wird, da dann mehr Anfragen auf einmal möglich sind.

CORS

Cross-Origin Resource Sharing schränkt die Websites ein, die eure gehosteten Ressourcen einbetten dürfen.

Warnung

Vermeidet Wildcards * für Access-Control-Allow-Origin im produktiven Einsatz.

Karten-Ressourcen

Auch wenn eure PMTiles-Archive oder Kachelendpunkte aus eurer eigenen Infrastruktur stammen, können andere Ressourcen auf einer Webkarte von externen Anbietern stammen. Dazu gehören JavaScript-Bibliotheken, CSS-Stylesheets und Schriften.

Content Security Policy

Durch die Festlegung einer Content Security Policy über einen HTTP-Header oder ein HTML-Meta-Tag könnt ihr sicherstellen, dass alle Ressourcen der HTML-Seite aus derselben Quelle stammen, z.B. für MapLibre:

<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self' 'nonce-n0nce' 'nonce-n0nce1'; worker-src blob: ; child-src blob: ; img-src data: blob: ;" />

Beispiel¶

Nachfolgend findet ihr ein vollständiges Beispiel für eine Kartenanwendung, bei der Quellen von Dritten vermieden werden:

<html>
    <head>
        <meta charset="utf-8"/>
        <meta
          http-equiv="Content-Security-Policy"
          content="default-src 'self' 'nonce-n0nce' 'nonce-n0nce1'; worker-src blob: ; child-src blob: ; img-src data: blob: ;" />
        <link rel="stylesheet" href="maplibre-gl.css">
        <script src="maplibre-gl.js"></script>
        <script src="pmtiles.js"></script>
        <script src="basemaps.js"></script>
    </head>
    <body>
        <div id="map" style="height: 100%; width: 100%"></div>
        <script type="text/javascript">
            let protocol = new pmtiles.Protocol();
            maplibregl.addProtocol("pmtiles", protocol.tile);
            maplibregl.setRTLTextPlugin(
              "mapbox-gl-rtl-text.min.js",
              true,
            );
            const map = new maplibregl.Map({
              container: "map",
              zoom: 12,
              center: [13.424233,52.534675],
              style: {
                glyphs: "fonts/{fontstack}/{range}.pbf",
                sprite: "sprites/v4/light",
                version: 8,
                sources: {
                  protomaps: {
                    type: "vector",
                    url: "pmtiles://berlin.pmtiles",
                    attribution: '© <a href="https://openstreetmap.org">OpenStreetMap</a>'
                  },
                },
                layers: basemaps.layers("protomaps", basemaps.namedFlavor("light"), {lang: "en"})
              },
            });
        </script>
    </body>
</html>

Zeilen 7–10

maplibre-gl.js und maplibre-gl.css sind JavaScript und CSS für die MapLibre GL-Rendering-Bibliothek.

pmtiles.js ist eine JavaScript-Datei zum Dekodieren von PMTiles-Archiven im Browser.

basemaps.js ist eine JavaScript-Datei zum Erstellen eines MapLibre GL-Stils für ein Basiskarten-Kachelset.

Zeile 18

mapbox-gl-rtl-text.min. js ist ein MapLibre-Plugin für die Unterstützung von Sprachen, die von rechts nach links geschrieben werden.

Zeilen 26–27

fonts/fontstack/range.pbf sind Schriftglyphen für die Darstellung von Labels, verfügbar unter protomaps/basemaps-assets.

sprites/version/{flavor_name sind Sprites für Basemap-Icons, verfügbar unter protomaps/basemaps-assets.

Zeile 32

pmtiles://berlin.pmtiles ist die Archivdatei mit den Kartendaten.

Cloud-Speicher¶

PMTiles funktioniert auf jeder S3-kompatiblen Cloud-Speicherplattform, die HTTP Range Requests und Cross-Origin Resource Sharing (CORS) unterstützt.

Upload¶

Das Kommandozeilentool pmtiles verfügt über den Befehl pmtiles upload, um Dateien in einen Cloud-Speicher zu übertragen. RClone ist ein weiteres Tool für die Verwaltung großer Dateien auf S3-kompatiblem Speicher:

rclone copyto FILENAME CONFIGURATION:BUCKET/FOLDER/FILENAME.pmtiles --progress --s3-chunk-size=256M

Siehe auch

Recommended Platforms

Web-Server¶

Caddy¶

Caddy ist wegen seiner eingebauten HTTPS-Unterstützung sehr empfehlenswert für die Bereitstellung von PMTiles. Verwendet die file_server-Konfiguration, um *.pmtiles aus einem statischen Verzeichnis mit folgender CORS-Konfiguration bereitzustellen:

header {
  Access-Control-Allow-Methods GET,HEAD
  Access-Control-Expose-Headers ETag
  Access-Control-Allow-Headers Range,If-Match
  Access-Control-Allow-Origin https://www.cusy.io
}

Als Alternative könnt ihr das pmtiles_proxy-Plugin für Caddy verwenden.

Siehe auch

Protomaps Docs: Set up a Server: Caddy

nginx¶

nginx unterstützt HTTP Range Requests, wobei die CORS-Header und die Unterstützung für CORS Preflight-Anfragen in der Konfigurationsdatei gesetzt werden sollten:

if ($request_method = 'OPTIONS') {
  add_header 'Access-Control-Max-Age' 3600;
  add_header 'Content-Type' 'text/plain charset=UTF-8';
  add_header 'Access-Control-Allow-Origin' '*' always;
  add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range' always;
  add_header 'Content-Length' 0;
  return 204;
}