BGT Vector Tiles in Mapbox

Datasets BGT
#1

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

BAG nu ook beschikbaar als Vector Tiles via PDOK (OGC API’s)
#2

Helpt dit?

1 like
#3

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

2 likes
#4

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

#5

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

#6

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
#7

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.

#8

Graag zou ik met Mapbox GL de BAG panden willen inladen bovenop de standaard achtergrond. Mijn poging heeft me tot onderstaande code gebracht, maar die werkt nog niet. Is het mogelijk om specifiek alleen de panden in te laden?

mapboxgl.accessToken = 'KEY';

const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [5.223, 52.05],
    zoom: 16
});

map.on('load', function () {
    map.addSource('my-vector-tile-source', {
        type: 'vector',
        tiles: [
            'https://api.pdok.nl/lv/bag/ogc/v1/tiles/WebMercatorQuad/{z}/{y}/{x}?f=mvt'
        ],
        minzoom: 0,
        maxzoom: 17
    });

    map.addLayer({
        id: 'my-layer',
        type: 'fill',
        source: 'my-vector-tile-source',
        'source-layer': 'your-layer-name',
        paint: {
            'fill-color': '#888888',
            'fill-opacity': 0.5
        }
    });
});