Add hotSourceOptions and coldSourceOptions

Add hotSourceOptions and coldSourceOptions to the options to pass to the drawing and drawn layers.
This could fix issue [#858](#858) and [#1143](#1143).

Author: shushanyalida5124

docs/API.md

@@ -36,6 +36,8 @@ All of the following options are optional.
 - `modes`, Object: over ride the default modes with your own. `MapboxDraw.modes` can be used to see the default values. More information on custom modes [can be found here](https://github.com/mapbox/mapbox-gl-draw/blob/main/docs/MODES.md).
 - `defaultMode`, String (default: `'simple_select'`): the mode (from `modes`) that user will first land in.
 - `userProperties`, boolean (default: `false`): properties of a feature will also be available for styling and prefixed with `user_`, e.g., `['==', 'user_custom_label', 'Example']`
+- `hotSourceOptions`, Object (default {}): same as [GeoJSONSource](https://docs.mapbox.com/style-spec/reference/sources#geojson) in mapbox,can control hot features style.
+- `coldSourceOptions`, Object (default {}): same as [GeoJSONSource](https://docs.mapbox.com/style-spec/reference/sources#geojson) in mapbox,can control drawn features style.
 
 ## Modes
 

src/options.js

@@ -15,7 +15,9 @@ const defaultOptions = {
   styles,
   modes,
   controls: {},
-  userProperties: false
+  userProperties: false,
+  coldSourceOptions: {},
+  hotSourceOptions: {}
 };
 
 const showControls = {

src/setup.js

@@ -85,6 +85,7 @@ export default function(ctx) {
     addLayers() {
       // drawn features style
       ctx.map.addSource(Constants.sources.COLD, {
+        ...ctx.options.coldSourceOptions,
         data: {
           type: Constants.geojsonTypes.FEATURE_COLLECTION,
           features: []
@@ -94,6 +95,7 @@ export default function(ctx) {
 
       // hot features style
       ctx.map.addSource(Constants.sources.HOT, {
+        ...ctx.options.hotSourceOptions,
         data: {
           type: Constants.geojsonTypes.FEATURE_COLLECTION,
           features: []

test/options.test.js

@@ -25,7 +25,9 @@ test('Options test', (t) => {
         trash: true,
         combine_features: true,
         uncombine_features: true
-      }
+      },
+      coldSourceOptions: {},
+      hotSourceOptions: {}
     };
     t.deepEquals(defaultOptions, Draw.options);
     t.deepEquals(styleWithSourcesFixture, Draw.options.styles);
@@ -52,7 +54,9 @@ test('Options test', (t) => {
         trash: true,
         combine_features: true,
         uncombine_features: true
-      }
+      },
+      coldSourceOptions: {},
+      hotSourceOptions: {}
     };
 
     t.deepEquals(defaultOptions, Draw.options);
@@ -79,7 +83,9 @@ test('Options test', (t) => {
         trash: false,
         combine_features: false,
         uncombine_features: false
-      }
+      },
+      coldSourceOptions: {},
+      hotSourceOptions: {}
     };
     t.deepEquals(defaultOptions, Draw.options);
     t.end();
@@ -105,7 +111,9 @@ test('Options test', (t) => {
         trash: false,
         combine_features: false,
         uncombine_features: false
-      }
+      },
+      coldSourceOptions: {},
+      hotSourceOptions: {}
     };
 
     t.deepEquals(defaultOptions, Draw.options);
@@ -132,7 +140,9 @@ test('Options test', (t) => {
         trash: true,
         combine_features: true,
         uncombine_features: true
-      }
+      },
+      coldSourceOptions: {},
+      hotSourceOptions: {}
     };
 
     t.deepEquals(defaultOptions, Draw.options);
@@ -159,7 +169,9 @@ test('Options test', (t) => {
         trash: true,
         combine_features: true,
         uncombine_features: true
-      }
+      },
+      coldSourceOptions: {},
+      hotSourceOptions: {}
     };
     t.deepEquals(defaultOptions, Draw.options);
     t.deepEquals(styleWithSourcesFixture, Draw.options.styles);