Skip to main content
100%

Gist bdb9a7efbe3ac42b6ad2

✓ Published0🌍 Public
ZZeukkari
Last edited Nov 13, 2015
Created on Nov 13, 2015

This example combines React with OpenLayers to build an interactive map preview for Geoserver, integrated through the City of Helsinki’s geoserver-preview project. It uses the `react-leaflet` and `ol3-react-example` patterns to render map layers, with state managed via Redux and connected through `react-redux`’s `Provider` and `connect`. The code references Bower for client-side component management and CoffeeScript with React (Cjx). Data comes from Helsinki’s open API endpoints, displaying tile layers and feature vectors, though the planned click-to-inspect vector content is not yet implemented.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 6cd6fea1125bc0e25597996d418bc20d

This example shows a React application that displays a Google Map centered on a specific location, with markers loaded from an external JSON file and rendered using the `react-google-maps` library. It also includes a separate "Places" component that fetches employee data from another JSON file via `axios` and lists their first names. The map uses the `GoogleMapLoader` and `GoogleMap` components, with custom marker icons, while the places list demonstrates asynchronous data fetching and state management. The visualization combines geographic positioning with a simple text-based list, illustrating how to integrate map and non-map data in a single React interface.

CCKschneid
72% 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
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
69% match
Loading thumbnail…

React world map

This example presents an interactive world map built with React and rendered as SVG. The map displays landmasses in dark green, with country borders and graticule lines overlaid. The visualization uses D3’s `geoNaturalEarth1` projection and `geoPath` to draw geographic features, while the `topojson` library’s `feature` and `mesh` functions process the source data from the world-atlas TopoJSON file. The React component structure separates data loading, map assembly, and SVG rendering.

SSuperShreejit
69% match
Loading thumbnail…

React Starter

This example shows how to fetch and display geospatial data in a React component. It loads a TopoJSON topology of world land from the `world-atlas` package using the Fetch API, then passes the result to React’s `useState` hook for storage. The `useEffect` hook triggers the asynchronous data retrieval, and the fetched topology is rendered as raw text inside a `<pre>` element. The code relies on React’s state and lifecycle management rather than any mapping or visualization library, so no chart is drawn.

MMaciek Sitkowski
68% match
Loading thumbnail…

Mapping : Part 2 - Cities

This example visualizes worldwide cities as semi-transparent teal dots layered over a natural Earth projection map. It uses d3.geoNaturalEarth1 and d3.geoPath to render landmasses, graticules, and interior boundaries from the world-atlas TopoJSON dataset, while city coordinates are plotted via d3.csv from a cleaned world cities dataset. The React component fetches both data sources asynchronously using useEffect, then projects each city’s longitude and latitude into SVG circles with fixed pixel radii.

Zzeeeeem
68% 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
68% 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
68% match