MapGallery GeoStyler kookboek
Vlakken
Voor deze handleiding over de styling van de vlakken is gebruik gemaakt van de dataset molens en vuurtorens. Deze zijn te vinden in het nationaal georegister van PDOK. Aan de hand van deze dataset zullen enkele voorbeelden gegeven worden van de stylingsmogelijkheden. Alle simpele styling voorbeelden zijn onderdeel van de “genereer style” functie in MapGallery. Vervolgens worden de geavanceerde stylingopties besproken.
Simpele styling
Simpel vlak
{
"name": "",
"rules": [
{
"name": "Sluizen",
"filter": ["==", "$type", "Polygon"],
"symbolizers": [
{
"kind": "Fill",
"color": "#47bea3",
"opacity": 1,
"outlineColor": "black",
"outlineWidth": 2,
"outlineOpacity": 1
}
]
}
]
}
De code hierboven is het resultaat van het genereren van een eenvoudige vlak weergave in MapGallery. Binnen rules zijn de stylingsregels beschreven. In de filter is gekozen voor alle geometrieën van het type "Polygon".
- Het type symbool is "fill", ofwel een vlak op de kaart.
- De kleur #47bea3 in hex notatie, de code begint met # gevolgd door 6 tekens, bestaande uit drie paren, die respectievelijk de intensiteit van rood, groen en blauw (RGB) weergeven. Maar de basiskleuren worden ook herkend zoals red, green, indigo ect. Naast een hex code kunnen deze manieren ook: RGB, RGBA, HSL, HSLA en de 140 vooraf gedefinieerd HTML kleuren (zoals "yellow", "darkblue" en "tomato")
- De opacity bepaald de transparantie van het vlak.
- De outlineColor, ofwel de omlijning is zwart. Hierbij kan je gebruik maken van de zelfde kleur opties als bij de kleur van de vlak.
- De outlineWidth bepaald de dikte van de omlijning.
- De outlineOpacity bepaald de transparantie van de omlijning.
Vlakken met labels
{
"name": "",
"rules": [
{
"name": "Sluizen PDOK",
"filter": ["==", "$type", "Polygon"],
"symbolizers": [
{
"kind": "Fill",
"color": "#9015b2",
"opacity": 1,
"outlineColor": "black",
"outlineWidth": 2,
"outlineOpacity": 1
}
]
},
{
"name": "Name",
"symbolizers": [
{
"kind": "Text",
"size": 12,
"color": "#111111",
"label": { "args": ["name"], "name": "property" },
"offset": [0, 2],
"haloColor": "#FFFFFF",
"haloWidth": 1
}
]
}
]
}
Naast het gebruik van vlakken kan er ook informatie weergeven worden met labels. Hier is gekozen voor gebruik van het veld "Name" voor de inhoud van de labels.
- De name bepaald hoe het label heet in de legenda, dit kan naar smaak aangepast worden. Size en color kunnen net als bij de andere vlakken aangepast worden.
- Bij “args”, na label: word het veld opgegeven voor de inhoud van de labels, in dit geval ["Name"]
- Onder offset word de afstand het label tot het vlak bepaald.
- De labels hebben ook een omlijning of zogeheten gloed, de kleur en grootte hiervan word bepaald met haloColor en haloWidth.'
Styling op categorie
{
"name": "",
"rules": [
{
"name": "Boezempeil",
"filter": ["==", "referencelevelbebu", "Boezempeil"],
"symbolizers": [
{
"kind": "Fill",
"color": "#C8A2C8",
"opacity": 1,
"outlineColor": "black",
"outlineWidth": 2,
"outlineOpacity": 1
}
]
},
{
"name": "Kanaalpeil",
"filter": ["==", "referencelevelbebu", "Kanaalpeil"],
"symbolizers": [
{
"kind": "Fill",
"color": "#b752f8",
"opacity": 1,
"outlineColor": "black",
"outlineWidth": 2,
"outlineOpacity": 1
}
]
},
{
"name": "Meerpeil",
"filter": ["==", "referencelevelbebu", "Meerpeil"],
"symbolizers": [
{
"kind": "Fill",
"color": "#79d825",
"opacity": 1,
"outlineColor": "black",
"outlineWidth": 2,
"outlineOpacity": 1
}
]
}
]
}
Het is mogelijk om aparte vlakken te genereren voor verschillende categorieën. Voor de sluizen dataset is in dit voorbeeld gekozen voor styling op het veld "referencelevelbebu". Het gewenste veld kan geselecteerd worden wanneer men “Weergave op categorie” selecteert binnen het de genereer style functie. Qua code verschilt er niet veel met voorgaande voorbeelden, behalve dat deze dan uit opeenvolgende blokken bestaat met een verschillende filterwaarde voor het veld "referencelevelbebu". Let op, de voorbeeldcode beslaat alleen de eerste 3 types van de categorie.
Note
Als er geen velden staan onder het dropdown menu van 'Categorie veld'. Zorg dan dat bij het tabje “Velden” het aanpassen van velden is aangevinkt.
Geavanceerde styling
Geavanceerde labels
{
"name": "",
"rules": [
{
"name": "PDOK - Grenzen Omgevingsdiensten",
"filter": ["==", "$type", "Polygon"],
"symbolizers": [
{
"kind": "Fill",
"color": "#7561b8",
"opacity": 0.5,
"outlineColor": "white",
"outlineWidth": 2,
"outlineOpacity": 1
}
]
},
{
"name": "Od naam",
"symbolizers": [
{
"font": ["georgia"],
"kind": "Text",
"size": 12,
"color": "#000000",
"label": { "args": ["od_naam"], "name": "property" },
"offset": [0, 0],
"rotate": -25,
"opacity": 1,
"haloColor": "#FFFFFF",
"haloWidth": 1
"allowOverlap": false
}
]
}
]
}
Deze labels zijn geavandeerder, met meer optie voor persoonlijke voorkeur. Een groot gedeelte komt overeen met de simpele styling van labels. Hieronder worden de verschillende mogelijkheden uitgelegd:
- Door een font te kiezen wordt het lettertype van het label aangepast. Dit zijn de mogelijke lettertypes die worden ondersteund:
- Arial
- Verdana
- Sans-serif
- Courier New
- Lucida Console
- Monospace
- Times New Roman
- Georgia
- Serif
- Rotate zorgt ervoor dat de tekst schuin staat. "0" betekend dat de tekst recht blijft, bij "100" staat de tekst verticaal. Negatieve getallen zijn ook mogelijk.
- De opacity bepaald de transparantie/doorzichtigheid. "1" is normaal en "0" is onzichtbaar.
- De optie allowOverlap bepaalt of de labels elkaar mogen overlappen. Als overlappen niet is toegestaan, verschijnen alle labels pas bij verder inzoomen op de kaart. Als overlappen wel is toegestaan, kunnen sommige labels onzichtbaar zijn doordat ze elkaar bedekken.
Atribute-based vlakken
{
"name": "Aantal inwoners",
"rules": [
{
"name": "Klein",
"filter": ["<", "aantalInwoners", 5000],
"symbolizers": [
{
"kind": "Fill",
"color": "red",
"opacity": 1,
"outlineColor": "black",
"outlineWidth": 2,
"outlineOpacity": 1
}
]
},
{
"name": "Middel",
"filter": [
"&&",
[">=", "aantalInwoners", 5000],
["<", "aantalInwoners", 10000]
],
"symbolizers": [
{
"kind": "Fill",
"color": "orange",
"opacity": 1,
"outlineColor": "black",
"outlineWidth": 2,
"outlineOpacity": 1
}
]
},
{
"name": "Groot",
"filter": [">=", "aantalInwoners", 10000],
"symbolizers": [
{
"kind": "Fill",
"color": "yellow",
"opacity": 1,
"outlineColor": "black",
"outlineWidth": 2,
"outlineOpacity": 1
}
]
}
]
}
Deze stijl definieert hoe punten op een kaart worden weergegeven op basis van het jaartal van "jaar_van_ingebruikstelling"
- Klein → gele vlakken (tot 5.000 inwoners)
- ["<", "aantalInwoners", 5000]
- Middel → oranje vlakken (5.000 tot 10.000 inwoners).
- [">=", "aantalInwoners", 5000], ["<", "aantalInwoners", 10000]
- Groot → rode vlakken (vanaf 10.000 inwoners)
- [">=", "aantalInwoners", 10000]
Let op! Dit kan alleen worden gedaan als het datatype number is, anders kan deze styling niet.
Vlakken met offset
{
"name": "",
"rules": [
{
"name": "PDOK - CBS Bevolkingskernen 2021",
"filter": ["==", "$type", "Polygon"],
"symbolizers": [
{
"kind": "Fill",
"color": "blue",
"opacity": 0.7,
"outlineColor": "black",
"outlineWidth": 3,
"outlineOpacity": 1
},
{
"kind": "Line",
"color": "#AAAAAA",
"width": 3,
"perpendicularOffset": 2
},
{
"kind": "Line",
"color": "#AAAAAA",
"width": 3,
"perpendicularOffset": -2
}
]
}
]
}
Deze styling laat je een extra bufferlijn in het polygoon tekenen. In dit voorbeeld zijn twee buffers toegevoegd, aan zowel de binnen- als de buitenkant van de lijn een buffer getekend. Door "perpendicularOffset" aantepassen veranderd de buffer. Positieve waarden (bijv. 2) genereren een parallelle lijn aan de linkerkant en negatieve waarden (bijv. -2) aan de rechterkant.
Zichtbaar bij bepaald niveau
{
"name": "",
"rules": [
{
"name": "PDOK - CBS Bevolkingskernen 2021",
"filter": ["==", "$type", "Polygon"],
"symbolizers": [
{
"kind": "Fill",
"color": "tomato",
"opacity": 1,
"outlineColor": "gray",
"outlineWidth": 1,
"outlineOpacity": 1
}
],
"scaleDenominator": { "max": 700000 }
}
]
}
Als er heel veel vlakken zijn kan het zijn dat je die niet de hele tijd wil laten zien. Maar pas bij een bepaald schaal. Bij deze styling zijn de vlakken bij 1:700.000 niet meer zichtbaar ({ "max": 700000 }).