Welcome to OpenLayers Style Editor

✨ Demo

Note

This package is compatible with SSR.

Contents

• Background
• Presentation
• Installation
• Usage
• Props Details
• TODOs
• Show your support
• Author & Maintainer

Background

This package was created in the context of the LAND IT project, a decision support system to help stakeholders planning a new landscape for the most affected areas by wildfires in Portugal. LAND IT uses OpenLayers as its main GIS dependency, and throughout the project the need to edit layers styles increased.

Presentation

This Style Editor for OpenLayers allows the user to change the style of layers. This editor was inspired in both QGIS and ArcMap editors.

There are three edition modes:

• Unique Symbol: Allows the user to change the layer's color, opacity, and stroke.
• Categorized: Allows the user to change the layer's color, opacity, and stroke based on the values of an attribute.
• Graduated: Allows the user to change the layer's color, opacity, and stroke based on a numeric attribute and the mode used to group its values. This package has six modes implemented, some of them are implemented using the GeoBuckets package. The implemented modes are:
  • Manual
  • Equal Intervals
  • Defined Intervals
  • Quantile
  • Natural Breaks (Jenks)
  • Standard Deviation

A detailed explanation of each mode can be found here.

Installation

Depending on the installed package provider, this package can be installed with one of the following commands.

npm install openlayers-style-editor

yarn add openlayers-style-editor

Usage

Firstly it is necessary to import the styles of the package. This can be done by adding the following code snippet to your index/main file.

import 'openlayers-style-editor/dist/openlayers-style-editor.css';

It is possible to enjoy this package by adding the following code snippets to your code.

import { Render, RenderType, StyleEditor } from "openlayers-style-editor";

const [visible, setVisible] = useState<boolean>(false);

const defaultRender: Render = {
    type: RenderType.Unique,
    rendererOL: {
        'fill-color': [255, 255, 50, 1],
        'stroke-color': [0, 0, 0, 1],
        'stroke-width': 1,
    }
}

const [renderer, setRenderer] = useState<Render>(defaultRender);

<StyleEditor visible={visible}
             setVisible={setVisible}
             layerDefaultRenderer={defaultRender}
             layerCurrentRenderer={renderer}
             applyRenderer={(renderer) => setRenderer(renderer)}
             features={features}
             primeReactTheme={"bootstrap4-light-blue"}
             showPreDefinedRamps={true} />

To see a full example click here.

Props Details

Name	Type	Requirement	Description	Example
visible	boolean	mandatory	Defines if the component is visible or not	true
setVisible	function	mandatory	Function to set the visibility of the component	() => setVisible(!visible)
layerDefaultRenderer	Render	mandatory	Default renderer of the layer to be edited	{  type: RenderType.Unique,  rendererOL: {   'fill-color': [255, 255, 50, 1],   'stroke-color': [0, 0, 0, 1],   'stroke-width': 1  } }
layerCurrentRenderer	Render	mandatory	Current renderer of the layer	{  type: RenderType.Unique,  rendererOL: {   'fill-color': [255, 255, 50, 1],   'stroke-color': [0, 0, 0, 1],   'stroke-width': 1  } }
applyRenderer	function	mandatory	Function to apply the renderer to the layer, it has as parameter the renderer to be applied	(renderer: Render) => setRenderer(renderer)
features	Feature[]	mandatory	Features to be rendered on the map
showPreDefinedRamps	boolean	mandatory	Show the predefined ramps of the package	true
moreRamps	ColorRamp[]	optional	An array of color ramps that can be added to the package	[{  id: 28, //id needs to be >=28  name: "GnBu",  palette:   [{    offset: 0.25,    color: fromString("rgb(186,228,188)")   },   {    offset: 0.5,    color: fromString("rgb(123,204,196)")   },   {    offset: 0.75,    color: fromString("rgb(67,162,202)")   }] }]
predefinedStyles	PredefinedRenderer[]	optional	Predefined styles to be used on the categorized style type	[{  name: "Dangerousness",  renderer:   [{    value: "Very High",    color: [255, 0, 0]   },   {    value: "High",    color: [255, 128, 0]   },   {    value: "Medium",    color: [255, 255, 0]   },   {    value: "Low",    color: [139, 209, 0]   },   {    value: "Very Low",    color: [56, 168, 0]   }] }]
addingToHeader	string	optional	Text to be added to the header	- Dangerousness Layer
primeReactTheme	string	optional	PrimeReact theme to be used, all option can be found here	bootstrap4-light-blue
numbersLocale	string	optional	Locale to be used on numbers, represented using BCP 47 language tag. Default is 'en-US'	en-US
textLocale	string	optional	Locale to be used for text. This package has two options available: 'en' and 'pt'. Default is 'en'. To add a custom locale, use the customLocale prop and in the textLocale prop use 'custom'.	pt
customLocale	Record<string, any>	optional	Custom locale to be used in case the textLocale is set to 'custom'. This prop must have the same structure as the default locale, that can be found here	{"common": {  "style_editor": "Editor de Estilos",  "reset_style": "Repor Estilo",  ... }}

TODOs

• Add the condition style type
• Add a license

Show your support

Give a ⭐️ if this project helped you!

Author & Maintainer

Márcia Matias

• Github: @MarciaBM
• Personal Page: marciamatias.github.io