Support custom colors

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

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)) 

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({