TypeScript JavaScript CSS HTML
Clone or download
Permalink
Failed to load latest commit information.
app doc and prop cleanup May 12, 2017
dist 0.2.1 Apr 11, 2017
src overlay popup close fix May 21, 2017
.gitignore first workign Typescript/React Feb 20, 2017
.npmignore first workign Typescript/React Feb 20, 2017
CHANGELOG.md 0.2.0 Apr 9, 2017
README.md Fix typo Jan 8, 2018
TODO.md 0.1.13 Mar 23, 2017
package.json Add type def for whatwg-fetch May 12, 2017
tsconfig.json issue #2, added VectorTile with an example Mar 18, 2017
webpack.config.js 0.1.9 Mar 14, 2017

README.md

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)