@nqminds/gis

nquiringminds GIS component

This library provides a React component for rendering geographical data using deck.gl. It supports the following layer types:

• Geojson
• Scatter layer
• Line layer
• Hexbin layer
• Heatmap layer

Data can either be loaded from a provided list of data sources, using a provided loading function, or drag and dropped into the browser.

Installation

npm i @nqminds/gis

Note: you must install the peer dependencies of the library in order to use it.

Usage

import {Gis} from "@nqminds/gis;

function GisView() {
  const dataSources = [
    {name: "some file", id: "some-id"}, // You must provide a unique id and a name for each data source
  ];

  async function loadData(dataSource) { // An asynchronous function that returns the data for a data source
    const data = await getData(dataSource.id); // The loadData function will be called with an object from dataSources
    return data;
  }

  return <GisView dataSources={dataSources} loadData={loadData} mapBoxToken="" />
}

Props

dataSources: (optional) Array of data sources available, each element should be an object with at least a name property and a unique id property.

loadData: (optional) A function that handles retrieving the data for a dataSource. It will be called with an entry from dataSources.

mapBoxToken: (required) A map box api token.

darkMode: (optional, default true) Determines which map variant to use.

defaultLayers: (optional) Array of settings for layers to initialise the map with, by default any layers passed here will be active. See defaultLayers below

enableControls: (optional, default true) Determines whether configuration will be available to the user

initialViewState: (optional) Allows setting initial latitude, longitude, pitch, zoom, maxZoom, and bearing

onClick: (optional) callback function passed to deckGL, for documentation see https://deck.gl/docs/api-reference/core/deck#onclick

onViewStateChange: (optional) bacllback function passed to deckGL, for documentation see https://deck.gl/docs/api-reference/core/deck#onviewstatechange

cursorStyle: (optional) Mouse cursor style to be applied while GIS component moused-over. See https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

You can see the examples by cloning this repository and running:

npm i && npm run storybook

Configuring default layers

Default layers are specified in the following way:

import { layerTypes } from "@nqminds/gis";
const defaultLayer = {
  name: "my default layer",
  data: [], // An array of objects that will provide the data for the layer
  type: layerTypes.line, // A valid layer type, recommended to use the layerTypes export
  properties: {}, // The properties with which to configure the layer
  active: boolean // Defaulted to true, defines whether the layer is active
};

A property string refers to a path within the object, see the deck.gl documentation for a full description of the properties.

Geojson layer properties

• opacity: 0-1
• stroked: boolean, draws lines
• filled: boolean
• lineColor: property string, rgb array, or function
• fillColor: property string, rgb array, or function

Scatter layer properties

• radiusScale: number
• fillColor: property string, rgb array, or function
• filled: boolean
• radius: number
• x: property string
• y: property string

Line layer properties

• opacity: 0-1
• color: property string, rgb array, or function
• sourceX: property string
• sourceY: property string
• targetX: property string
• targetY: property string

Hex bin properties

• x: property string
• y: property string
• elevationScale: number
• radius: number
• extruded: boolean
• coverage: number

Heatmap layer

• x: property string
• y: property string
• radiusPixels: number
• intensity: number
• colorRange: array [property string, rgb array, or function]
• weight: number

Icon layer

• x: property string
• y: property string
• getIcon: function //returns either ""marker", "filled" or "error"
• sizeScale: number
• color: property string, rgb array, or function
• cluster: boolean