Overdracht - VNG

the workshop starts here

Uitleg hoe de applicatie werkt staat op https://gitlab.com/commondatafactory/react-map/-/blob/feature/documentatie/README_DEVELOPER.md?ref_type=heads

Nieuwe vector tile bron

Stephan heeft pas nieuwe data gemaakt. Dat betekend dat hij nieuwe vector tiles heeft gepubliceerd. We krijgen van hem een nieuw endpoint van de TileJSON:

• https://files.commondatafactory.nl/tiles/kvenergie202406v1/kvenergie202406v1.json

Daarnaast is er een handige tool om de informatie snel te kunnen bekijken. Deze heet de vector-inspector. Stephan stuurt dit ook door :

• https://stevage.github.io/vector-inspector/#?url=https://files.commondatafactory.nl/tiles/kvenergie202406v1/15/16830/10760.pbf&loc=18.66/52.426592/4.9073366

Open beide bestanden in de browser en bekijk deze. Herken je de overeenkomsten?

Welke vector lagen zijn er allemaal beschikbaar in de tegel bron? en wat is de geometry type van deze lagen? Kan je aan de namen en de gegevens zien om welke data het gaat en welke attributen er in zitten?

Vocabulaire

TileJSON: TileJSON is a JSON format used for describing tilesets. It keeps track of where to request the tileset, the name of the tileset, and any attribution that’s necessary when using the tileset.

vector layers: A list of Vector layers within the tileset is available. Every layer in the list contains information about its properties, including the property name, data type, and associated values. Mostly a vector layer exists out of 1 geomtery type.

vector tiles: vector tile is a lightweight data format for storing geospatial vector data, such as points, lines, and polygons.

Tileset of tegel bron : A tileset is a collection of raster or vector data broken up into a uniform grid of square tiles at up to 22 preset zoom levels. Tilesets are highly cacheable and load quickly.

Ontwikkelen aan de react-map

Ga naar jouw code editor en open het project react-map wat je hiervoor al op de computer hebt gezet.

Zorg dat de applicatie draait door in de terminal yarn dev te draaien in de folder van react-map .

Open http://localhost:3001 in de browser. Laat de browser en de code editor samen open staan. Zo kan je makkelijk code aanpassen en direct de gevolgen zien in de browser.

Gebruik ctrl + s als snel toets vaak tijdens de aanpassingen. De browser reload automatisch als de code opnieuw opgeslagen wordt.

Bron updaten

Ga naar het bestand src/data/tile-sources.ts.

Hier staan alle (tegel)bronnen die de applicatie aanspreekt om de data te kunnen tonen. Er bestaat al een BAG bron. Deze gaan we nu updaten met de nieuwe bron.

bag: {
    minzoom: 12,
    maxzoom: 22,
    'source-layer': 'panden2022',
    source: {
      type: 'vector',
      url: 'https://files.commondatafactory.nl/tiles/epanden_202209/epanden.json',
      minzoom: 12,
      maxzoom: 15,
    },
  },

Vervang de url door de nieuwe url die we gekregen hebben.

Let op! de source-layer naam is nu ook veranderd. Kijk goed in de TileJSON hoe de nieuwe vector laag heet.

Kijk naar het schema in de documentatie en volg de stappen die er nodig zijn om de data te updaten: https://gitlab.com/commondatafactory/react-map/-/blob/feature/documentatie/README_DEVELOPER.md?ref_type=heads.

Ga naar het bestand src/data/data-layers.ts en bekijk de dataLayers die de sourceSettings.bag gebruiken.

Begin bij de dataLayer Bouwjaar bijvoorbeeld. Check de source-layer en de attrName deze moeten allemaal juist staan om de nieuwe data te tonen in de applicatie.

Kijk op http://localhost:3001 naar de wijzigingen en mogelijke errors.

Developer Tools

Om fouten te vinden in de browser gebruiken we de web inspector of developer tools:

In your browser when you opened your page

• Click with your right mouse button, choose : Inspect Element or Inspect (Q)
• Or Press F12

Ga naar de tab Console. Hier worden alle warnings en errors getoond. Als er iets niet goed is met de settings of styling van een laag dan vind je er hier meer informatie over.

Ga naar de tab Network. Hier zie je alle bronnen die worden aangesproken. Als er een url verkeerd is of een bron werkt niet dan zie je hier een 404 error voor het netwerk request.

CORS errors? Even melden bij Stephan!

Gebruik dit om jouw code te debuggen!

Laag Styling aanpassen

https://gitlab.com/commondatafactory/react-map/-/blob/feature/documentatie/README_DEVELOPER.md?ref_type=heads#changing-and-defining-the-styling-for-the-style-layers

Als je meer wilt leren over de color scales en hoe ik R gebruik voor de statestieken hiervoor kijk dan eens op mijn website: https://nieneb.nl/online-projects/colorscales/ Het is een beetje oud maar de princiepes werken nog steeds hetzelfde.