React Openlayers

OpenLayer React Components
Alternatives To React Openlayers
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Awesome Echarts1,120
4 months ago4
Awesome list of Apache ECharts
React Geo310325 days ago188December 08, 202224bsd-2-clauseTypeScript
A set of geo related modules to use in combination with React, Ant Design and OpenLayers.
Ol3echarts2971223 months ago11September 26, 202217otherTypeScript
:earth_asia: :bar_chart: ol3Echarts | a openlayers extension to echarts
Geostyler194235 days ago80July 27, 202225bsd-2-clauseTypeScript
Generic Styler for geodata
React Openlayers1531234 years ago6December 27, 201916TypeScript
OpenLayer React Components
Rlayers1324a day ago37March 28, 202322iscTypeScript
React Component Library for OpenLayers
8 hours agomitJavaScript
Web Map Viewer built with React and OpenLayers. Built for GeoServer and ArcGIS Server.
React Map Components Maplibre72
13 days ago1mitTypeScript
A react component framework for declarative GIS application development.
Ol Kit71
a year ago228January 31, 20227otherJavaScript
Easy to use, open source React/Openlayers geospatial component toolkit.
Ol3 React Example62
8 years agomitJavaScript
Basic OpenLayers 3 + React example
Alternatives To React Openlayers
Select To Compare

Alternative Project Comparisons


A minimal React wrapper of OpenLayers 3+ written in TypeScript



npm install react-openlayers --save-dev


import {
  interaction, layer, custom, control, //name spaces
  Interactions, Overlays, Controls,     //group
  Map, Layers, Overlay, Util    //objects
} from "react-openlayers";


    <Map view={{center: [0, 0], zoom: 2}} onClick={showPopup}>
        <layer.Vector source={markers} style={} zIndex="1" />
          ref={comp => this.overlayComp = comp}
          element="#popup" />
      <Controls attribution={false} zoom={true}>
        <control.Rotate />
        <control.ScaleLine />
        <control.FullScreen />
        <control.OverviewMap />
        <control.ZoomSlider />
        <control.ZoomToExtent />
        <control.Zoom />
        <interaction.Select style={selectedMarkerStyle} />
        <interaction.Draw source={markers} type='Point' />
        <interaction.Modify features={markers.features} />

    <custom.Popup ref={comp => this.popupComp = comp}>

It strictly follows OpenLayers 3+ API documention

About Author

Allen Kim is the creator of ngmap and ng2-map.

If you like this, you may also like geo-coder.

To start

$ git clone
$ cd react-openlayers
$ npm install
$ npm start

List of available npm tasks

  • npm run : List all available tasks
  • npm start: Run app directory for development using webpack-dev-server with port 9001
  • npm run clean: Remove dist folder
  • npm run clean:dist: Clean up unnecessary dist folder within dist and app directory
  • npm run build:umd: Build UMD module react-openlayers.umd.js
  • npm run build:app: Build app/build/app.js for runnable examples
  • npm run build: Build all(build:ngc, build:umc, build:app, and clean:dist)
Popular Reactjs Projects
Popular Openlayers Projects
Popular Web User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.