Interaktivní mapa na webu: MapLibre a PMTiles bez serveru

Chcete na web interaktivní mapu s vlastními daty. Nejlevnější a nejmodernější cesta je MapLibre GL JS (open-source fork Mapbox GL) plus podkladová mapa ve formátu PMTiles, což je jeden soubor na obyčejném úložišti. Žádný běžící tile server, žádné měsíční poplatky za dlaždice.

1. Podkladová mapa jako jeden soubor

PMTiles je archiv dlaždic, ze kterého prohlížeč čte přes HTTP jen ty byty, které zrovna potřebuje (range requesty). Hotovou podkladovou mapu (třeba výřez ČR z dat OpenStreetMap) stáhnete z projektu Protomaps, nebo si ji vygenerujete. Soubor pak nahrajete na Cloudflare R2, S3 nebo jakýkoli statický hosting s podporou HTTP Range.

# Vlastni vrstva z GeoJSON -> PMTiles (nastroj tippecanoe)
tippecanoe -o obce.pmtiles -zg --drop-densest-as-needed \
  --extend-zooms-if-still-dropping obce.geojson

2. Mapa v HTML

<link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
<div id="map" style="height:480px"></div>

import maplibregl from 'maplibre-gl';
import * as pmtiles from 'pmtiles';

// registrace pmtiles:// protokolu
const protocol = new pmtiles.Protocol();
maplibregl.addProtocol('pmtiles', protocol.tile);

const map = new maplibregl.Map({
  container: 'map',
  center: [15.47, 49.82], // stred CR (lon, lat)
  zoom: 7,
  style: {
    version: 8,
    glyphs: 'https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf',
    sources: {
      podklad: { type: 'vector', url: 'pmtiles://https://VAS-BUCKET/cz.pmtiles' }
    },
    layers: [
      { id: 'pozadi', type: 'background', paint: { 'background-color': '#f6faf6' } }
      // + vrstvy stylujici zdroj 'podklad'
    ]
  }
});

3. Vlastní data přes GeoJSON

Menší vrstvu (pár set prvků) přidáte přímo jako GeoJSON, nemusíte generovat dlaždice. Nezapomeňte, že GeoJSON je vždy ve WGS84.

map.on('load', () => {
  map.addSource('parcely', { type: 'geojson', data: '/data/parcely.geojson' });
  map.addLayer({
    id: 'parcely-fill', type: 'fill', source: 'parcely',
    paint: { 'fill-color': '#2f8f5b', 'fill-opacity': 0.25 }
  });
  map.addLayer({
    id: 'parcely-line', type: 'line', source: 'parcely',
    paint: { 'line-color': '#1e6b44', 'line-width': 1.2 }
  });
});

Kdy sáhnout po něčem jiném

• Leaflet je lehčí a jednodušší na start, pokud vám stačí rastrové dlaždice a pár značek.
• Chcete jako podklad ortofoto nebo úřední mapu? Napojíte ji přímo přes WMS/WMTS, viz návod o mapových službách.
• Placené alternativy (MapTiler, Mapy.com) dávají smysl, když nechcete řešit vlastní podklad. U Mapy.com hlídejte kredity.