Fork of OpenLayers Dark Basemap

100%

Fork of OpenLayers Dark Basemap

✓ Published0🌍 Public

Last edited Aug 4, 2021

Created on Jul 29, 2021

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.

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

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

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

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

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

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

83% 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 MapLibre GL Starter

This example demonstrates a minimal interactive map centered on [8, 15] at zoom level 1, using a dark basemap style from MapTiler. The page loads MapLibre GL v1.13.0-rc.3 via unpkg, initializes a map through `new mapboxgl.Map`, and configures the container, style URL, center, and zoom. The map fills the viewport with absolute positioning, and CSS outlines the canvas with a focus-visible indicator for keyboard accessibility. No additional data layers or interactions are implemented beyond the base map display.

BBill Dullemond

71% match