Casus 2: Maak een themakaart met een dashboard
Inleiding
In deze casus maken we een themakaart in Onemap met een dashboard. We voegen in de themakaart een WFS kaartlaag toe met containers. Daarna maken we met de beschikbare container attributen een dashboard waarin verschillende statistieken getoond worden over containers.
Themakaart aanmaken
Begin met het aanmaken van een nieuwe themakaart.
Vul de gevraagde belangrijke informatie in.
Let op!
We werken allemaal in dezelfde omgeving om te zorgen dat we niet dezelfde objecten aanmaken, voegen we aan alle objecten die we aanmaken onze [NAAM] toe. Dan kan iedereen zijn eigen kaarten, kaartlagen en andere objecten herkennen.
Titel | Container dashboard - [NAAM] |
Projectie | 28992 |
Kaartextent & startextent
|
Sla de kaart op als de basis instellingen naar wens zijn. Het gaat in deze opdracht meer om de dashboard configuratie te begrijpen dan om het maken van een complete themakaart.
Themakaart basis instellingen
Configureer eerst de widgets, zijbalken, werkbalk en kaartlagen. Als laatste configureren we de dashboards/grafieken op de container kaartlaag en sorteren we de grafieken in het zijpaneel.
Widgets:
Zijbalken:
Kaartlagen:
Voeg de basis kaartlaag “BRT standaard” toe.
Zet de kaartlaag in de map “Achtergrond”. Dit doe je door te kiezen voor “Groep toevoegen”. Je vult de naam (Achtergrond) in en klikt oplaan. Sleep de kaartlaag BRT Standaard daarna in de aangemaakte groep/map.
Open de kaart, die zal er ongeveer zo uit zien:
Werkbalken en knoppen
We gaan de knoppen configureren. Open het beheer van deze kaart. Je kan het beheer openen door in de kaart op het hamburger menu te klikken rechts bovenin. Onderstaand scherm verschijnt dan.
Je kan ook in het portaal op het instellingen icoontje klikken of terug gaan naar het tabblad dat nog open staat.
Open het “Werkbalken” menu van de kaart.
Voeg eerst de standaard”Basis toolbar” toe.
Het dashboard toont altijd de statistieken van alle features in de kaart. Tot je een selectie maakt, dan toont het dashboard de statistieken van de selectie. Het dashboard is daardoor dynamisch en makkelijk te bedienen.
We hebben daarvoor de selectie werkbalk en knoppen nodig.
Voeg deze standaard toolbar toe aan de kaart.
Je kan deze nog uitbreiden met de losse knoppen, klik daarvoor op het plusje rechts in de werkbalk.
Selecteer binnen selectie
Vrij selecteren
Zoomen naar selectie
Voeg de kaartlaag “Containers” toe.
Begin met de WFS service en voeg daar een kaartlaag uit toe.
We gaan nu een WFS kaartlaag “Containers” toevoegen aan deze themakaart en gebruiken daarvoor de reeds aangemaakte WFS kaartservice.
Gebruik deze kaartservice:
Titel | Nieuwland Gemeenten Geoserver (WFS) |
URL | https://geoserver-gemeenten.webgispublisher.nl/wageningen/wfs? |
Instellingen | WFS, 2.0.0, OGC |
Maak op basis van deze kaartservice een kaartlaag “Containers” en voeg deze toe aan de themakaart.
Service | Nieuwland Gemeenten Geoserver (WFS) |
Laagnaam | containers |
Titel | Containers - [NAAM] |
Beperkt laden features | Nee |
Dat ziet er dan als volgt uit (mijn naam is Thomas).
Voeg de kaartlaag toe aan de kaart.
Configureer voor deze kaartlaag Containers nog de volgende zaken:
Feature informatie:
Dat kunt u doen door onderstaande code te plakken in de editor. In de modus “broncode”.
Feature Informatie | <p style="margin-bottom: 0.2rem"><strong>Identificatie: </strong>{{ objectid_1 }}</p> <p style="margin-bottom: 0.2rem"><strong>Straat: </strong>{{ straat }}</p> <br> <p style="margin-bottom: 0.2rem"><strong>Soort container: </strong>{{ soort_cont }}</p> <p style="margin-bottom: 0.2rem"><strong>Jaar in gebruikname: </strong>{{ jaar_in_ge }}</p> <br> <p style="margin-bottom: 0.2rem"><strong>Locatienummer: </strong>{{ locatienum }}</p> <p style="margin-bottom: 0.2rem"><strong>Type container: </strong>{{ type_conta }}</p> <p style="margin-bottom: 0.2rem"><strong>Merk container: </strong>{{ merk_conta }}</p> <p style="margin-bottom: 0.2rem"><strong>Ophaalsysteem: </strong>{{ ophaalsyst }}</p> <p style="margin-bottom: 0.2rem"><strong>Afvalstroom: </strong>{{ afvalstroo }}</p> |
Dat ziet er dan zo uit:
Stijl:
SLD | <?xml version="1.0" encoding="utf-8"?> <StyledLayerDescriptor xmlns="http://www.opengis.net/sld" xmlns:ogc="http://www.opengis.net/ogc" xmlns:xlink="http://www.w3.org/1999/xlink " xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="1.0.0" xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd"> <!--Generated by GeoCat Bridge for QGIS 4.4.1 (based on bridgestyle 0.1.1)--> <NamedLayer> <Name>containers_afvalstroom</Name> <UserStyle> <Title>containers_afvalstroom</Title> <FeatureTypeStyle> <Rule> <Name>Glas</Name> <Title>Glas</Title> <ogc:Filter> <ogc:PropertyIsEqualTo> <ogc:PropertyName>afvalstroo</ogc:PropertyName> <ogc:Literal>Glas</ogc:Literal> </ogc:PropertyIsEqualTo> </ogc:Filter> <PointSymbolizer> <Graphic> <Mark> <WellKnownName>circle</WellKnownName> <Fill> <CssParameter name="fill">#d7191c</CssParameter> <CssParameter name="fill-opacity">1.0</CssParameter> </Fill> <Stroke> <CssParameter name="stroke">#232323</CssParameter> <CssParameter name="stroke-width">1</CssParameter> <CssParameter name="stroke-opacity">0.3607843137254902</CssParameter> </Stroke> </Mark> <Opacity>1.0</Opacity> <Size>7.142857142857142</Size> <Rotation>0.0</Rotation> </Graphic> </PointSymbolizer> </Rule> <Rule> <Name>PMD</Name> <Title>PMD</Title> <ogc:Filter> <ogc:PropertyIsEqualTo> <ogc:PropertyName>afvalstroo</ogc:PropertyName> <ogc:Literal>PMD</ogc:Literal> </ogc:PropertyIsEqualTo> </ogc:Filter> <PointSymbolizer> <Graphic> <Mark> <WellKnownName>circle</WellKnownName> <Fill> <CssParameter name="fill">#fedf99</CssParameter> <CssParameter name="fill-opacity">1.0</CssParameter> </Fill> <Stroke> <CssParameter name="stroke">#232323</CssParameter> <CssParameter name="stroke-width">1</CssParameter> <CssParameter name="stroke-opacity">0.3607843137254902</CssParameter> </Stroke> </Mark> <Opacity>1.0</Opacity> <Size>7.142857142857142</Size> <Rotation>0.0</Rotation> </Graphic> </PointSymbolizer> </Rule> <Rule> <Name>Textiel</Name> <Title>Textiel</Title> <ogc:Filter> <ogc:PropertyIsEqualTo> <ogc:PropertyName>afvalstroo</ogc:PropertyName> <ogc:Literal>Textiel</ogc:Literal> </ogc:PropertyIsEqualTo> </ogc:Filter> <PointSymbolizer> <Graphic> <Mark> <WellKnownName>circle</WellKnownName> <Fill> <CssParameter name="fill">#91cba8</CssParameter> <CssParameter name="fill-opacity">1.0</CssParameter> </Fill> <Stroke> <CssParameter name="stroke">#232323</CssParameter> <CssParameter name="stroke-width">1</CssParameter> <CssParameter name="stroke-opacity">0.3607843137254902</CssParameter> </Stroke> </Mark> <Opacity>1.0</Opacity> <Size>7.142857142857142</Size> <Rotation>0.0</Rotation> </Graphic> </PointSymbolizer> </Rule> <Rule> <Name>Luiers_en_incontinentie</Name> <Title>Luiers en incontinentie</Title> <ogc:Filter> <ogc:PropertyIsEqualTo> <ogc:PropertyName>afvalstroo</ogc:PropertyName> <ogc:Literal>Luiers en incontinentie</ogc:Literal> </ogc:PropertyIsEqualTo> </ogc:Filter> <PointSymbolizer> <Graphic> <Mark> <WellKnownName>circle</WellKnownName> <Fill> <CssParameter name="fill">#f59053</CssParameter> <CssParameter name="fill-opacity">1.0</CssParameter> </Fill> <Stroke> <CssParameter name="stroke">#232323</CssParameter> <CssParameter name="stroke-width">1</CssParameter> <CssParameter name="stroke-opacity">0.3607843137254902</CssParameter> </Stroke> </Mark> <Opacity>1.0</Opacity> <Size>7.142857142857142</Size> <Rotation>0.0</Rotation> </Graphic> </PointSymbolizer> </Rule>
<Rule> <Name>Restafval_ondergronds</Name> <Title>Restafval ondergronds</Title> <ogc:Filter> <ogc:PropertyIsEqualTo> <ogc:PropertyName>afvalstroo</ogc:PropertyName> <ogc:Literal>Restafval ondergronds</ogc:Literal> </ogc:PropertyIsEqualTo> </ogc:Filter> <PointSymbolizer> <Graphic> <Mark> <WellKnownName>circle</WellKnownName> <Fill> <CssParameter name="fill">#ddf1b4</CssParameter> <CssParameter name="fill-opacity">1.0</CssParameter> </Fill> <Stroke> <CssParameter name="stroke">#232323</CssParameter> <CssParameter name="stroke-width">1</CssParameter> <CssParameter name="stroke-opacity">0.3607843137254902</CssParameter> </Stroke> </Mark> <Opacity>1.0</Opacity> <Size>7.142857142857142</Size> <Rotation>0.0</Rotation> </Graphic> </PointSymbolizer> </Rule> <Rule> <Name/> <Title>Overige</Title> <ElseFilter/> <PointSymbolizer> <Graphic> <Mark> <WellKnownName>circle</WellKnownName> <Fill> <CssParameter name="fill">#2b83ba</CssParameter> <CssParameter name="fill-opacity">1.0</CssParameter> </Fill> <Stroke> <CssParameter name="stroke">#232323</CssParameter> <CssParameter name="stroke-width">1</CssParameter> <CssParameter name="stroke-opacity">0.3607843137254902</CssParameter> </Stroke> </Mark> <Opacity>1.0</Opacity> <Size>7.142857142857142</Size> <Rotation>0.0</Rotation> </Graphic> </PointSymbolizer> </Rule> </FeatureTypeStyle> </UserStyle> </NamedLayer> </StyledLayerDescriptor> |
Legenda.
Het plaatje van de legenda staat in de map “legenda_afbeeldingen”.
Inline legenda.
Deze kun je toevoegen op het niveau van de themakaart, bij configuratie.
De kaart ziet er dan ongeveer zo uit.
Dashboard toevoegen
We voegen het dashboard toe aan de kaartlaag “Containers” in het kaartlaag menu zie je het menu item “Dashboards”.
Open de “Dashboards” configuratie pagina.
Klik op “Dashboard toevoegen”.
In het onderstaande scherm kan je bepalen hoe het dashboard werkt. Er zijn twee grafiek type, taartgrafieken en staafgrafieken. Deze groepeer je op een attribuut en kan je sommeren op aantal, som of gemiddelde.
Er staan op de volgende twee pagina’s 6 uitgewerkte dashboard configuraties. Hieruit kunnen er maximaal 5 worden toegevoegd. Eenmaal toegevoegd komen de dashboards automatisch beschikbaar bij de kaart instellingen > Zijbalken. Daar kunt u de dashboards naar keuze in het linker of het rechter zijpaneel plaatsen.
En daar kan ook de volgorde nog aangepast worden naar wens.
Dashboard “Type container”
Titel | Type container | |
Grafiektype | Taartgrafiek | |
Groeperen op | type_conta | |
Sommeer op | Aantal | |
Velden | objectid_1 |
Dashboard “In gebruikname container”
Titel | In gebruikname container | |
Grafiektype | Staafgrafiek | |
Groeperen op | jaar_in_ge | |
Sommeer op | Aantal | |
Velden | objectid_1 |
Dashboard “Soort container”
Titel | Soort container | |
Grafiektype | Taartgrafiek | |
Groeperen op | soort_cont | |
Sommeer op | Aantal | |
Velden | inhoud |
Dashboard “Container ophaalsysteem”
Titel | Container ophaalsysteem | |
Grafiektype | Staafgrafiek | |
Groeperen op | ophaalsyst & type_conta | |
Sommeer op | Aantal | |
Velden | objectid_1 |
Dashboard “Afvalstroom”
Titel | Afvalstroom | |
Grafiektype | Taartgrafiek | |
Groeperen op | afvalstroo | |
Sommeer op | Aantal | |
Velden | inhoud |
Dashboard “Met pasje”
Titel | Met pasje | |
Grafiektype | Taartgrafiek | |
Groeperen op | pasje | |
Sommeer op | Aantal | |
Velden | objectid_1 |
Bekijk het resultaat
Bekijk het dashboard door de kaart te openen.
Probeer de widgets eens te bedienen. Ze kunnen open en dicht geklapt worden en geven ook detail informatie als je met de muis op of over de widget navigeert.
Is het dashboard niet duidelijk of slecht leesbaar? Dan is het goed om te weten dat de kleuren overgenomen worden uit het thema dat je op de kaart toepast. Is er geen thema op de kaart toegepast dan worden de standaard kleuren gebruikt. Dit is verder niet uitgewerkt puur ter informatie bedoeld.
Als je deze aanpast wijzigt ook de kleur van de dashboards.