https://github.com/tcallsen/react-func-openlayers

A sample application that demonstrates how to integrate OpenLayers with React Functional Components.
https://github.com/tcallsen/react-func-openlayers

gis openlayers react

Last synced: 3 months ago
JSON representation

A sample application that demonstrates how to integrate OpenLayers with React Functional Components.

• Host: GitHub
• URL: https://github.com/tcallsen/react-func-openlayers
• Owner: tcallsen
• Created: 2020-09-10T21:16:06.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2024-11-25T14:28:31.000Z (over 1 year ago)
• Last Synced: 2024-11-25T15:30:16.233Z (over 1 year ago)
• Topics: gis, openlayers, react
• Language: JavaScript
• Homepage: https://taylor.callsen.me/using-openlayers-with-react-functional-components/
• Size: 822 KB
• Stars: 50
• Watchers: 4
• Forks: 25
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Using OpenLayers with React Functional Components and Hooks

Here is a sample application that demonstrates how to integrate OpenLayers with React Functional Components including:

* creating a wrapper component ([MapWrapper.js](./src/components/MapWrapper.js))

* using hooks to initialize the map and add features from props

* get/set component state from within an OpenLayers event handler using refs

* Fetch and parse GeoJSON features from a mock API (done inside [App.js](./src/App.js))

![An example application featuring OpenLayers and React Functional Components](https://taylor.callsen.me/wp-content/uploads/2020/09/tcallsen-react-function-openlayers-example-sept-2020.jpg "An example application featuring OpenLayers and React Functional Components")

## Install

Install the dependencies with the following command:

```

nvm use

npm install

```

## Launch with Development Server

To run a development build and launch the development server, execute:

`npm start`

Once completed, the app should be avialable from http://localhost:3000/

## Development Environment

This application was developed using create-react-app, with Node version `v22.11.0`

## Supplemental Blog Post

Here is a blog post I created that explains the integration in further detail: [https://taylor.callsen.me/using-openlayers-with-react-functional-components/](https://taylor.callsen.me/using-openlayers-with-react-functional-components/)