BGT Vector Tiles in Mapbox

Heeft iemand mogelijk een voorbeeld van hoe de BGT Vector Tiles (OGC API) 1.0 in Mapbox te gebruiken is? Het zal wel heel eenvoudig zijn maar het lukt mij niet.

Alvast erg bedankt,

Jeroen

Helpt dit?

1 like

Hoi Just_OsGeo,

Dank je voor het antwoord. Dat helpt zeker.

<html>

<head>
    <title>Home</title>

    <script src='https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css' rel='stylesheet' />

</head>
<body>

    <div id='map' style='width: 100%; height: 100%;'></div>
    <script>
        mapboxgl.accessToken = 'api-key';
        var map = new mapboxgl.Map({
            container: 'map',
            style: 'https://api.pdok.nl/lv/bgt/ogc/v1_0/styles/bgt_achtergrondvisualisatie__webmercatorquad?f=mapbox', // kies een standaard Mapbox-stijl
            center: [5.1530, 51.4], // centrum van Nederland
            zoom: 17 // zoomniveau
        });
    
        console.log(map)
    </script>
</body>

</html>

Heel eenvoudig uiteindelijk :slight_smile:

Het probleem is was dat de stradaardvisualisatie niet correct is. Die geeft een error. Gelukkig probeerde ik ook de achtergrondvisualisatie en die doet het wel.

image

Jeroen

1 like

De foutmelding over de invalide standaardvisualisatie gaan we (PDOK) oplossen. We geven een update als het zover is.

De visualisaties zijn geĂĽpdatet, als het goed is moet de standaardvisualisatie nu ook gebruikt kunnen worden in Mapbox.

Ter informatie: de tiles werken naast Mapbox ook met MapLibre. MapLibre is een fork van Mapbox met een vrijere licentie. Zie Mapbox GL JS licentie en MapLibre GL JS licentie.

2 likes

Bedankt voor het beschikbaar stellen van webmercator.

Het zou ook fijn zijn als zoom lagen +/- 12-16 beschikbaar gesteld kunnen worden voor de BGT en BAG, nu zijn de lagen pas zichtbaar op wijk niveau. Een hoger zoomniveau (18, 19) zou ook beter zijn voor de precisie.

Ter informatie: ik heb ook dit moeten toevoegen aan de tekst lagen styling:
“text-rotation-alignment”: “map”
“text-pitch-alignment”: “map”

Anders draait de tekst alle kanten op bij het draaien of kantelen van de kaart.