Opmaak legenda binnen eigen kaart

Toepassingen KaartApi
1

Hoi allemaal,

Ik vroeg mij af of er ook iets te doen was aan de opmaak van de legenda. Wanneer ik een eigen kaart maak, en de WMS toevoeg, zou ik graag de kleuren op de legenda laten zien zodat het duidelijk wordt wat waarbij hoort.

Mijn vraag is dus; is er iets te doen aan de opmaak van de legenda, binnen kaart.pdok of via een andere weg?

mvg.

2

Hallo @StagGZEEL,

stel we gaan er vanuit dat je kaart.pdok.nl hebt gebruikt en het voorbeeld hebt gevolgd als in dit forum topic:
https://forum.pdok.nl/t/wms-toevoegen-aan-eigen-kaart-werkt-niet/2054/2?u=daneng

Dan kunnen we daar nog een paar stappen aan toevoegen.

  1. Pak in “Stap 3: Genereer code” onder het kopje “Als broncode” het veld met de gegenereerde html en stop dit in een HTML bestand.

  2. Doe een GetLegendGraphic verzoek op je WMS. Bijvoorbeeld de fysisch geografische regios. Zo een verzoek ziet er bijvoorbeeld zo uit:
    https://geodata.nationaalgeoregister.nl/fysischgeografischeregios/wms?service=WMS&request=GetLegendGraphic&format=image%2Fpng&width=20&height=20&layer=fysischgeografischeregios&version=1.0.0

    Het resultaat van dit verzoek ziet er zo uit:
    wms-legend

  3. Maak een een div aan met daarin een img tag binnen je nieuwe html bestand. En stop in het src attribuut van de img tag het URL van stap 2. Dat kan er dan zo uitzien als code:

    <div id="legend">
    <img src="https://geodata.nationaalgeoregister.nl/fysischgeografischeregios/wms?service=WMS&request=GetLegendGraphic&format=image%2Fpng&width=20&height=20&layer=fysischgeografischeregios&version=1.0.0" alt="fysischgeografischeregios legenda" />
    </div>

  4. Je totale HTML bestand ziet er dan als volgt uit:
    <html>
    <head>
    <title>PDOK Kaart test met legenda</title>
    </head>
    <body>
    <script type="text/javascript" src="https://kaart.pdok.nl/api/js/OpenLayers.js"></script>
    <script type="text/javascript" src="https://kaart.pdok.nl/api/js/proj4js-compressed.js"></script>
    <script type="text/javascript" src="https://kaart.pdok.nl/api/js/pdok-api.js"></script>
    <script type="text/javascript" src="https://kaart.pdok.nl/api/js/geozetlib.js"></script>
    <script type="text/javascript" src="https://kaart.pdok.nl/api/js/pdok-markers.js"></script>
    <script type="text/javascript" src="https://kaart.pdok.nl/api/js/pdok-layers.js"></script>
    <script type="text/javascript">
    Pdok.addcss("https://kaart.pdok.nl/api/styles/default/style.css");
    Pdok.addcss("https://kaart.pdok.nl/api/styles/api.css");
    var config_126={
    "mapdiv": "map_126",
    "zoom": 3,
    "showscaleline": true,
    "showmouseposition": true,
    "loc": "170000, 470000",
    "baselayers": [
    {
    "id": "BRT",
    "visible": true
    },
    {
    "id": "LUFO",
    "visible": false
    }
    ],
    "wmsurl": "https://geodata.nationaalgeoregister.nl/fysischgeografischeregios/wms?",
    "wmslayers": "fysischgeografischeregios",
    "wmsinfoformat": "text/plain",
    "markersdef": "https://kaart.pdok.nl/api/js/pdok-markers.js",
    "layersdef": "https://kaart.pdok.nl/api/js/pdok-layers.js"
    };
    var api_126;
    Pdok.ready(
    function(){
    api_126 = new Pdok.Api(config_126);
    } );
    </script>
    <div id="map_126" class="olMap big"></div>
    <div id="legend">
    <img src="https://geodata.nationaalgeoregister.nl/fysischgeografischeregios/wms?service=WMS&request=GetLegendGraphic&format=image%2Fpng&width=20&height=20&layer=fysischgeografischeregios&version=1.0.0" alt="fysischgeografischeregios legenda" />
    </div>
    </body>
    </html>

En ziet er dan zo uit in je browser:

pdok-kaart
pdok-kaart1087×778 96.2 KB

De tip is dus een GetLegendGraphic verzoek te doen op de WMS die je gebruikt. Deze zal automatisch aan de hand van de styling van je WMS laag automatisch een legenda genereren. Je kan daarna twee dingen doen, dit plaatje lokaal opslaan en statisch uitserveren, of bij elke gebruiker het GetLegendGraphic verzoek opnieuw doen. De laatste optie heeft als voordeel dat als je de style aanpast je direct een nieuw plaatje krijgt die klopt met je stijlen, maar het nadeel is dat het langzamer kan zijn dan een statisch plaatje serveren.

Mocht je een Geoserver backend gebruiken, dan kan je hier nog wat meer documentatie vinden over dit type request: GetLegendGraphic — GeoServer 2.24.x User Manual
Dit type request zou op alle WMS backends moeten werken die de OGC specificaties volgen.
Stel je praat tegen een Mapserver aan dan zal dit type request ook gewoon werken.

2 likes