Vector Tile API

Pokud jste se rozhodli použít vektorové dlaždice ve svých mapových projektech, pak jste na správném místě. Zde se dozvíte, jak snadno implementovat vektorové dlaždice pomocí nejpopulárnějších knihoven jako Maplibre a OpenLayers.

Styly

S naší službou vektorových dlaždic máte možnost vybrat si styly připravené pro různé případy použití, a tím výrazně zlepšit vizuální atraktivitu a také uživatelský zážitek vašich uživatelů.

V tabulce níže je aktuální seznam stylů a jejich IDs.

Jméno stylu	ID stylu
CZE základní	cze-basic
CZE utlumený	cze-faded
CZE černobílý	cze-grayscale
CZE-SVK základní	cze-svk-basic

Typy stylu

style-xyz
- Využívá vektorové dlaždice xyz ve formátu .pbf

URL stylu

Konstrukce URL stylu vypadá následovně:


https://api.ceda.cz/vmt/styles/{id-stylu}/{typ-stylu}?token={váš token}

Atributace

Atributace je informace o autorských právech, která musí být uvedena na každé mapě používající mapové styly a data od CEDA Maps a.s.. Obvykle se nachází v pravém dolním rohu mapy (viz. obrázek). Pro některé mapové knihovny je nutné přidat atributaci ručně. Níže naleznete návody, jak na to.

Pro OpenLayers


var layer = new ol.layer.Tile({
  source: new ol.source.TileJSON({
    attributions: [new ol.Attribution({
      html: "<a href="https://www.ceda.cz/" target="_blank" title="CEDA" aria-label="CEDA" role="listitem">&copy; 2023  <img style="top: 2px; position: relative;" height="14px" src="https://www.ceda.cz/fileadmin/themes/default/img/logo/CEDA_Logo_zakladni_varianta.svg"></a>  <a href="https://www.ceda.cz/licencni-podminky/copyright-ceda" target="_blank">Zdroje dat: CEDA, TomTom, ČUZK, OpenStreetMap</a>"
    })]
  })
});

Pro Leaflet


var attribution = L.control.attribution().addTo(map);
attribution.addAttribution('<a href="https://www.ceda.cz/" target="_blank" title="CEDA" aria-label="CEDA" role="listitem">© 2023  <img style="top: 2px; position: relative;" height="14px" src="https://www.ceda.cz/fileadmin/themes/default/img/logo/CEDA_Logo_zakladni_varianta.svg"></a>  <a href="https://www.ceda.cz/licencni-podminky/copyright-ceda" target="_blank">Zdroje dat: CEDA, TomTom, ČUZK, OpenStreetMap</a>');

Vykreslování mapy v Maplibre GL

Vykreslování map pomocí Maplibre GL knihovny poskytuje snadnou a efektivní možnost pro tvorbu interaktivních map. Tuto knihovnu lze snadno implementovat do projektů a využít tak jejích funkcí pro tvorbu atraktivních a funkčních map.

Ukázka implementace dlaždic xyz


<html>

<head>
    <script src='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js'></script>
    <link href='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css' rel='stylesheet' />
    <style>
        #map {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>

        var map = new maplibregl.Map({
            container: 'map',
            style: 'https://api.ceda.cz/vmt/styles/cze-svk-basic/style-xyz?token=VAS_TOKEN',
            center: [14.25, 50.1],
            zoom: 12
        });

    </script>
</body>

</html>

Vykreslování mapy v OpenLayers

Použití OpenLayers pro zobrazení vektorových mapových dat.

Ukázka implementace

1) Ukázka kódu Javascriptu pro vytvoření jednoduché mapy


import 'ol/ol.css';
import FullScreen from 'ol/control/FullScreen';
import olms from 'ol-mapbox-style';

olms(
  'map',
  'https://api.ceda.cz/vmt/styles/cze-svk-basic/style-xyz?token=VAS_TOKEN'
).then(function (map) {
  map.addControl(new FullScreen());
});

2) Ukázka kódu pro index.html soubor


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Vector tiles created from a Mapbox Style object</title>
    <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
    <script src="https://unpkg.com/elm-pep@1.0.6/dist/elm-pep.js"></script>
    <!-- The lines below are only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,TextDecoder"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/3.18.3/minified.js"></script>
    <style>
      .map {
        width: 100%;
        height:400px;
      }
      .map .ol-rotate {
        left: .5em;
        bottom: .5em;
        top: auto;
        right: auto;
      }
      .map:-webkit-full-screen {
        height: 100%;
        margin: 0;
      }
      .map:-ms-fullscreen {
        height: 100%;
      }
      .map:fullscreen {
        height: 100%;
      }    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script src="main.js"></script>
  </body>
</html>

3) Ukázka souboru package.json


{
  "name": "project-name",
  "dependencies": {
    "ol": "7.2.2",
    "ol-mapbox-style": "^9.2.0"
  },
  "devDependencies": {
    "vite": "^3.2.3"
  },
  "scripts": {
    "start": "vite",
    "build": "vite build"
  }
}

Vykreslování mapy v Leafletu

Pro knihovnu Leaflet je nutné použít plugin leaflet-maplibre-gl.js, případně plugin leaflet-mapbox-gl.js.


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.2/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.9.2/dist/leaflet.js"></script>
  
  <!-- Add maplibre-gl-js -->
  <link href='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css' rel='stylesheet' />
  <script src='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js'></script>
  
  <!-- Add maplibre-gl-leaflet -->
  <script src="https://unpkg.com/@maplibre/maplibre-gl-leaflet@0.0.17/leaflet-maplibre-gl.js"></script>
  <style>
    html, body, #map {
      width: 100%;
      height: 100%;
      margin: 0;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    const map = L.map('map').setView([49.8025412, 15.4907228], 8);
    // Don't forget to replace <token> by your real access token!
    var gl = L.maplibreGL({
      style: 'https://api.ceda.cz/vmt/styles/cze-svk-basic-sync/style-xyz?token=<token>'
    }).addTo(map);
  </script>
</body>
</html>