node-sapa-gis-frontend

GIS frontend template.

Install

npm install --save node-sapa-gis-frontend

Usage

import React, { Component } from 'react'

import { GisMain } from 'node-sapa-gis-frontend'
import 'node-sapa-gis-frontend/dist/index.css'

class Example extends Component {
  render() {
    return <GisMain />
  }
}

Workspaces

Create your own workspace following the example below.

{
    name: 'name',
    displayLabel: 'Workspace',
    mapstyleUrl:"Url to map styles",
    mapAccessToken:"Access token for mapbox, if needed",
    mapDefaultCenter:{
        zoom: "Default map zoom",
        lat: "Default lattitude",
        lng: "Default longitude",
        bearing: "Default bearing",
        pitch: "Default pitch"
    },
    searchTypes: [
        {
            name: 'Keyword for searching',
            label: 'Display label',
            inputText: 'Text for input placeholder',
        }
    ],
    sideMenuItems:[]
}

Add new workspace with module controller

import { GisMain, moduleController as mc } from 'node-sapa-gis-frontend'

mc.addWorkSpace(wc);

Tools

Create your tool and add to your workspace following the example below. Add the "purpose" prop and set to "Toolset"

      <GisMain>
        <div purpose="Toolset" workspace="workspace1">
            <MyTool1/>
        </div>

        <div purpose="Toolset" workspace="workspace2">
            <MyTool2/>
        </div>
      </GisMain>

You can also use the default tools, like FullExtent, Inspector, PitchBearing, ZoomIn, ZoomOut, Ruler, ToCoord.

  import { GisMain, FullExtent, ZoomIn, ZoomOut }

      <GisMain>
        <div purpose="Toolset" workspace="workspace1">
            <FullExtent/>
            <ZoomIn/>
            <ZoomOut/>
        </div>
      </GisMain>

If you are creating your own instrument, follow a few rules: Your component MUST be a class component, this will allow the module to get a reference to your tool and operate on its methods. Your component MUST contain activate and deactivate methods, this will allow the module to turn off tools that are incompatible with each other.

class MyTool extends React.Component{
    activate(){
        // do something
    }

    deactivate(){
        // do nothing
    }

    render(){
        return(
            <div>MyTool</div>
        );
    }
}

Tools inconsistency

Some tools may be incompatible with each other, to indicate to the tool which tools cannot work with it, specify the inconsistency property in the component properties and pass an array of strings there, specify the tag name as an array element.

  <Inspector inconsistency={["MyTool1","MyTool2"]}></Inspector>
  <MyTool1 inconsistency={["Inspector"]}>
  <MyTool2 inconsistency={["Inspector"]}>

If your tool is "switchable", add the switchable property to the component and set the value to true

  <Inspector switchable={true}></Inspector>

If you are using the default tool, you do not have to specify these properties, as they are written in the default module.

Panels

Create your own panels with custom content. You can arrange them to the left or right. "workspace" prop for Panels and "name" prop for Panel are required.

  import { GisMain, Panels, Panel, moduleController }

  <GisMain>
    <div purpose="Panels" workspace="workspace1">
      <div purpose="Panel" name="Panel 1" placement="left">
        Your contents here...
      </div>
    </div>

    <div purpose="Panels" workspace="workspace2">
      <div purpose="Panel" name="Panel 2" placement="right">
        Your contents here...
      </div>
    </div>
</GisMain>

Then toggle panels with moduleController

moduleController.showPanel("Panel 1")
or
moduleController.hidePanel("Panel 1")

Top menu items

  import { GisMain, TopMenu }

  <GisMain>
    <div purpose="TopMenu" workspace="workspace1">
      <div>Item 1</div>
      <MyComp>My item</MyComp>
    </div>
</GisMain>

Search event

To add your search event:

  import { GisMain, moduleController as mc }

  mc.listeners.searchSubmitted(()=>{
    console.log(mc.searchData); //see user input data
    //do something
  })

Side menu items

Add side menu items, navigate trough them.

  import { moduleController as mc }

  mc.addSideMenuItem({
    id:"id",
    name:"Main",
        content:"Some content"
  }, "workspace");

Methods available for side menu are: addSideMenuItem(item, "workspace"), goToMenuItemId(id), removeSideMenuItemId(id). If data for menu items loads from request results, toggle loading for side menu via sideMenuLoadingOn(), sideMenuLoadingOff(). First added menu item counted as "initial" and will stay in side menu on workspace switch.

Module controller and Map controller

You can get access to some functionality of the module through the moduleController, and its map through the moduleMap. The map is based on the mapbox gl js. So its API is accesible from moduleMap. You can also get mapboxgl module itself.

  import { GisMain, moduleController, moduleMap, mapboxgl }

  moduleMap.zoomIn();
  var marker = new mapboxgl.Marker();

For any additional options for mapbox gl js map, use

  moduleController.addMapOptions({ optName: value });

For rerender map after it was unmount, for example, use

  moduleController.renderMap();

License

MIT © partyharding