ro

react-openlayers

OpenLayer React Components

Showing:

Popularity

Downloads/wk

475

GitHub Stars

176

Maintenance

Last Commit

2yrs ago

Contributors

6

Package

Dependencies

5

Size (min+gzip)

221.2KB

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Reviews

Average Rating

1.0/51
Read All Reviews

Top Feedback

1Poor Documentation
1Hard to Use
1Abandoned

Readme

react-openlayers

A minimal React wrapper of OpenLayers 3+ written in TypeScript

image

Install

npm install react-openlayers --save-dev

Usage

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

Example

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

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

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 https://github.com/allenhwkim/react-openlayers.git
$ 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)

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation1
Hard to Use1
Slow0
Buggy0
Abandoned1
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial