Meerdere WMS lagen toevoegen

Om een WMS laag aan te roepen moeten we de esri/layers/WMSLayer library aanroepen. We gaan meteen meerdere lagen toegen met de layer widget en de WMS legenda.

In Leaflet zit deze optie niet direct en zul je hiervoor een plug-in moeten zoeken of het zelf moeten schrijven. Maar de ArcGIS JavaScript library heeft dit wel. Deze library werkt dus ook beter met de Ersi server en minder goed met de OGC standaarden.

:arrow_forward: Voeg de extra libraries toe:

require([
    "esri/Map",
    "esri/views/MapView",
    "esri/layers/WMSLayer",
    "esri/widgets/LayerList",
    "esri/widgets/Legend"
], function (Map, MapView, WMSLayer, LayerList, Legend) {
    // All mapping stuf here
})

Zoals je ziet gaan we ook een LayerList widget en een Legend widget toevoegen. Dit zijn widgets op de kaart voor een betere User Experience en meer controle over de kaart voor de gebruiker.

:arrow_forward: We voegen een WMS toe met meerdere lagen:

var cultuurPZH = new WMSLayer({
    title: "Cultuurhistorie Beeldbepalend Erfgoed",
    url: "https://geoservices.zuid-holland.nl/arcgis/services/Cultuur/Cultuurhistorie_Beeldbepalend_Erfgoed/MapServer/WmsServer?",
    sublayers: [
        {
            title: "Historische orientatiepunten.",
            name: "Historische orientatiepunten.",
            legendUrl: "https://geoservices.zuid-holland.nl/arcgis/services/Cultuur/Cultuurhistorie_Beeldbepalend_Erfgoed/MapServer/WmsServer?request=GetLegendGraphic%26version=1.3.0%26format=image/png%26layer=Historische orientatiepunten." // url to the legend
        },
        {
            title: "Sociale woningbouw onder architectuur.",
            name: "Sociale woningbouw onder architectuur.",
            legendUrl: "https://geoservices.zuid-holland.nl/arcgis/services/Cultuur/Cultuurhistorie_Beeldbepalend_Erfgoed/MapServer/WmsServer?request=GetLegendGraphic%26version=1.3.0%26format=image/png%26layer=Sociale woningbouw onder architectuur.", // url to the legend
            visible: true

        }
    ]
});

:arrow_forward: Zie of je meerdere lagen uit de WMS van de Cultuurhistorie kan toevoegen. Of van een ander WMS van de provincie Zuid-Holland.

:information_source: De legendUrl is de url naar een plaatje van de legenda. De ArcGIS Server maakt deze plaatjes zelf op basis van de gegeven stijl. Let op dat je ook deze url mee neemt. Je kan deze vinden in het GetCapabilities request van de WMS!

:arrow_forward: Voeg de lagen toe aan je map

map.layers.add(cultuurPZH);

Layer widget

De Layer Widget laat alle lagen zien in een handig lijstje. Hier kan je de lagen ook aan en uit zetten. In de WMS lagen hiervoor hebben we aangegeven welke lagen wel en niet zichtbaar zijn bij het openen van de kaart. visible: true

:arrow_forward: Voeg de Layer widget toe aan het script:

// LAYER LIST WIDGET
var layerlist = new LayerList({
    view: view
});
// Adds widget below other elements in the top left corner of thge view
view.ui.add(layerlist, {
    position: "top-left"
});

Legend widget

De WMS lagen bezitten ook een legenda. In de WMS lagen hiervoor hebben we ook de url naar de Legenda van de laag aangegeven. De Legend widget weet hier zelf gebruik van te maken en laat de legenda van de active lagen zien.

:arrow_forward: Voeg de lengenda widget toe aan je script:

// LEGEND WIDGET
var legend = new Legend({
    view: view,
    layerInfos: [{
        layer: cultuurPZH,
        title: "Legend"
    }]
});
// Adds widget below other elements bottom right corner of the view
view.ui.add(legend, "bottom-right");

aanpassen

:arrow_forward: Zie of je een leuke verzameling data lagen op de kaart kan laten zien. Bijvoorbeeld alle lagen die ook beschikbaar zijn in de warmtetransitie atlas.

:information_source: Als je de warmtetransitie atlas opent:

https://warmtetransitieatlas.zuid-holland.nl/webappbuilder/apps/496/

En dan de debugger opent:

• Klik met de rechter muisknop in het scherm van de browser en kies : Inspect Element
• Je kan ook F12 drukken.

Dan laat het tabblad Netwerk zien welke services er allemaal worden aangeroepen. Deze urls zijn natuurlijk de WMS en WFS urls die de applicatie gebruikt. Erg handig om te achterhalen welke data er nou in zit. Je zou deze urls bijvoorbeeld kunnen gebruiken om in je eigen kaart te zetten!

:arrow_forward: Welke laag zet je aan als je de kaart opent? Verander de visible: true van de lagen.

Als je tevreden bent met je kaart publiceer het dan online!

:arrow_right: Ga naar Hosting op Github