Pro vývojáře

Mapy do vlastního projektu, rychle

Hotové ukázky kódu, které stačí zkopírovat, prompty pro AI vázané na konkrétní český zdroj dat a strojově čitelný katalog, ze kterého si nástroj nebo model stáhne aktuální URL a parametry.

Ukázky kódu

Funkční základ pro nejčastější úlohy. Knihovny se načítají z CDN, takže stačí vložit do HTML a otevřít v prohlížeči.

Leaflet: mapa ČR s podkladem OpenStreetMaphtml

<!doctype html>
<html lang="cs">
<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
  <style> #map { height: 480px; } </style>
</head>
<body>
  <div id="map"></div>
  <script>
    const map = L.map('map').setView([49.82, 15.47], 7); // stred CR
    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '(c) prispevatele OpenStreetMap'
    }).addTo(map);
    L.marker([50.0755, 14.4378]).addTo(map).bindPopup('Praha');
  </script>
</body>
</html>
<!-- Pozn.: oficialni OSM dlazdice jsou jen na vyvoj, ne do produkce. -->

Leaflet: ortofoto ČÚZK jako WMS podkladjs

// Skutecny letecky snimek CR jako podkladova vrstva pres WMS.
// Nazev vrstvy si over pres GetCapabilities dane sluzby.
L.tileLayer.wms(
  'https://geoportal.cuzk.gov.cz/WMS_ORTOFOTO_PUB/WMService.aspx',
  {
    layers: 'GR_ORTFOTORGB',
    format: 'image/png',
    transparent: false,
    attribution: '(c) CUZK'
  }
).addTo(map);

MapLibre GL: interaktivní vektorová mapahtml

<link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
<div id="map" style="height:480px"></div>
<script>
  const map = new maplibregl.Map({
    container: 'map',
    style: 'https://demotiles.maplibre.org/style.json', // funkcni demo styl
    center: [15.47, 49.82],
    zoom: 6
  });
  map.addControl(new maplibregl.NavigationControl());

  // Pro vlastni podklad z PMTiles (viz navod o MapLibre):
  //   const p = new pmtiles.Protocol();
  //   maplibregl.addProtocol('pmtiles', p.tile);
  //   source: { type: 'vector', url: 'pmtiles://https://VAS-BUCKET/cz.pmtiles' }
</script>

Načtení GeoJSON (export z QGIS nebo z WFS)js

// GeoJSON musi byt ve WGS84 (EPSG:4326).
fetch('/data/chranena-uzemi.geojson')
  .then(r => r.json())
  .then(geojson => {
    L.geoJSON(geojson, {
      style: { color: '#2f8f5b', weight: 1, fillOpacity: 0.2 },
      onEachFeature: (f, layer) =>
        layer.bindPopup(f.properties.nazev || 'Bez nazvu')
    }).addTo(map);
  });

Delší výklad (dlaždice, PostGIS, reprojekce) je v sekci Jak na to a v návodech.

Testovací prompty pro AI

Krátká zadání, která dáte modelu (Claude a spol.) a on vytvoří jednoduché demo nad konkrétním českým zdrojem. Zkopírujte, vložte, upravte podle sebe.

Leaflet + ortofoto ČÚZK

Vytvoř jednostránkovou HTML s knihovnou Leaflet z CDN. Zobraz mapu ČR vycentrovanou na lat 49.82, lon 15.47, zoom 7. Jako podklad přidej ortofoto ČÚZK přes WMS: endpoint https://geoportal.cuzk.gov.cz/WMS_ORTOFOTO_PUB/WMService.aspx, vrstva GR_ORTFOTORGB, formát image/png, atribuce (c) ČÚZK. Vše v jednom souboru.

Zdroj: Ortofoto ČR

MapLibre + vlastní podklad

Vytvoř HTML stránku s MapLibre GL JS z CDN, která zobrazí interaktivní mapu se stylem https://demotiles.maplibre.org/style.json vycentrovanou na Česko (lon 15.47, lat 49.82, zoom 6) a ovládacím prvkem zoomu. Přidej zakomentovaný příklad, jak místo demo stylu použít vlastní PMTiles přes protokol pmtiles://.

Zdroj: Podkladové dlaždice

Chráněná území z AOPK

Napiš JavaScript pro Leaflet, který načte chráněná území z ArcGIS REST služby AOPK a vykreslí je jako polygony. Endpoint https://gis.nature.cz/arcgis/rest/services/Aplikace/Opendata/MapServer s parametrem f=geojson. Obarvi polygony zelenou s průhledností 0.2 a přidej popup s názvem území. Data jsou ve WGS84.

Zdroj: Chráněná území (AOPK)

Je bod v záplavovém území?

Mám v PostGIS tabulku zaplavy_q100 se sloupcem geom geometry(MultiPolygon,4326). Napiš SQL dotaz a k němu malý Node.js endpoint (Express), který přijme lat a lon a vrátí JSON s příznakem, jestli bod leží v záplavovém území. Použij ST_Contains a předpokládej prostorový index.

Zdroj: Záplavová území

Demo přímo z katalogu Xmap

Stáhni https://xmap.cz/catalog.json, najdi zdroj podle klíče slug (například 'ortofoto') a z jeho polí services a url vytvoř funkční Leaflet demo v jednom HTML souboru. Vždy respektuj licenci uvedenou u zdroje v poli license_note.

Zdroj: Katalog / NKOD

Katalog jako data

Celý katalog je dostupný strojově na xmap.cz/catalog.json. U každého zdroje najdete aktuální url, download_url, formats, license, crs a pole services s endpointy. Hodí se pro vlastní nástroje i pro to, aby si AI model stáhl přesné URL a nevymýšlel si je.

Formát JSON, jeden soubor, bez klíče a limitů.
Klíč slug je stabilní identifikátor zdroje.
Odkaz page vede na lidsky čitelný detail zdroje na webu.

Chystáme i MCP server, přes který si model katalog prohledá a vytáhne zdroj nebo hotový prompt jako nástroj. Máte na to názor nebo konkrétní potřebu? Napište na [email protected].

Použití catalog.jsonjs

// Aktualni katalog zdroju jako JSON
const res = await fetch('https://xmap.cz/catalog.json');
const catalog = await res.json();

// najdi konkretni zdroj
const ortofoto = catalog.sources.find(s => s.slug === 'ortofoto');
console.log(ortofoto.url, ortofoto.formats, ortofoto.license_label);

// vsechny zdroje s WMS sluzbou
const wms = catalog.sources.filter(s => s.formats.includes('WMS'));