@mapcomponents/react-maplibre 0.1.17 → 0.1.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapcomponents/react-maplibre",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "license": "MIT",
   "private": false,
   "module": "dist/index.esm.js",

package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.js

@@ -52,10 +52,13 @@ const MlGeoJsonLayer = (props) => {
   useEffect(() => {
     if (!mapHook.map || !initializedRef.current) return;
 
-    for (var key in props.paint) {
-      mapHook.map.setPaintProperty(layerId.current, key, props.paint[key]);
+    let _paint =
+      props.paint || getDefaultPaintPropsByType(layerTypeRef.current, props.defaultPaintOverrides);
+
+    for (var key in _paint) {
+      mapHook.map.setPaintProperty(layerId.current, key, _paint[key]);
     }
-  }, [props.paint, mapHook.map, props.mapId]);
+  }, [props.paint, mapHook.map, props.mapId, props.defaultPaintOverrides]);
 
   const transitionToGeojson = useCallback(
     (newGeojson) => {
@@ -125,7 +128,9 @@ const MlGeoJsonLayer = (props) => {
           data: geojson,
         },
         type: layerTypeRef.current,
-        paint: props.paint || getDefaultPaintPropsByType(layerTypeRef.current),
+        paint:
+          props.paint ||
+          getDefaultPaintPropsByType(layerTypeRef.current, props.defaultPaintOverrides),
         layout: props.layout || {},
       },
       props.insertBeforeLayer,
@@ -207,6 +212,10 @@ MlGeoJsonLayer.propTypes = {
    * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
    */
   paint: PropTypes.object,
+  /**
+   * Javascript object with optional properties "fill", "line", "circle" to override implicit layer type default paint properties.
+   */
+  defaultPaintOverrides: PropTypes.object,
   /**
    * GeoJSON data that is supposed to be rendered by this component.
    */

package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.stories.js

@@ -52,13 +52,28 @@ const LinestringTransitionTemplate = (props) => {
   );
 };
 
-export const LinestringExample = LinestringTransitionTemplate.bind({});
-LinestringExample.parameters = {};
-LinestringExample.args = {};
+export const Linestring = LinestringTransitionTemplate.bind({});
+Linestring.parameters = {};
+Linestring.args = {};
 
-export const PolygonExample = Template.bind({});
-PolygonExample.parameters = {};
-PolygonExample.args = {
-  type: "line",
+export const Polygon = Template.bind({});
+Polygon.parameters = {};
+Polygon.args = {
+  geojson: sample_polygon_geojson_1,
+};
+export const DefaultPaintOverrides = Template.bind({});
+DefaultPaintOverrides.parameters = {};
+DefaultPaintOverrides.args = {
+  defaultPaintOverrides: {
+    fill: {
+      "fill-color": "blue",
+    },
+    circle: {
+      "circle-color": "red",
+    },
+    line: {
+      "line-color": "orange",
+    },
+  },
   geojson: sample_polygon_geojson_1,
 };

package/src/components/MlGeoJsonLayer/util/getDefaultPaintPropsByType.js

@@ -1,16 +1,25 @@
-const getDefaultPaintPropsByType = (type) => {
+const getDefaultPaintPropsByType = (type, defaultPaintOverrides) => {
   switch (type) {
     case "fill":
+      if (defaultPaintOverrides?.fill) {
+        return defaultPaintOverrides.fill;
+      }
       return {
         "fill-color": "rgba(10,240,256,0.6)",
       };
     case "line":
+      if (defaultPaintOverrides?.line) {
+        return defaultPaintOverrides.line;
+      }
       return {
         "line-color": "rgb(100,200,100)",
         "line-width": 5,
       };
     case "circle":
     default:
+      if (defaultPaintOverrides?.circle) {
+        return defaultPaintOverrides.circle;
+      }
       return {
         "circle-color": "#44aaaa",
         "circle-stroke-color": "#fff",