Skip to content
This repository has been archived by the owner. It is now read-only.
OpenLayer React Components
TypeScript JavaScript CSS HTML
Branch: master
Clone or download

Latest commit

Latest commit 7c85125 Dec 27, 2019

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app fixed 404 links, and updated typescript and webpack Dec 27, 2019
dist fixed 404 links, and updated typescript and webpack Dec 27, 2019
src fixed 404 links, and updated typescript and webpack Dec 27, 2019
.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-lock.json 0.3.0 Dec 27, 2019
package.json 0.3.0 Dec 27, 2019
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)
You can’t perform that action at this time.