diff --git a/CHANGELOG.md b/CHANGELOG.md index 13063f1..551cca8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +### Changed + +- Allow custom stroke colors in `addLayer` method. #201 + ## [v2.2.2] - 2023-09-02 ### Fixed diff --git a/README.md b/README.md index c0cda5d..7ab63e3 100644 --- a/README.md +++ b/README.md @@ -285,6 +285,21 @@ const colors = { }; ``` +Custom colors can be used by providing a `color` option with the desired color value. A color string parser is included +to handle hex, rgb and other formats. +See [color-parse](https://github.com/colorjs/color-parse/tree/master#parsed-strings) for information about supported formats. + +```js +// Add a GeoJSON layer with a custom color inside a layer group called "Assets" +const opts = { + title: 'Animals', + url: '/farm/assets/geojson/animal/full', + color: '#FF0000', + group: 'Assets', +}; +const layer = myMap.addLayer('geojson', opts); +``` + For more complex styles, the `styleFunction` option allows styles to be defined based on a `feature` and `resolution` ([StyleFunction docs.](https://openlayers.org/en/latest/apidoc/module-ol_style_Style.html#~StyleFunction)) diff --git a/src/styles/index.js b/src/styles/index.js index 145488a..6946543 100644 --- a/src/styles/index.js +++ b/src/styles/index.js @@ -19,9 +19,17 @@ const colors = { // Returns an OpenLayers Style for a given color. const colorStyles = (color) => { - const rgba = colors[color] ? colors[color] : colors.yellow; + let strokeColor; + if (!color) { + strokeColor = colors.yellow; + } else if (colors[color]) { + strokeColor = colors[color]; + } else { + strokeColor = color; + } + const stroke = new Stroke({ - color: rgba, + color: strokeColor, width: 2, }); const fill = new Fill({