Hello OpenLayers

100%

Hello OpenLayers

✓ Published1🌍 Public

Last edited Mar 4, 2020

Created on Mar 4, 2020

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.

AI-generated description

OpenLayers with React Starter code.

MIT Licensed

Similar vizzes

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

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

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

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

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

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

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

74% match

Loading thumbnail…

Untitled

This example displays a Leaflet map centered on a coastal area, with several vector layers added programmatically. It shows a GeoJSON polygon and point rendered via `L.geoJson`, alongside a marker, a red circle, and a polygon created with `L.marker`, `L.circle`, and `L.polygon`. The map uses a MapTiler Voyager tile layer with CARTO and OpenStreetMap attribution. Popups are bound to each shape, with the marker’s popup opened by default, demonstrating basic interactive map layers in a React-agnostic HTML setup.

Ccharliemok

70% match