OpenLayers Dark Basemap

100%

OpenLayers Dark Basemap

✓ Published1🌍 Public

Last edited Mar 20, 2020

Created on Mar 20, 2020

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.

AI-generated description

OpenLayers with React Starter code.

Additional feature: muted background.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of OpenLayers Dark Basemap

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.

Mmanishcheruku

91% 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

91% 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

88% 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

84% match

Loading thumbnail…

OpenLayers Muted Basemap

This example shows a full-screen OpenLayers map with a muted basemap rendered inside a React component. The map uses a Stamen `toner-lite` tile source, and a CSS `opacity` filter on the basemap layer reduces its visual contrast. The `Cartography` component initializes an `ol.Map` and `ol.View` in a `useEffect` hook, setting the target to a div reference and cleaning up the map on unmount by calling `map.setTarget(null)`.

CCurran Kelleher

81% match

Loading thumbnail…

Hello OpenLayers

This example shows a simple interactive map displaying a Stamen toner-lite basemap using OpenLayers within a React functional component. The Cartography component uses a useRef hook to create a map target and a useEffect hook to initialize an ol.Map instance with an ol.View centered on specified coordinates. The Basemap export defines an ol.layer.Tile layer with an ol.source.Stamen source. React’s state management stores the map and view objects, and cleanup calls map.setTarget(null) to free resources when the component unmounts.

CCurran Kelleher

79% 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

72% match