NL Maps raster tile source

Toepassingen NL Maps
#1

Ik ben op zoek naar een oplossing om een kaart te laten zien op https://zwemindex.nl.
Via https://nlmaps.nl is dit makkelijk te doen. Ik heb hier een aantal vragen over, dus ik hoop dat iemand hier iets over kan zeggen.

Is het mogelijk om MapLibre te gebruiken ipv Mapbox. Voor zover ik het goed begrijp is dat een open source fork van MapboxGL (OpenGL rendering) (aangezien Mapbox licenties heeft aangepast). De huidige NLMaps maakt nog gebruik een oudere versie van Mapbox.

Ik mis eigenlijk een voorbeeld hoe ik de mapdata die via nlmaps aangeboden wordt kan gebruiken.

Op maplibre staat een voorbeeld van het gebruik van een raster tile source. Volgens mij biedt nlmaps ook zoā€™n source aan (maar ik ben het zo gauw niet tegengekomen in de Github source). Zou ik dat dan makkelijk kunnen gebruiken?

Komen uiteindelijk ook de vectortiles van pdok beschikbaar via nlmaps?

#2

Ik zie in de ddocumentatie dat dit het url patroon is van ruwe tegels:
https://service.pdok.nl/brt/achtergrondkaart/wmts/v2_0/standaard/EPSG:3857/{z}/{x}/{y}.png

Alleen mis ik nu hoe die tegels aangeroepen moeten worden (ben nieuw op dit gebied, dus misschien zie ik iets heel simpels over het hoofd).

Is dit wat gedaan wordt door geolocator? Of is dit iets anders?

#3

Ik ken Maplibre niet, noch Mapbox (gebruik zelf Openlayers). Maar in het voorbeeld dat je van MapLibre geeft, zie je dit stukje code staan:

'sources': {
'raster-tiles': {
'type': 'raster',
'tiles': [
'https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg'
],
'tileSize': 256,
'attribution':
'Map tiles by <a target="_top" rel="noopener" href="http://stamen.com">Stamen Design</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a target="_top" rel="noopener" href="http://openstreetmap.org">OpenStreetMap</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>'
}
},

En daar zie je eenzelfde soort url staan by tiles. Ik zou zeggen: probeer eenvoudigweg eens dit voorbeeld uit, en vervang die url door de PDOK url, en kijk wat er gebeurt. Kopieer eenvoudig de code van dat voorbeeld, plak in een Notepad++ documentje, sla op met extensie .html en open met je browser.

(hint: afhankelijk van je zoomniveau en locatie zal de javascript zelf bepalen welke waarden ingevuld moeten worden op de plek van de {z}, {x} en {y}. Daar hoef je verder zelf niks voor te doen. Als je de netwerk-requests bekijkt van je javascript met F12, zie je die ook allemaal langs komen).

Wat bedoel je hier precies mee? wat is ā€˜geolocatorā€™?

1 like
#4

Ben je er al uit of je MapLibre wilt gebruiken? Niet helemaal antwoord op je wens om het via NLmaps te gebruiken, maar wellicht biedt het een optie voor je indien je MapLibre wilt gebruiken.

Je kunt kosteloos een account maken op https://developers.arcgis.com. We delen daar codes samples om ArcGIS basemaps te kunnen implementeren in open source mapping APIā€™s als Leaflet, MapLibre en OpenLayers. Met het account maak je een API-key aan en je kunt direct aan de slag. Het is kosteloos tot aan 2.000.000 tile requests per maand, elke maand weer. Kies je voor bijv. de World Topo vector style, dan maak je gebruik van een kaart waarin voor Nederland o.a. de BRT en BGT verwerkt zitten. Zodoende maak je gebruik van dezelfde bronnen als waar je aan refereert. Maar je kunt dan ook direct net over de grens van het land gaan mocht je die ambities hebben met de site.

Met de 2.000.000 free tier requests per maand kunnen heel veel websites ruim uit de voeten. Kom je daar overheen dan kom je in de paid tiers (en alleen als je daarvoor kiest), maar dan heeft je website ook dusdanig veel bezoekers dat je met bijv. Google Ads genoeg inkomsten kunt genereren om je hele hosting en dit soort diensten kunt bekostigen.

Aan de slag:

Code sample om een kaart te laden:

Code sample om van basemap te wisselen:
https://developers.arcgis.com/maplibre-gl-js/maps/change-the-basemap-layer/

En wil je de basemap vervangen of er nog een andere raster layer overheen leggen, dan kan je eens kijken naar dit code sample:

1 like
#5

Met de code hieronder kan je de BRT-Achtergrondkaart laten zien in een Maplibre GL JS viewer. Omdat de BRT-Achtergrondkaart niet op alle zoomniveaus beschikbaar is, zijn de minzoom en maxzoom parameters expliciet meegegeven.

<html>
    <head>
        <meta charset="utf-8" />
        <title>BRT-Achtergrondkaart (EPSG:3857) in MapLibre GL JS</title>
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.js"></script>
        <link href="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.css" rel="stylesheet" />
        <style>
	    body { margin: 0; padding: 0; }
	    #map { position: absolute; top: 0; bottom: 0; width: 100%; }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <script>
            var map = new maplibregl.Map({
                container: 'map', // container id
                style: {
                    'version': 8,
                    'sources': {
                        'brt-achtergrondkaart': {
                            'type': 'raster',
                            'tiles': ['https://service.pdok.nl/brt/achtergrondkaart/wmts/v2_0/standaard/EPSG:3857/{z}/{x}/{y}.png'],
                            'tileSize': 256,
                            'minzoom': 5,
                            'maxzoom': 17,
                            'attribution': 'Kaartgegevens: <a href="https://kadaster.nl">Kadaster</a>'
                        },
                    },
                    'layers': [
                        {
                            'id': 'rasterkaartje',
                            'type': 'raster',
                            'source': 'brt-achtergrondkaart',
                        },
                    ]
                },
                center: [5, 52.5], // starting position
                zoom: 8 // starting zoom
            });
        </script> 
    </body>
</html>

De Mapbox JS bibliotheek die NL Maps gebruikt is een uitbreiding van LeafletJS en wordt niet meer onderhouden door Mapbox.

1 like
#6

Dank, hier had ik inderdaad overheen gekeken.
Ik weet niet precies wat geolocator is, maar dat is een JS library waarin in de source wordt verwezen. Ik heb het idee dat het dan te maken heeft met het opvragen van de gebruikerslocatie.

#7

Ik kom dus niet ongemerkt hierover heen en kan ik dit monitoren? Ik ben een beetje huiverig voor services zoals Amazon. Hele goede developer experience, maar je kan verrast worden door een flinke rekening als je even niet oplet.

Het is wel mooi als een kaart niet aan de grenzen ophoudt, zoals bij de BRT kaart.

#8

Dank hiervoor, zoā€™n voorbeeld zocht ik. Dit helpt me op weg. Ik zag idd dat de Mapbox versie verouderd was in NLMaps.

#9

We hebben het bewust als volgt gemaakt:

  • Voer je geen betaalmiddel in, dan kan je nooit over de free tier gaan. En haal je dat getal (chapeau, je website is een succes :slight_smile: ), dan krijg je voor de rest van de maand geen tile responses meer. Daar kies je dan ook bewust voor bij het niet willen invoeren van betaalgegevens. Het zijn vector tiles, en 2.000.000 maandelijks is dan echt een behoorlijk limiet. Op vector tiles doe je al snel aanzienlijk minder requests dan op raster tiles.

  • Wil je voorkomen dat je geen kaarten meer kunt tonen die maand, dan heb je twee opties:
    ** Je kiest ter plekke bij halen van limiet (of benaderen ervan) voor een paid tier (voor een specifiek bedrag schaf je meer requests aan)
    ** Je kiest voor pay per use

Omdat je met een API key werkt en je eigen developer account, kan je daar continue monitoren hoe het zit met je ā€˜verbruikā€™. Speel er eens mee, dat kan en mag iedereen doen. En het kost je niets behalve je eigen tijd :wink: . Ook kan je meerdere API keys aanmaken, bijv. wanneer je het gebruik wilt monitoren per toepassing. Het limiet geldt op het developer account, niet per API key.

#10

Van Openstreetmap (zelf overigens ook een mooie kaart, maar welicht iets te druk voor een overlay) is ook een fraaie grijstinten versie beschikbaar. Heb de url zo niet bij de hand, maar kan morgen vanaf de laptop wel opzoeken (op de foon bezig nu :wink: )

#11

Interessant om te testen inderdaad. Ik ben ook nog https://www.nextzen.org/ tegengekomen. Volgens mij draait die gratis bij Amazon op basis van credits.

#12

Komt van Carto. Omdat ik me niet meer kan herinneren waar ik oorspronkelijk de url vandaan heb, ben ik er nog eens in gedoken. Het lijkt er op dat ze geen gratis optie hebben, hoewel hun servers gewoon serveren zonder enige bescherming :thinking:

Ik weet dus eigenlijk niet eens zeker of wat ik doe voor mijn eigen website wel mag :flushed:
Ga dus ook maar niet de directe url hier neerzettenā€¦

Maar ze hebben wel een aantal mooie stijlen (muis over de cirkel rechts onderaan).

1 like
#13

Wellicht dat andere library het ook kunnen?

Openlayers 6, daar maak ik van de standaard carto kaart url, met grayscale %, een andere kleur tint, ā€¦
in css style

 .bw {
 filter: grayscale(80%);
}

className: ā€˜bwā€™,

    new TileLayer({
      className: 'bw',
      source: new OSM(),
    }),

image
image702Ɨ305 60.4 KB

openlayers example

Tile services met OSM data.

2 likes
#14

Och ja, natuurlijk! had ik nooit meer aan gedacht, maar daā€™s ook een hele goeie.

#15

@Allroads goed idee.

Ik heb nog wat onderzoek gedaan naar andere services. Het aanbod van ArcGis/Esri (dank @JBak) is inderdaad wel het meest interessant qua (geen) kosten qua calls.

Een ander prijsbewust alternatief is limalabs (20.000.000 tiles jaarlijks), daarna kun je bijkopen: https://maps.lima-labs.com/

Mijn voorkeur gaat uit naar de OSM map en die is bij Arcgis beschikbaar. Nadeel van de Kadaster map is dat het stopt bij de grens. Ik woon in Enschede, dus dat is best lelijk zoā€™n groot wit vlak naast de deur :slight_smile:

@JBak Ik vraag me wel af waarom de copyright line zo lang is als dit puur een OSM laag is.

Map data (c) OpenStreetMap contributors, Microsoft, Facebook, Inc. and its affiliates, Esri Community Maps contributors, Map layer by Esri

Waarom moeten Microsoft, Facebook etc. in deze lijst, want die worden op openstreetmap.org ook niet genoemd? Dan zou het zijn: Map data (c) OpenStreetMap contributors, Map layer by Esri
Of is dit meer dan OSM?

Dit is ook wel een goede bron voor tileservers:
https://wiki.openstreetmap.org/wiki/Tile_servers
(@JBak ArcGis/Esri staat daar niet tussen, dus misschien een tip).

#16

Dan mag hier map5.nl ook wel genoemd: https://map5.nl . Zowel RD als Web Mercator raster tiles. WMTS en (gemakkelijker) TMS.

Voor OSM vind ik Thunderforest een goede aanbieder: https://www.thunderforest.com/.

Voor beiden een flat fee en je wordt niet afgesloten of extra aangeslagen als je over maximum heengaat.

De oorspronkelijke vraag is een beetje verloren gegaan: ging toch om een rasterkaart? Dan zou ik even van MapLibre en Vector Tiles afzien. Ik zou Leaflet evt OpenLayers doen. PDOK heeft toch gewoon een BRT achtergrondkaart met veel OpenLayers en Leaflet voorbeelden van bijv @antonbakker ?

1 like
#17

Copyright tekst is langer ivm de bron die de basis vormt en partijen die de voorziening aanbieden. De data is OSM, maar dan de Daylight - distribution. Dat is OSM, met aanvullingen en extra controles. Zie voor meer informatie: https://daylightmap.org/.

1 like
#18

Mijn eerste interesse ging uit naar Vector tiles, maar die waren nog niet beschikbaar via NLMaps. Ook zag ik dat implementaties wat verouderd waren en ik vind zelf qua API mapbox/maplibregl als developer het meest interessant (denk dat dat persoonlijk voorkeur is). Dus ik vroeg me af of hoe ik die raster info kon gebruiken (dank aan @sbjager en @emacgillavry).

Ik snap nu wel de beperking van de kadaster kaart (houdt op bij de grenzen), dus de aanvullingen in iets andere richtingen (verschillende ā€œtile serversā€ zijn zeker bruikbaar).

Als ik het goed begrijp zijn vectortiles efficienter qua data en gezien de hoge PPI van mobiele schermen (pixel density) mooier weer te geven.

@Just_OSGeo Wil je dat ik het onderwerp aanpas, want inderdaad het draadje is iets een andere kant opgegaan.

#19

Ik moest erg lachen om de Spinal Map (up to eleven) :slight_smile:

@JBak Ik zie idd dat die map meer heeft dan OSM, bijv. parkeerplaatsen worden aangegeven rondom recreatieplas het Hulsbeek (dat is even mijn referentie kader).

#20

@Just_OSGeo Wil je dat ik het onderwerp aanpas, want inderdaad het draadje is iets een andere kant opgegaan.

Neuh, hoeft niet, is wel interessante discussie.

1 like