Skip to main content
SimilarExport ZIP
100%

OpenLayers Dark Basemap High DPI

✓ Published1🌍 Public
CCurran Kelleher
Last edited Aug 29, 2020
Created on Aug 29, 2020

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.

AI-generated description

OpenLayers with React Starter code.

Additional features:

MIT Licensed

Similar vizzes

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
89% match
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
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
83% 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
82% match
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
82% 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
80% 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
76% match
Loading thumbnail…

worldmap-dpka

A stylized world map displays country borders and graticules atop a sphere, rendered as SVG through React. The visualization loads country polygons from the World Atlas TopoJSON dataset, applying `d3.geoNaturalEarth1` projection and `d3.geoPath` to draw landmasses, interiors, and graticules. Distinct CSS colors style the land, ocean sphere, country boundaries, and graticule lines, with the sphere filled in a light teal and borders in contrasting tones.

DDeepikaGoud08
67% match