[//]: <> (start placeholder for auto-badger)

:heart: to auto badger for making badging simple

Backlayer

The BackLayer (Open Layer Components Backend Driven) is a POC package that allows to build npm components dynamically, based on dictionaries taht are send through a backend engine. This package is used to help with the creation of Tethys plugins, so the backend part of the plugin (usually an intake driver) can reference a react UI component(which will use the backlayer package if any Open Layers capability is needed)

Prerequisites

This project requires NodeJS (version 8 or later) and NPM. Node and NPM are really easy to install. You can install the Node Version Manager and Node.js:

a. Install Node Version Manager (nvm) b. CLOSE ALL OF YOUR TERMINALS AND OPEN NEW ONES c. Use NVM to install Node.js 20

sh $ nvm install 20 $ nvm use 20 $ npm -v && node -v

Table of contents

• BackLayer
  • Prerequisites
  • Table of contents
  • Getting Started
  • Installation
  • Components
  • Map
  • View
  • Layer
  • LegendControl
  • LayersControl
  • OverLay
  • Authors
  • License

Getting Started

Installation

BEFORE YOU INSTALL: please read the prerequisites

Start with cloning this repo on your local machine:

sh $ git clone https://github.com/Aquaveo/backlayer.git $ cd backlayer

To install and set up the library, run:

sh $ npm install -S backlayer

Or if you prefer using Yarn:

sh $ yarn add --dev backlayer

Building a distribution version

sh $ npm run build

This task will create a distribution version of the project inside your local dist/ folder. The package uses Webpack to bundle the package

Components.

The backlayer package contains the following components:

• Map -> Component that represents ol/Map that wraps the other different other components
• View -> Component representing ol/view that takes a dictionary with the args that ol/view takes.
• Layer -> Component that consumes from an object to make any type of layer available in ol
• Layers -> Wrapper for the different Layer components
• Controls -> Wrapper for the different Control components
• LegendControl -> Component that creates a Legend given an object
• LayersControl -> Component that creates a layer switch component.
• Overlays -> Wrapper for the different Overlay components
• OverLay -> Component for ol/overlaythat takes an object with the args required by ol/overlay

Example:

```js import React, { memo } from 'react';

import { Map, View, Layer, Layers, Controls, LegendControl, LayersControl, Overlays, OverLay, } from 'backlayer';

import { DemoLayers, DemoViewConfig, DemoMapConfig, DemoLegend, DemoOverlays, } from 'backlayer/demo';

const MapComponent = ({ mapConfig = DemoMapConfig, viewConfig = DemoViewConfig, layers = DemoLayers, legend = DemoLegend, overlays = DemoOverlays, }) => { return ( ); };

export default memo(MapComponent); ```

Map

Example:

```js import { Map } from 'backlayer';

const demoMapConfig = { className: 'ol-map', style: { width: '100%', height: '100vh', }, }; ; ```

Please note that both the classname and style needs to be provided.

View

Example:

```js import { View } from 'backlayer';

const demoViewConfig = { center: fromLonLat([-110.875, 37.345]), zoom: 5, };

; ```

Please note that demoViewConfig can contain any option listed here

Layer

Example:

```js import { Layers, Layer } from 'backlayer';

const DemoLayers = [ { type: 'WebGLTile', props: { source: { type: 'ImageTile', props: { url: 'https://server.arcgisonline.com/arcgis/rest/services/Canvas/WorldDarkGrayBase/MapServer/tile/{z}/{y}/{x}', attributions: 'Tiles © <a href="https://server.arcgisonline.com/arcgis/rest/services/Canvas/WorldDarkGrayBase/MapServer">ArcGIS', }, }, name: 'World Dark Gray Base Base Map', zIndex: 0, }, }, { type: 'ImageLayer', props: { source: { type: 'ImageArcGISRest', props: { url: 'https://mapservices.weather.noaa.gov/eventdriven/rest/services/water/rivgauges/MapServer', params: { LAYERS: 'show:0', layerDefs: JSON.stringify({ 0: "status = 'action' or status='minor' or status='moderate' or status='major'", }), }, }, }, name: 'Flooding River Gauges', zIndex: 1, }, }, { type: 'VectorLayer', props: { source: { type: 'Vector', props: { url: 'https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/ParksandOpenSpace/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=geojson', format: { type: 'GeoJSON', props: {}, }, }, }, style: { type: 'Style', props: { stroke: { type: 'Stroke', props: { color: '#501020', width: 1, }, }, }, }, name: 'rfc max forecast (Decreasing Forecast Trend)', zIndex: 2, }, }, ];

{layers && layers.map((config, index) => )} ; ```

Please note that the object used to generate the different layers. follows the same structure:

• type: the association to the ol type. This can be found here:

js const typeMapping = { // Map type strings to module paths WebGLTile: 'ol/layer/WebGLTile.js', ImageLayer: 'ol/layer/Image.js', VectorLayer: 'ol/layer/Vector.js', ImageTile: 'ol/source/ImageTile.js', ImageArcGISRest: 'ol/source/ImageArcGISRest.js', Vector: 'ol/source/Vector.js', GeoJSON: 'ol/format/GeoJSON.js', Style: 'ol/style/Style.js', Stroke: 'ol/style/Stroke.js', Fill: 'ol/style/Fill.js', // Add other mappings as needed };

• props: the different options that the ol type (e.g. ol/layer/Image, ol/layer/Vector) will need: Please note that the props can have a nested structure, and do not limit to only, layers, but they can be sources, styles, etc

Please look at the example

LegendControl

Example:

```js import { Controls, LegendControl } from 'backlayer';

const demoLegend = [ { label: 'Major Flood', color: '#cc33ff', }, { label: 'Moderate Flood', color: '#ff0000', }, { label: 'Minor Flood', color: '#ff9900', }, { label: 'Action', color: '#ffff00', }, { label: 'No Flood', color: '#00ff00', }, { label: 'Flood Category Not Defined', color: '#72afe9', }, { label: 'Low Water Threshold', color: '#906320', }, { label: 'Data Not Current', color: '#bdc2bb', }, { label: 'Out of Service', color: '#666666', }, ];

; ```

Please note the structure of the props object for items

LayersControl

Example:

```js import { Controls, LayersControl } from 'backlayer';

; ```

OverLay

Example:

```js import { Overlays, OverLay } from 'backlayer';

const demoOverlays = [ { divid: "overlay-1", divclass: "modal-overlay", autoPan: { animation: { duration: 250, }, }, } ]

{demoOverlays && demoOverlays.map((config, index) => ( ))} ; ```

Please note that the props object contains two attributes div_id and div_class that are used for the id and class of the div container of the overlay

Sample Data

You can use the following for demo data.

js import { DemoLayers, DemoViewConfig, DemoMapConfig, DemoLegend, DemoOverlays, } from 'backlayer/demo';

Authors

• Aquaveo LLC

License

MIT License