Fork of OpenLayers Dark Basemap

100%

Fork of OpenLayers Dark Basemap

✓ Published0🌍 Public

Last edited Mar 3, 2023

Created on Mar 3, 2023

This example combines OpenLayers and D3 to create an interactive map with city data. The React component overlays D3-rendered circles, sized by death counts from a CSV dataset, onto an OpenLayers basemap using the Stamen toner-lite tiles. The map uses `ol.View` for panning and zooming, while `d3.geoNaturalEarth1` and `d3.geoPath` draw geographic features like land, graticules, and city points. The basemap is filtered with CSS to invert its colors and reduce opacity, producing a muted dark background.

AI-generated description

OpenLayers with React Starter code.

Additional feature: muted background.

MIT Licensed

Similar vizzes

Loading thumbnail…

OpenLayers Dark Basemap

This example combines OpenLayers and React to create an explorable dark-themed map. It uses a Stamen toner-lite basemap layered with D3.js cartographic elements, including a Natural Earth projection, geographic graticules, and circles sized to represent data points from a CSV dataset of city deaths. The map’s muted background is achieved through CSS filters that invert and reduce opacity, while OpenLayers manages panning and zooming.

GGino Dzin

91% match

Loading thumbnail…

Fork of OpenLayers Dark Basemap

This example shows a muted, inverted-toner map rendered with OpenLayers in a React component, using a Stamen toner-lite basemap that is styled through CSS filters (`invert(1) opacity(0.3)`) to create a dark cartographic background. The React `useEffect` hook initializes an `ol.Map` and `ol.View` with a specific center and zoom, and logs the updated zoom and center coordinates on every `moveend` event. It demonstrates integrating OpenLayers 6.2.1 with React 16, managing map lifecycle cleanup via `map.setTarget(null)`, and a custom `Basemap.js` layer built from `ol.layer.Tile` and `ol.source.Stamen`.

Wweldream

86% match

Loading thumbnail…

Fork of OpenLayers Dark Basemap

This example displays an interactive map using the Stamen Toner-Lite basemap, rendered through an OpenLayers map view integrated into a React component. The map initializes with a specific zoom level and center coordinate, and the `moveend` event logs the current view’s zoom and center to the console, demonstrating how to track navigation. The map is dynamically created in a React effect, attaching the tile layer to a `div` target, with cleanup that detaches the target on component destruction. The basemap layer uses a CSS filter to maintain a muted, inverted appearance.

CCarlos Augusto Ribeiro Mantovani

86% match

Loading thumbnail…

OpenLayers Dark Basemap

This example presents a world map using OpenLayers with a dark, muted aesthetic achieved by inverting and dimming the Stamen toner-lite basemap. The React component `Cartography` initializes an `ol.Map` and `View` with a fixed center and zoom level, adding the basemap as a single layer. The map logs its current center and zoom to the console whenever the view changes. The page styling uses a CSS gradient background and applies a filter to the basemap layer, creating a subdued, low-contrast backdrop for the geographic data.

CCurran Kelleher

82% match

Loading thumbnail…

OpenLayers Dark Basemap High DPI

This example demonstrates an interactive world map using OpenLayers with a React frontend, featuring a dark, low-contrast basemap ideal for overlaying data. It uses an XYZ tile source with Stamen toner-lite tiles served at 2x resolution to support high-DPI displays. The map’s styling applies a CSS filter (`invert(1) opacity(0.3)`) to the tile layer to achieve the muted dark appearance. State management tracks the map view, and the component logs zoom and center coordinates on every moveend event.

CCurran Kelleher

82% match

Loading thumbnail…

Fork of Firefly Cartography

This example visualizes cities with populations over 50,000 as glowing firefly-like sprites on a dark, inverted Stamen toner-lite basemap. Each point is rendered using OpenLayers vector layers with a custom canvas-generated circle sprite. The map is built with React and OpenLayers, while city data is loaded via d3.csv from a Simplemaps World Cities Database. The visualization uses a WebGL-capable canvas context for sprite generation, creating a striking contrast against the dark gradient background.

CChase Hall

77% match

Loading thumbnail…

Fork of Making a world map with city points React and D3

This example visualizes a world map with city points using React and D3. The map displays missing migrant incidents, with circle sizes representing the “Total Dead and Missing” metric via a d3.scaleSqrt. The geoNaturalEarth1 projection renders country boundaries, graticules, and interiors using d3.geoPath, while topojson provides the world-atlas data. City coordinates are projected and plotted as circles, with data loaded from a CSV using d3.csv. The SVG-based rendering uses React components for the atlas and marks.

Bblackbottt

76% match

Loading thumbnail…

Fork of World Map

This visualization displays a world map with a dark blue sphere and graticule, overlaid with country boundaries and circular city markers. It uses d3.geoEqualEarth, d3.geoPath, and d3.geoGraticule to project and render geographic features, while React manages the SVG elements. City coordinates from a CSV file are projected onto the map, and country outlines come from a world-atlas TopoJSON source. The map is rendered as an SVG using React components.

Ggayatrisridhar

75% match