GeoStyler is an Open Source React library that enables users to style maps with the help of a GUI. GeoStyler works with multiple styling formats and is highly customizable. Currently, we support SLD, OpenLayers, Mapbox, QGIS and mapfiles.

For developer guide and issue tracking, please take a look at our GitHub repo.

Install GeoStyler via npm:

npm i geostyler

Please be aware of the peerDependencies that come along with GeoStyler.

Parsers for the different formats have to be installed separately, e.g. for installing the geostyler-sld-parser, run

npm i geostyler-sld-parser

Add <Style /> to your application:

import React from 'react';
import { Style } from 'geostyler';

const App = () => {

  const onStyleChange = (geostylerStyle) => {
    console.log('New GeoStyler style ', geostylerStyle);
  };

  return (
    <Style
      onStyleChange={onStyleChange}
    />
  );
};

Providing a style:

import React, { useState } from 'react';
import { Style } from 'geostyler';

const App = () => {

  const [geostylerStyle, setGeostylerStyle] = useState({
    'name': 'Example Style',
    'rules': [
      {
        'name': 'Rule 1',
        'symbolizers': [
          {
            'kind': 'Line',
            'color': '#ff0000',
            'width': 5
          }
        ]
      }
    ]
  });

  const onStyleChange = (gsStyle) => {
    setGeostylerStyle(gsStyle);
  };

  return (
    <Style
      onStyleChange={onStyleChange}
      style={geostylerStyle}
    />
  );
};

Parsing output to different formats (e.g. SLD):

import React, { useState, useEffect } from 'react';
import { Style } from 'geostyler';
import SldStyleParser from 'geostyler-sld-parser';

const App = () => {

  const [geostylerStyle, setGeostylerStyle] = useState({
    'name': 'GeoStyler Demo',
    'rules': [
      {
        'name': 'Rule 1',
        'symbolizers': [
          {
            'kind': 'Line',
            'color': '#ff0000',
            'width': 5
          }
        ]
      }
    ]
  });

  const [sldStyle, setSldStyle] = useState();

  const onStyleChange = (gsStyle) => {
    setGeostylerStyle(gsStyle);
  };

  useEffect(() => {
    const sldParser = new SldStyleParser();
    sldParser.writeStyle(geostylerStyle)
      .then((response) => {
        if (response.errors) {
          console.log('Something went wrong');
          return;
        }
        const newSldStyle = response.output;
        setSldStyle(newSldStyle);
      });
  }, [geostylerStyle]);

  return (
    <Style
      onStyleChange={onStyleChange}
      style={geostylerStyle}
    />
  );
};

For more information see the Style Component API and take a look at the other components (e.g. CardStyle).