Cafés in Groningen

100%

Cafés in Groningen

✓ Published0🌍 Public

Last edited Aug 12, 2016

Created on Aug 12, 2016

The visualization shows all cafés located within the administrative area of Groningen, using OpenStreetMap data to map their positions as clickable markers with pop-up name labels. It begins by displaying the geographic context of the city before highlighting the distribution of café locations. The code constructs a Leaflet map and queries the Overpass API for nodes tagged with `amenity=cafe` inside the Groningen boundary. The response is converted from OSM XML to GeoJSON using the `osmtogeojson` library, then rendered as a vector layer via `L.geoJson`, with the map view automatically fitting to the café bounds.

AI-generated description

Similar vizzes

Loading thumbnail…

Groninger gemeenten

The visualization displays the municipalities of the Dutch province of Groningen as an interactive SVG map. It uses D3.js v4 to render geographic paths from GeoJSON data, while Turf.js rewinds the polygon coordinates to ensure correct orientation. The map is projected with `d3.geoMercator` and fitted to the viewport using `projection.fitSize`. Hovering over a municipality triggers a tooltip with the municipality name, and the `path:hover` CSS rule highlights the area in orange. Boundary data originates from the PDOK WFS service, fetched via a URL with a CQL filter for selected gemeenten.

FFrieseWoudloper

75% match

Loading thumbnail…

Groninger gemeenten

The visualization displays the municipalities of the Dutch province of Groningen as a static choropleth-free map. It shows the boundaries and spatial arrangement of twelve named gemeenten, including Groningen, Delfzijl, and Oldambt. The map uses the d3.geoMercator projection and d3.geoPath to render GeoJSON features fetched from an ArcGIS REST service (ESRI’s Levende Atlas), with the projection fitted to the viewport via projection.fitSize. The SVG is sized responsively with a viewBox attribute. No interactive elements or color encodings are present beyond the default black vector paths.

FFrieseWoudloper

73% match

Loading thumbnail…

Groninger gemeenten

This map shows the municipalities of the northern Netherlands, with each municipality rendered as an SVG path using D3 v4 and TopoJSON data. The map uses a Mercator projection fitted to the viewport. Hovering over a municipality triggers a tooltip that displays the municipality’s name, creating an interactive way to explore the region. The visualization is built with D3.js and TopoJSON, with the geographic data processed in Mapshaper.

FFrieseWoudloper

72% match

Loading thumbnail…

Groninger gemeenten

This example visualizes the municipalities of the Dutch province of Groningen as a static SVG map. It shows the administrative boundaries of twelve selected gemeenten, using a Mercator projection fitted to the viewport. The visualization loads GeoJSON data from a PDOK WFS service, which provides the official administrative borders. The code uses D3 v4 with `d3.geoMercator` for projection and `d3.geoPath` to generate the SVG paths, appending a single `<path>` element per municipality within a 700×400 viewBox.

FFrieseWoudloper

71% match

Loading thumbnail…

Gist 3d7c0da4efc292e95700cda51537747d

This map visualizes the twelve municipalities of the Dutch province of Groningen, showing their boundaries as empty polygons with no fill. It uses a D3 v4 geoMercator projection centered on the province, with each municipality rendered as an SVG path element. The geographic data comes from the PDOK WFS service, requested as GeoJSON via d3.json. The map applies a gray stroke to outline each municipality, while intentionally leaving the polygons unfilled to emphasize the administrative borders over any thematic data.

FFrieseWoudloper

69% match

Loading thumbnail…

Neighbourhoods in the Province of Groningen

The map shows neighbourhoods in the province of Groningen, coloured by population density (BEV_DICHTH). Each district is represented as a vector polygon with a fill colour that encodes density, likely using a sequential colour scale. The map is rendered as an SVG from a GeoJSON file containing multipolygon geometries and attribute data, where the visualization draws the boundaries of each neighbourhood and colours them according to the density values. The overall design appears to be a straightforward choropleth map, focusing on the spatial distribution of population density across the province’s neighbourhoods.

FFrieseWoudloper

68% match

Loading thumbnail…

Groninger gemeenten

This example visualizes the municipalities of the Dutch province of Groningen using D3.js. The map is generated from multiple TopoJSON files (with and without bounding boxes, and with different quantization parameters) that were created with FME Desktop 2019. Due to mixed winding orders of the polygons, the initial rendering shows a rectangle instead of the correct municipality boundaries. The visualization demonstrates the impact of winding order and TopoJSON preprocessing on geographic data rendering. By comparing the different file versions, viewers can observe how the bounding box and the right-hand rule (Orientator transformer) affect the final output. The map displays the municipalities in the northern Netherlands, with the D3 code provided in index.html. A key challenge highlighted is the need for consistent polygon winding order to ensure correct D3.js visualization.**Title:** Groninger gemeenten **Description:** This visualization demonstrates a common pitfall in geographic data processing: winding order in polygon coordinates. The map displays the municipalities in the northern Netherlands, but due to mixed winding orders in the polygon definitions, D3.js renders a solid rectangle instead of the expected municipal boundaries. The author created four TopoJSON variants using FME Desktop 2019—with and without bounding boxes, and with different quantization parameters—to isolate the winding order issue. The accompanying `index.html` file contains the D3.js code used to visualize the files and reproduce the problem. This example is particularly useful for developers working with TopoJSON and D3.js, illustrating how winding order can affect rendering and how data preprocessing choices influence the final output. Source: [gist by FrieseWoudloper](https://gist.github.com/FrieseWoudloper)

FFrieseWoudloper

66% match

Loading thumbnail…

Voorbeeld 1

This example shows interactive maps of the Netherlands, centered on Groningen, with a marker and popup identifying the Martinitoren. It demonstrates three versions of Leaflet-based mapping: the first displays a standard tile layer; the second adds a layer control to switch between five Dutch base maps (standaard, grijs, pastel, water, luchtfoto); the third uses a custom projected coordinate system (EPSG:28992) via Proj4Leaflet to load an OpenTopo background tile layer. The code uses Leaflet’s tile layer, marker, popup, and control layers, with tile sources from PDOK and OpenTopo.

FFrieseWoudloper

65% match