GIS frontend template.
> GIS frontend template.
 
``bash`
npm install --save node-sapa-gis-frontend
`jsx
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
}
}
`
`jsx
{
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 controllerjsx
import { GisMain, moduleController as mc } from 'node-sapa-gis-frontend'
mc.addWorkSpace(wc);
`
`jsx
You can also use the default tools, like FullExtent, Inspector, PitchBearing, ZoomIn, ZoomOut, Ruler, ToCoord.
jsx
import { GisMain, FullExtent, ZoomIn, ZoomOut }
`
jsx
`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.
jsx
class MyTool extends React.Component{
activate(){
// do something
} deactivate(){
// do nothing
}
render(){
return(
MyTool
);
}
}
`
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.jsx
`If your tool is "switchable", add the switchable property to the component and set the value to true
jsx
`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.
jsx
import { GisMain, Panels, Panel, moduleController }
`
jsx
Your contents here...
Your contents here...
`
Then toggle panels with moduleController
jsx
moduleController.showPanel("Panel 1")
or
moduleController.hidePanel("Panel 1")
`Top menu items
jsx
import { GisMain, TopMenu }
`
jsx
Item 1
My item
`Search event
To add your search event:
jsx
import { GisMain, moduleController as mc }
`
jsx
mc.listeners.searchSubmitted(()=>{
console.log(mc.searchData); //see user input data
//do something
})
`Side menu items
Add side menu items, navigate trough them.
jsx
import { moduleController as mc }
`
jsx
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.jsx
import { GisMain, moduleController, moduleMap, mapboxgl }
`jsx
moduleMap.zoomIn();
var marker = new mapboxgl.Marker();
`For any additional options for mapbox gl js map, use
jsx
moduleController.addMapOptions({ optName: value });
`For rerender map after it was unmount, for example, use
jsx
moduleController.renderMap();
``MIT © partyharding