1.1.3 • Published 10 months ago

ol-json-style v1.1.3

Weekly downloads
-
License
BSD 2-Clause "Sim...
Repository
github
Last release
10 months ago

ol-json-styles

This npm package can use json instead of classes to make OpenLayers style easily shareable.

npm install ol-json-styles
# or
yarn add ol-json-styles
import { loadStyle } from "ol-json-style";

const json = {
    Style: {
        fill: {
            Fill: {
                color: "red",
            },
        },
        stroke: {
            Stroke: {
                color: "blue",
            },
        },
    },
};

const myStyle = loadStyle(json);

// // You can then use it in a layer
// const layer = new VectorLayer({
//     source: mySource,
//     style: myStyle,
// });

A useful case is to use loadStyle to load a style from a remote source:

Suppose this file is served on https://example.com/style.json:

{
    "Style": {
        "image": {
            "Circle": {
                "radius": 10,
                "fill": {
                    "Fill": {
                        "color": "#ff000050"
                    }
                },
                "stroke": {
                    "Stroke": {
                        "color": "#ff0000ff"
                    }
                }
            }
        },
        "text": {
            "Text": {
                "text": "LOL",
                "textAlign": null,
                "textBaseline": null,
                "font": null,
                "fill": {
                    "Fill": {
                        "color": "#ff0000ff"
                    }
                },
                "stroke": {
                    "Stroke": {
                        "color": "#ffffff",
                        "width": 2
                    }
                },
                "offsetX": 0,
                "offsetY": 0,
                "placement": "Point",
                "maxAngle": 0.7853981633974483,
                "overflow": null,
                "rotation": 0,
                "scale": 1.5
            }
        }
    }
}

You can then use the following code to load the style:

import { loadStyle } from "ol-json-style";

// Top level await is ES8 only (use promises or async function if ES8 is unavailable)
const jsonContent = await (await fetch("https://example.com/style.json")).json();

const myStyle = loadStyle(jsonContent);
1.1.1

10 months ago

1.1.0

10 months ago

1.0.6

10 months ago

1.0.5

10 months ago

1.1.3

10 months ago

1.0.4

10 months ago

1.1.2

10 months ago

1.0.3

11 months ago

1.0.1

3 years ago

1.0.0

3 years ago