PZH wms sld test

Gist b4906c8537f6ba2797c4

This example demonstrates how to filter Dutch spatial planning areas (bestemmingsplannen) by their legal status and geographic code, using an OGC Styled Layer Descriptor (SLD). The visualization shows only features where the plan status matches one of four values (concept, voorontwerp, ontwerp, vastgesteld) and where the plangebied identifier begins with "NL.IMRO.0053". The SLD employs an XML-based filter structure with `ogc:PropertyIsEqualTo` and `ogc:PropertyIsLike` to select specific map layers. The rendering relies on GeoServer or a deegree-based server interpreting the SLD, applying the filter to the `BP:Bestemmingsplangebied` layer, and drawing only the matching geometries.

73% match

ZONDER FITSIZE

This example visualizes Dutch administrative regions as a static SVG map, using geographic data from a national geodata service. It shows the shape and boundaries of municipal or regional divisions, rendered as a monochrome path layer. The code fetches GeoJSON directly from the service’s WFS endpoint via `d3.json`, then projects it with `d3.geoMercator` and draws each feature using `d3.geoPath` within a D3 v4 selection. The visualization relies entirely on D3’s geographic and selection APIs, with no additional interactivity or animation, and displays the result in an SVG container with a fixed viewBox.

62% match

Zonder turf in d3v3

This example shows a choropleth-style map of Dutch arrondissements, with hover highlighting in orange and a tooltip. It uses D3 v3 with a Mercator projection and `d3.geo.path()` to render GeoJSON features as SVG paths. The map loads data from a public WFS service, styling regions with light gray fills and white strokes. The code explicitly sets the projection’s translate but leaves the scale at its default, so the map may appear cropped or misaligned. A CSS tooltip is defined but not implemented in the script.

62% match

ZONDER TURFFFFF

This example displays a static map of Dutch arrondissementsgebieden (judicial districts) for 2019, rendered as SVG paths using D3 v4. It shows the geographic boundaries of these administrative regions, projected with a Mercator projection and fitted to a 700×400 viewport. The code fetches GeoJSON data from a Dutch national geodata WFS service, then uses `d3.geoPath` and `d3.geoMercator` to draw the features. The visualization emphasizes the shape and relative location of the districts without interactive or animated elements.

62% match

A basic map with MapboxGL.js

This example shows a basic interactive map of the Netherlands, displaying earthquake data as colored circles and extruded 3D buffers. The map uses MapboxGL.js v0.44.0 to render vector tiles from the PDOK topotiles service and GeoJSON point and buffer data from GitHub. Circle radius and fill-extrusion heights are interpolated based on zoom level, while colors are assigned categorically by earthquake type. The code defines a full Mapbox style object inline, including sources, layers, and paint properties.

NNieneB

Gist 88815dae2f6167aea4e388194e61857a

This example shows a choropleth-style map of Dutch police districts, with hover interactions that reveal the district name in a tooltip. The visualization loads geographic boundary data from a national geo-service via WFS, processes it with Turf.js to rewind polygon coordinates, and renders it as SVG paths using D3’s geoMercator projection and geoPath. Hovering a district turns it orange and displays a floating label, while mouseout fades the tooltip away. The code relies on D3 v3 for SVG manipulation and event handling, with Turf.js for geometry correction before projection.

Gist dbbbf5036a38b2eb912d97805615c7f5

This visualization displays a single choropleth-style map of the Netherlands, showing generalized administrative regions for 2019. It uses a Mercator projection to render geographic boundaries as SVG paths. The code relies on D3.js v3, specifically `d3.geo.mercator` for projection and `d3.geo.path` to draw the shapes, while fetching GeoJSON data from the Dutch national geodata WFS service. The map is rendered on a 1200×500 pixel canvas with no additional styling or interaction.

A basic map with MapboxGL.js

This interactive web map visualizes earthquake locations in the Netherlands, distinguishing between induced and tectonic events through color-coded circles whose size scales with zoom level. Built with MapboxGL.js, the map overlays GeoJSON point data onto vector tiles from PDOK, incorporating Dutch administrative boundaries, urban areas, and place labels from the same source. The custom style file defines categorical circle colors, zoom-dependent radius stops, and three label priority layers, while the HTML page sets initial camera position, pitch, and bearing.

NNieneB