webmap-sdk

    2.8.5 • Public • Published

    Webmap SDK

    Logo

    Travis CI Status Coverage Status License

    Javascript SDK based on React, OpenLayers and Redux.

    Getting started with SDK

    This guide walks through the steps necessary to create a new React-Redux project that will feature maps through SDK.

    Please use nvm

    The Node Version Manager provides a clean and easy way to keep different versions of NodeJS installed simultaneously.

    Install yarn

    Yarn is yet another node package manager. However, it offers a number of performance features over npm.

    npm install -g yarn

    Initialize the new app

    npx create-react-app sdk-starter
    cd sdk-starter
    

    Add the app dependencies

    SDK-based apps do require additional dependencies. These include Redux for managing state.

    yarn add redux react-redux ol ol-mapbox-style
    

    Add sass support

    Follow the instructions here.

    Installing SDK

    Only one of the following techniques are needed for installing the SDK.

    From npm

    This is the standard way of installing SDK. It is appropriate for those looking to develop a quick SDK app and do not need the latest features from the master branch.

    It will install the dist-version of the library.

    yarn add webmap-sdk

    Add a basic map:

    Add SDK Sass to the project

    In your favorite editor open src/App.scss. On the first line add:

    @import "webmap-sdk/stylesheet/sdk.scss";

    Import SDK and Redux

    Open src/App.js in your favorite editor. After the line import './App.scss';, add the following imports:

    import { createStore, combineReducers } from 'redux';
    import { Provider } from 'react-redux';
    import SdkMap from 'webmap-sdk/components/map';
    import SdkMapReducer from 'webmap-sdk/reducers/map';
    import * as SdkMapActions from 'webmap-sdk/actions/map';

    Change from Functional Component to ES6 Class

    Create react ap uses Functional Components which will work with SDK, this tutorial and most examples use ES6 Classes

    Change the App function to a ES6 Class

    function App() {

    becomes

    class App extends React.Component {

    Add a render function

    return (
        <div className="App">
        ...
        ...
        </div>
    );

    to

      render() {
        return (
          <div className="App">
          ...
          </div>
        );
      }

    Create a new store with the map reducer.

    After the imports add a store with the SdkMapReducer:

    const store = createStore(combineReducers({
      'map': SdkMapReducer,
    }));

    Configuring the initial map

    The map configuration needs to happen outside of the render() method. render() will be called every time a prop or state element is changed and this would cause map layers to be added repeatedly causing ill effects. However, componentDidMount is only called once, after the component has been mounted.

    After class App extends Component {, add the following lines:

      componentDidMount() {
        // add the OSM source
        store.dispatch(SdkMapActions.addOsmSource('osm'));
     
        // add an OSM layer
        store.dispatch(SdkMapActions.addLayer({
          id: 'osm',
          source: 'osm',
        }));
      }

    Add the map component to the application

    Remove the header part, and replace it with an SDK map:

      render() {
        return (
          <div className="App">
            <Provider store={store}>
              <SdkMap />
            </Provider>
          </div>
        );
      }

    Fire up the browser

    The create-react-app creates a built-in hot-compiler and server.

    yarn start

    Fin!

    Congratulations! You should have a fully operational Webmap SDK React app!

    Advanced

    From GitHub

    Instead of installing sdk from npm, you can also install it from github. This is the way to install SDK if the latest features are needed or development on SDK is planned.

    The following steps will clone SDK, install its dependencies, build the library, and finally add it to the app.

    cd ..
    git clone https://github.com/planetfederal/sdk
    cd sdk
    npm install
    npm run build:dist
    cd ../sdk-starter
    yarn add file:../sdk/dist

    Unit testing

    If you want to write unit tests in your application that use the SDK, make sure you have canvas installed as a devDependency. See here for more details.

    Keywords

    none

    Install

    npm i webmap-sdk

    DownloadsWeekly Downloads

    2

    Version

    2.8.5

    License

    Apache-2.0

    Unpacked Size

    353 kB

    Total Files

    45

    Last publish

    Collaborators

    • wnordmann