From 21bb2962c0eeab132a9de917870d97b2c5d05197 Mon Sep 17 00:00:00 2001
From: Annabelle Thomas Taylor <ataylor@mapc.org>
Date: Mon, 8 Jun 2020 09:06:43 -0400
Subject: [PATCH] Update drawn features styling

---
 map.js | 73 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 73 insertions(+)

diff --git a/map.js b/map.js
index 8153a47..2f63190 100644
--- a/map.js
+++ b/map.js
@@ -18,6 +18,79 @@ const draw = new MapboxDraw({
     line_string: true,
   },
   userProperties: true,
+  styles: [
+    {
+      'id': 'highlight-active-points',
+      'type': 'circle',
+      'filter': ['all',
+        ['==', '$type', 'Point'],
+        ['==', 'meta', 'feature'],
+        ['==', 'active', 'true']],
+      'paint': {
+        'circle-radius': 8,
+        'circle-color': '#233069'
+      }
+    },
+    {
+      'id': 'inactive-points',
+      'type': 'circle',
+      'filter': ['all',
+        ['==', '$type', 'Point'],
+        ['==', 'meta', 'feature'],
+        ['==', 'active', 'false']],
+      'paint': {
+        'circle-radius': 6,
+        'circle-color': '#0097C4'
+      }
+    },
+    {
+      "id": "gl-draw-line",
+      "type": "line",
+      "filter": ["all", ["==", "$type", "LineString"], ["!=", "mode", "static"]],
+      "layout": {
+        "line-cap": "round",
+        "line-join": "round"
+      },
+      "paint": {
+        "line-color": "#0097C4",
+        "line-dasharray": [0.2, 2],
+        "line-width": 4
+      }
+    },
+    {
+      "id": "gl-draw-polygon-fill",
+      "type": "fill",
+      "filter": ["all", ["==", "$type", "Polygon"], ["!=", "mode", "static"]],
+      "paint": {
+        "fill-color": "#0097C4",
+        "fill-outline-color": "#0097C4",
+        "fill-opacity": 0.3
+      }
+    },
+    {
+      "id": "gl-draw-polygon-stroke-active",
+      "type": "line",
+      "filter": ["all", ["==", "$type", "Polygon"], ["!=", "mode", "static"]],
+      "layout": {
+        "line-cap": "round",
+        "line-join": "round"
+      },
+      "paint": {
+        "line-color": "#0097C4",
+        "line-dasharray": [0.2, 2],
+        "line-width": 4
+      }
+    },
+    {
+      "id": "gl-draw-polygon-and-line-vertex-halo-active",
+      "type": "circle",
+      "filter": ["all", ["==", "meta", "vertex"], ["==", "$type", "Point"], ["!=", "mode", "static"]],
+      'paint': {
+        'circle-radius': 8,
+        'circle-color': '#233069'
+      }
+    },
+  ]
 });
 
 map.addControl(draw, 'top-left');