react-openlayers
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.0 • Public • Published

    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)

    Install

    npm i react-openlayers

    DownloadsWeekly Downloads

    345

    Version

    0.3.0

    License

    MIT

    Unpacked Size

    7.91 MB

    Total Files

    118

    Last publish

    Collaborators

    • allenkim