geostyler

Code: github Package: npm

Documentation: main / latest / 18.1.2

Examples: Demo application

Developer Guide: Developer Guide

🚀 GeoStyler Code Sprint 2025

We are happy to announce the next GeoStyler Code Sprint from 02.-06.06.2025 in Switzerland. Be part of it! More infos on https://geostyler.org/.

📆 Monthly meetings

On the first tuesday of every month, there is a video meeting on the GeoStyler Discord at 2pm CET. The meeting is for all contributors, users or other people interested in GeoStyler.

What is this all about?

The GeoStyler is a generic styler for geodata*.

GeoStyler provides a set of UI Components for map styling. Just like a modular building block system all components can be stacked together to create a nice UI for your web applications. To simplify the setup, we also provide some high-level components (based on our building blocks) that already do the work for you. These include among many others Symbolizer Editors, RuleTables and a fully-fledged StyleEditor including filters and scaleDenominators.

Furthermore, GeoStyler allows for the translation between multiple styling formats, i.e. SLD, OpenLayers, QGIS, Mapbox. Since we are following the concept of micro packages, these translators (we call them parsers) can be used as standalone libraries, without the need to include the UI components as a dependency. Just take a look at StyleParser Implementations.

* geodata as a single dataset (layer) not a complete map appearance.

If you are missing any UI components, formats or even have a custom style format, feel free to open a PR. We are happy for any kind of contributions.

To see the GeoStyler in action have a look at the demo application. It demonstrates the GeoStyler UI components as a standalone application.

Every parser works as a standalone library, too. So you can easily translate between style formats.

For example a small SLD to OpenLayers-Style parser (untested code 😄):

import SLDParser from "geostyler-sld-parser";
import OpenLayersParser from "geostyle-openlayers-parser";
const sldParser = new SLDParser();
const olParser = new OpenLayersParser();

const sldToOL = async (sld) => {
  const { output: geostylerStyle } = await sldParser.readStyle(someSld);
  const { output: olStyle } = await olParser.writeStyle(geostylerStyle);
  return olStyle;
};

export default sldToOl;

Installation

Run

npm i geostyler

from within your project directory to add GeoStyler as a dependency. Please be aware of the peerDependencies that come along with GeoStyler.

Components can be used as follows:

import {wanted-geostyler-compoment} from 'geostyler';

//... your component code
render() {
  return (
    
  );
}

GeoStyler - Ecosystem

The GeoStyler ecosystem is spread across multiple packages.

flowchart RL
  classDef parserCls fill:#fffdbc,stroke:#333,stroke-width:2px,color:#333;
  classDef toolCls fill:#c2f2ff,stroke:#333,stroke-width:2px,color:#333;
  classDef styleCls fill:white,stroke:#333,stroke-width:2px,color:#333;
  style convert fill:#EEE,color:#333;
  style editAndDisplay fill:#EEE,color:#333;
  style parser fill:#EEE,color:#333;

  subgraph convert[Conversion]
    cli[GeoStyler CLI]:::toolCls
    rest[GeoStyler Rest]:::toolCls
  end
  subgraph editAndDisplay[Edit and Display]
    ui[GeoStyler UI]:::toolCls
    legend[GeoStyler Legend]:::toolCls
  end
  geostylerStyle[/GeoStyler Style Format/]
  subgraph parser["Parsers"]
    direction LR
    sld([SLD]):::parserCls
    ol([OpenLayers]):::parserCls
    lyrx([Arc GIS]):::parserCls
    mapbox([MapLibre/MapbBox]):::parserCls
    qgis([QGIS]):::parserCls
    mapfile([Mapfile]):::parserCls
  end
  convert <--> geostylerStyle
  editAndDisplay <--> geostylerStyle:::styleCls
  geostylerStyle <--> parser

  click geostylerStyle "https://github.com/geostyler/geostyler-style"
  click sld "https://github.com/geostyler/geostyler-sld-parser"
  click qgis "https://github.com/geostyler/geostyler-qgis-parser"
  click lyrx "https://github.com/geostyler/geostyler-lyrx-parser"
  click ol "https://github.com/geostyler/geostyler-openlayers-parser"
  click mapbox "https://github.com/geostyler/geostyler-mapbox-parser"
  click mapfile "https://github.com/geostyler/geostyler-mapfile-parser"
  click cli "https://github.com/geostyler/geostyler-cli"
  click rest "https://github.com/geostyler/geostyler-rest"
  click legend "https://github.com/geostyler/geostyler-legend"
  click ui "https://github.com/geostyler/geostyler"

GeoStyler UI

The main package of the GeoStyler ecosystem is the UI library. It contains a collection of React components that can be used to build a styling UI for geodata. The main components are the `