POINT
LINE
POLYGON
@@ -66,17 +64,6 @@
mapboxgl.accessToken = getAccessToken();
- const StaticMode = {};
-
- StaticMode.onSetup = function () {
- this.setActionableState(); // default actionable state is false for all actions
- return {};
- };
-
- StaticMode.toDisplayFeatures = function (state, geojson, display) {
- display(geojson);
- };
-
const map = new mapboxgl.Map({
container: 'map',
zoom: 1,
@@ -91,7 +78,6 @@
map.addControl(new mapboxgl.NavigationControl(), 'top-left');
const modes = MapboxDraw.modes;
- modes.static = StaticMode;
const Draw = window.Draw = new MapboxDraw({ modes });
let drawIsActive = true;
map.addControl(Draw, 'bottom-right');
@@ -154,12 +140,6 @@
startPolygon.onclick = function () {
Draw.changeMode('draw_polygon');
};
-
- // Jump into static mode via a custom UI element
- const startStatic = document.getElementById('start-static');
- startStatic.onclick = function () {
- Draw.changeMode('static');
- };
});
diff --git a/docs/EXAMPLES.md b/docs/EXAMPLES.md
index dc9a8c95e..d35152c64 100644
--- a/docs/EXAMPLES.md
+++ b/docs/EXAMPLES.md
@@ -44,7 +44,7 @@ var draw = new MapboxDraw({
### lines and polygons
-With this style, all line and polygon features are have dashed red outline and transparent fill while being drawn, including the point vertices. When the Draw mode is changed the 'static', these features will be drawn with solid black outline and transparent fill. Point vertices use the same point filter, and render these points twice: once as a larger-radius halo, and again as the vertex inset point.
+With this style, all line and polygon features are have dashed red outline and transparent fill while being drawn, including the point vertices. Point vertices use the same point filter, and render these points twice: once as a larger-radius halo, and again as the vertex inset point.
```js
var draw = new MapboxDraw({
@@ -56,7 +56,7 @@ var draw = new MapboxDraw({
{
"id": "gl-draw-line",
"type": "line",
- "filter": ["all", ["==", "$type", "LineString"], ["!=", "mode", "static"]],
+ "filter": ["all", ["==", "$type", "LineString"]],
"layout": {
"line-cap": "round",
"line-join": "round"
@@ -71,7 +71,7 @@ var draw = new MapboxDraw({
{
"id": "gl-draw-polygon-fill",
"type": "fill",
- "filter": ["all", ["==", "$type", "Polygon"], ["!=", "mode", "static"]],
+ "filter": ["all", ["==", "$type", "Polygon"]],
"paint": {
"fill-color": "#D20C0C",
"fill-outline-color": "#D20C0C",
@@ -95,7 +95,7 @@ var draw = new MapboxDraw({
{
"id": "gl-draw-polygon-stroke-active",
"type": "line",
- "filter": ["all", ["==", "$type", "Polygon"], ["!=", "mode", "static"]],
+ "filter": ["all", ["==", "$type", "Polygon"]],
"layout": {
"line-cap": "round",
"line-join": "round"
@@ -110,7 +110,7 @@ var draw = new MapboxDraw({
{
"id": "gl-draw-polygon-and-line-vertex-halo-active",
"type": "circle",
- "filter": ["all", ["==", "meta", "vertex"], ["==", "$type", "Point"], ["!=", "mode", "static"]],
+ "filter": ["all", ["==", "meta", "vertex"], ["==", "$type", "Point"]],
"paint": {
"circle-radius": 5,
"circle-color": "#FFF"
@@ -120,52 +120,11 @@ var draw = new MapboxDraw({
{
"id": "gl-draw-polygon-and-line-vertex-active",
"type": "circle",
- "filter": ["all", ["==", "meta", "vertex"], ["==", "$type", "Point"], ["!=", "mode", "static"]],
+ "filter": ["all", ["==", "meta", "vertex"], ["==", "$type", "Point"]],
"paint": {
"circle-radius": 3,
"circle-color": "#D20C0C",
}
- },
-
- // INACTIVE (static, already drawn)
- // line stroke
- {
- "id": "gl-draw-line-static",
- "type": "line",
- "filter": ["all", ["==", "$type", "LineString"], ["==", "mode", "static"]],
- "layout": {
- "line-cap": "round",
- "line-join": "round"
- },
- "paint": {
- "line-color": "#000",
- "line-width": 3
- }
- },
- // polygon fill
- {
- "id": "gl-draw-polygon-fill-static",
- "type": "fill",
- "filter": ["all", ["==", "$type", "Polygon"], ["==", "mode", "static"]],
- "paint": {
- "fill-color": "#000",
- "fill-outline-color": "#000",
- "fill-opacity": 0.1
- }
- },
- // polygon outline
- {
- "id": "gl-draw-polygon-stroke-static",
- "type": "line",
- "filter": ["all", ["==", "$type", "Polygon"], ["==", "mode", "static"]],
- "layout": {
- "line-cap": "round",
- "line-join": "round"
- },
- "paint": {
- "line-color": "#000",
- "line-width": 3
- }
}
]
});
diff --git a/src/constants.js b/src/constants.js
index 14cc3516f..c22a18b82 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -50,8 +50,7 @@ export const modes = {
DRAW_POLYGON: 'draw_polygon',
DRAW_POINT: 'draw_point',
SIMPLE_SELECT: 'simple_select',
- DIRECT_SELECT: 'direct_select',
- STATIC: 'static'
+ DIRECT_SELECT: 'direct_select'
};
export const events = {
diff --git a/src/lib/create_vertex.js b/src/lib/create_vertex.js
index 41acb9181..048be7ec9 100644
--- a/src/lib/create_vertex.js
+++ b/src/lib/create_vertex.js
@@ -11,6 +11,7 @@ import * as Constants from '../constants.js';
* @param {boolean} selected
* @return {GeoJSON} Point
*/
+
export default function(parentId, coordinates, path, selected) {
return {
type: Constants.geojsonTypes.FEATURE,
diff --git a/src/lib/theme.js b/src/lib/theme.js
index 0eb848f7a..3576146b2 100644
--- a/src/lib/theme.js
+++ b/src/lib/theme.js
@@ -1,227 +1,148 @@
+/* eslint comma-dangle: ["error", "always-multiline"] */
+
+const blue = '#3bb2d0';
+const orange = '#fbb03b';
+const white = '#fff';
+
export default [
+ // Polygons
+ // Solid fill
+ // Active state defines color
{
- 'id': 'gl-draw-polygon-fill-inactive',
+ 'id': 'gl-draw-polygon-fill',
'type': 'fill',
- 'filter': ['all',
- ['==', 'active', 'false'],
+ 'filter': [
+ 'all',
['==', '$type', 'Polygon'],
- ['!=', 'mode', 'static']
],
'paint': {
- 'fill-color': '#3bb2d0',
- 'fill-outline-color': '#3bb2d0',
- 'fill-opacity': 0.1
- }
- },
- {
- 'id': 'gl-draw-polygon-fill-active',
- 'type': 'fill',
- 'filter': ['all', ['==', 'active', 'true'], ['==', '$type', 'Polygon']],
- 'paint': {
- 'fill-color': '#fbb03b',
- 'fill-outline-color': '#fbb03b',
- 'fill-opacity': 0.1
- }
- },
- {
- 'id': 'gl-draw-polygon-midpoint',
- 'type': 'circle',
- 'filter': ['all',
- ['==', '$type', 'Point'],
- ['==', 'meta', 'midpoint']],
- 'paint': {
- 'circle-radius': 3,
- 'circle-color': '#fbb03b'
- }
- },
- {
- 'id': 'gl-draw-polygon-stroke-inactive',
- 'type': 'line',
- 'filter': ['all',
- ['==', 'active', 'false'],
- ['==', '$type', 'Polygon'],
- ['!=', 'mode', 'static']
- ],
- 'layout': {
- 'line-cap': 'round',
- 'line-join': 'round'
- },
- 'paint': {
- 'line-color': '#3bb2d0',
- 'line-width': 2
- }
- },
- {
- 'id': 'gl-draw-polygon-stroke-active',
- 'type': 'line',
- 'filter': ['all', ['==', 'active', 'true'], ['==', '$type', 'Polygon']],
- 'layout': {
- 'line-cap': 'round',
- 'line-join': 'round'
+ 'fill-color': [
+ 'case',
+ ['==', ['get', 'active'], 'true'], orange,
+ blue,
+ ],
+ 'fill-opacity': 0.1,
},
- 'paint': {
- 'line-color': '#fbb03b',
- 'line-dasharray': [0.2, 2],
- 'line-width': 2
- }
},
+ // Lines
+ // Polygon
+ // Matches Lines AND Polygons
+ // Active state defines color
{
- 'id': 'gl-draw-line-inactive',
+ 'id': 'gl-draw-lines',
'type': 'line',
- 'filter': ['all',
- ['==', 'active', 'false'],
+ 'filter': [
+ 'any',
['==', '$type', 'LineString'],
- ['!=', 'mode', 'static']
+ ['==', '$type', 'Polygon'],
],
'layout': {
'line-cap': 'round',
- 'line-join': 'round'
+ 'line-join': 'round',
},
'paint': {
- 'line-color': '#3bb2d0',
- 'line-width': 2
- }
- },
- {
- 'id': 'gl-draw-line-active',
- 'type': 'line',
- 'filter': ['all',
- ['==', '$type', 'LineString'],
- ['==', 'active', 'true']
- ],
- 'layout': {
- 'line-cap': 'round',
- 'line-join': 'round'
+ 'line-color': [
+ 'case',
+ ['==', ['get', 'active'], 'true'], orange,
+ blue,
+ ],
+ 'line-width': 2,
},
- 'paint': {
- 'line-color': '#fbb03b',
- 'line-dasharray': [0.2, 2],
- 'line-width': 2
- }
},
+ // Points
+ // Circle with an outline
+ // Active state defines size and color
{
- 'id': 'gl-draw-polygon-and-line-vertex-stroke-inactive',
+ 'id': 'gl-draw-point-outer',
'type': 'circle',
- 'filter': ['all',
- ['==', 'meta', 'vertex'],
+ 'filter': [
+ 'all',
['==', '$type', 'Point'],
- ['!=', 'mode', 'static']
- ],
- 'paint': {
- 'circle-radius': 5,
- 'circle-color': '#fff'
- }
- },
- {
- 'id': 'gl-draw-polygon-and-line-vertex-inactive',
- 'type': 'circle',
- 'filter': ['all',
- ['==', 'meta', 'vertex'],
- ['==', '$type', 'Point'],
- ['!=', 'mode', 'static']
+ ['==', 'meta', 'feature'],
],
'paint': {
- 'circle-radius': 3,
- 'circle-color': '#fbb03b'
- }
+ 'circle-radius': [
+ 'case',
+ ['==', ['get', 'active'], 'true'], 7,
+ 5,
+ ],
+ 'circle-color': white,
+ },
},
{
- 'id': 'gl-draw-point-point-stroke-inactive',
+ 'id': 'gl-draw-point-inner',
'type': 'circle',
- 'filter': ['all',
- ['==', 'active', 'false'],
+ 'filter': [
+ 'all',
['==', '$type', 'Point'],
['==', 'meta', 'feature'],
- ['!=', 'mode', 'static']
],
'paint': {
- 'circle-radius': 5,
- 'circle-opacity': 1,
- 'circle-color': '#fff'
- }
+ 'circle-radius': [
+ 'case',
+ ['==', ['get', 'active'], 'true'], 5,
+ 3,
+ ],
+ 'circle-color': [
+ 'case',
+ ['==', ['get', 'active'], 'true'], orange,
+ blue,
+ ],
+ },
},
+ // Vertex
+ // Visible when editing polygons and lines
+ // Similar behaviour to Points
+ // Active state defines size
{
- 'id': 'gl-draw-point-inactive',
+ 'id': 'gl-draw-vertex-outer',
'type': 'circle',
- 'filter': ['all',
- ['==', 'active', 'false'],
+ 'filter': [
+ 'all',
['==', '$type', 'Point'],
- ['==', 'meta', 'feature'],
- ['!=', 'mode', 'static']
+ ['==', 'meta', 'vertex'],
+ ['!=', 'mode', 'simple_select'],
],
'paint': {
- 'circle-radius': 3,
- 'circle-color': '#3bb2d0'
- }
+ 'circle-radius': [
+ 'case',
+ ['==', ['get', 'active'], 'true'], 7,
+ 5,
+ ],
+ 'circle-color': white,
+ },
},
{
- 'id': 'gl-draw-point-stroke-active',
+ 'id': 'gl-draw-vertex-inner',
'type': 'circle',
- 'filter': ['all',
+ 'filter': [
+ 'all',
['==', '$type', 'Point'],
- ['==', 'active', 'true'],
- ['!=', 'meta', 'midpoint']
+ ['==', 'meta', 'vertex'],
+ ['!=', 'mode', 'simple_select'],
],
'paint': {
- 'circle-radius': 7,
- 'circle-color': '#fff'
- }
+ 'circle-radius': [
+ 'case',
+ ['==', ['get', 'active'], 'true'], 5,
+ 3,
+ ],
+ 'circle-color': orange,
+ },
},
+ // Midpoint
+ // Visible when editing polygons and lines
+ // Tapping or dragging them adds a new vertex to the feature
{
- 'id': 'gl-draw-point-active',
+ 'id': 'gl-draw-midpoint',
'type': 'circle',
- 'filter': ['all',
- ['==', '$type', 'Point'],
- ['!=', 'meta', 'midpoint'],
- ['==', 'active', 'true']],
- 'paint': {
- 'circle-radius': 5,
- 'circle-color': '#fbb03b'
- }
- },
- {
- 'id': 'gl-draw-polygon-fill-static',
- 'type': 'fill',
- 'filter': ['all', ['==', 'mode', 'static'], ['==', '$type', 'Polygon']],
- 'paint': {
- 'fill-color': '#404040',
- 'fill-outline-color': '#404040',
- 'fill-opacity': 0.1
- }
- },
- {
- 'id': 'gl-draw-polygon-stroke-static',
- 'type': 'line',
- 'filter': ['all', ['==', 'mode', 'static'], ['==', '$type', 'Polygon']],
- 'layout': {
- 'line-cap': 'round',
- 'line-join': 'round'
- },
+ 'filter': [
+ 'all',
+ ['==', 'meta', 'midpoint'],
+ ],
'paint': {
- 'line-color': '#404040',
- 'line-width': 2
- }
- },
- {
- 'id': 'gl-draw-line-static',
- 'type': 'line',
- 'filter': ['all', ['==', 'mode', 'static'], ['==', '$type', 'LineString']],
- 'layout': {
- 'line-cap': 'round',
- 'line-join': 'round'
+ 'circle-radius': 3,
+ 'circle-color': orange,
},
- 'paint': {
- 'line-color': '#404040',
- 'line-width': 2
- }
},
- {
- 'id': 'gl-draw-point-static',
- 'type': 'circle',
- 'filter': ['all', ['==', 'mode', 'static'], ['==', '$type', 'Point']],
- 'paint': {
- 'circle-radius': 5,
- 'circle-color': '#404040'
- }
- }
];
diff --git a/test/api.test.js b/test/api.test.js
index f49de3e96..34388a656 100644
--- a/test/api.test.js
+++ b/test/api.test.js
@@ -402,8 +402,7 @@ test('Draw.modes', () => {
assert.equal(Draw.modes.DRAW_POINT, Constants.modes.DRAW_POINT, 'draw_point');
assert.equal(Draw.modes.DRAW_LINE_STRING, Constants.modes.DRAW_LINE_STRING, 'draw_line_string');
assert.equal(Draw.modes.DRAW_POLYGON, Constants.modes.DRAW_POLYGON, 'draw_polygon');
- assert.equal(Draw.modes.STATIC, Constants.modes.STATIC, 'static');
- assert.equal(getPublicMemberKeys(Draw.modes).length, 6, 'no unexpected modes');
+ assert.equal(getPublicMemberKeys(Draw.modes).length, 5, 'no unexpected modes');
});
test('Draw.combineFeatures -- polygon + polygon = multiploygon', () => {
diff --git a/test/fixtures/style_with_sources.json b/test/fixtures/style_with_sources.json
index 91e88b0ad..9b995727c 100644
--- a/test/fixtures/style_with_sources.json
+++ b/test/fixtures/style_with_sources.json
@@ -1 +1,486 @@
-[{"id":"gl-draw-polygon-fill-inactive.cold","type":"fill","filter":["all",["==","active","false"],["==","$type","Polygon"],["!=","mode","static"]],"paint":{"fill-color":"#3bb2d0","fill-outline-color":"#3bb2d0","fill-opacity":0.1},"source":"mapbox-gl-draw-cold"},{"id":"gl-draw-polygon-fill-active.cold","type":"fill","filter":["all",["==","active","true"],["==","$type","Polygon"]],"paint":{"fill-color":"#fbb03b","fill-outline-color":"#fbb03b","fill-opacity":0.1},"source":"mapbox-gl-draw-cold"},{"id":"gl-draw-polygon-midpoint.cold","type":"circle","filter":["all",["==","$type","Point"],["==","meta","midpoint"]],"paint":{"circle-radius":3,"circle-color":"#fbb03b"},"source":"mapbox-gl-draw-cold"},{"id":"gl-draw-polygon-stroke-inactive.cold","type":"line","filter":["all",["==","active","false"],["==","$type","Polygon"],["!=","mode","static"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-color":"#3bb2d0","line-width":2},"source":"mapbox-gl-draw-cold"},{"id":"gl-draw-polygon-stroke-active.cold","type":"line","filter":["all",["==","active","true"],["==","$type","Polygon"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-color":"#fbb03b","line-dasharray":[0.2,2],"line-width":2},"source":"mapbox-gl-draw-cold"},{"id":"gl-draw-line-inactive.cold","type":"line","filter":["all",["==","active","false"],["==","$type","LineString"],["!=","mode","static"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-color":"#3bb2d0","line-width":2},"source":"mapbox-gl-draw-cold"},{"id":"gl-draw-line-active.cold","type":"line","filter":["all",["==","$type","LineString"],["==","active","true"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-color":"#fbb03b","line-dasharray":[0.2,2],"line-width":2},"source":"mapbox-gl-draw-cold"},{"id":"gl-draw-polygon-and-line-vertex-stroke-inactive.cold","type":"circle","filter":["all",["==","meta","vertex"],["==","$type","Point"],["!=","mode","static"]],"paint":{"circle-radius":5,"circle-color":"#fff"},"source":"mapbox-gl-draw-cold"},{"id":"gl-draw-polygon-and-line-vertex-inactive.cold","type":"circle","filter":["all",["==","meta","vertex"],["==","$type","Point"],["!=","mode","static"]],"paint":{"circle-radius":3,"circle-color":"#fbb03b"},"source":"mapbox-gl-draw-cold"},{"id":"gl-draw-point-point-stroke-inactive.cold","type":"circle","filter":["all",["==","active","false"],["==","$type","Point"],["==","meta","feature"],["!=","mode","static"]],"paint":{"circle-radius":5,"circle-opacity":1,"circle-color":"#fff"},"source":"mapbox-gl-draw-cold"},{"id":"gl-draw-point-inactive.cold","type":"circle","filter":["all",["==","active","false"],["==","$type","Point"],["==","meta","feature"],["!=","mode","static"]],"paint":{"circle-radius":3,"circle-color":"#3bb2d0"},"source":"mapbox-gl-draw-cold"},{"id":"gl-draw-point-stroke-active.cold","type":"circle","filter":["all",["==","$type","Point"],["==","active","true"],["!=","meta","midpoint"]],"paint":{"circle-radius":7,"circle-color":"#fff"},"source":"mapbox-gl-draw-cold"},{"id":"gl-draw-point-active.cold","type":"circle","filter":["all",["==","$type","Point"],["!=","meta","midpoint"],["==","active","true"]],"paint":{"circle-radius":5,"circle-color":"#fbb03b"},"source":"mapbox-gl-draw-cold"},{"id":"gl-draw-polygon-fill-static.cold","type":"fill","filter":["all",["==","mode","static"],["==","$type","Polygon"]],"paint":{"fill-color":"#404040","fill-outline-color":"#404040","fill-opacity":0.1},"source":"mapbox-gl-draw-cold"},{"id":"gl-draw-polygon-stroke-static.cold","type":"line","filter":["all",["==","mode","static"],["==","$type","Polygon"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-color":"#404040","line-width":2},"source":"mapbox-gl-draw-cold"},{"id":"gl-draw-line-static.cold","type":"line","filter":["all",["==","mode","static"],["==","$type","LineString"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-color":"#404040","line-width":2},"source":"mapbox-gl-draw-cold"},{"id":"gl-draw-point-static.cold","type":"circle","filter":["all",["==","mode","static"],["==","$type","Point"]],"paint":{"circle-radius":5,"circle-color":"#404040"},"source":"mapbox-gl-draw-cold"},{"id":"gl-draw-polygon-fill-inactive.hot","type":"fill","filter":["all",["==","active","false"],["==","$type","Polygon"],["!=","mode","static"]],"paint":{"fill-color":"#3bb2d0","fill-outline-color":"#3bb2d0","fill-opacity":0.1},"source":"mapbox-gl-draw-hot"},{"id":"gl-draw-polygon-fill-active.hot","type":"fill","filter":["all",["==","active","true"],["==","$type","Polygon"]],"paint":{"fill-color":"#fbb03b","fill-outline-color":"#fbb03b","fill-opacity":0.1},"source":"mapbox-gl-draw-hot"},{"id":"gl-draw-polygon-midpoint.hot","type":"circle","filter":["all",["==","$type","Point"],["==","meta","midpoint"]],"paint":{"circle-radius":3,"circle-color":"#fbb03b"},"source":"mapbox-gl-draw-hot"},{"id":"gl-draw-polygon-stroke-inactive.hot","type":"line","filter":["all",["==","active","false"],["==","$type","Polygon"],["!=","mode","static"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-color":"#3bb2d0","line-width":2},"source":"mapbox-gl-draw-hot"},{"id":"gl-draw-polygon-stroke-active.hot","type":"line","filter":["all",["==","active","true"],["==","$type","Polygon"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-color":"#fbb03b","line-dasharray":[0.2,2],"line-width":2},"source":"mapbox-gl-draw-hot"},{"id":"gl-draw-line-inactive.hot","type":"line","filter":["all",["==","active","false"],["==","$type","LineString"],["!=","mode","static"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-color":"#3bb2d0","line-width":2},"source":"mapbox-gl-draw-hot"},{"id":"gl-draw-line-active.hot","type":"line","filter":["all",["==","$type","LineString"],["==","active","true"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-color":"#fbb03b","line-dasharray":[0.2,2],"line-width":2},"source":"mapbox-gl-draw-hot"},{"id":"gl-draw-polygon-and-line-vertex-stroke-inactive.hot","type":"circle","filter":["all",["==","meta","vertex"],["==","$type","Point"],["!=","mode","static"]],"paint":{"circle-radius":5,"circle-color":"#fff"},"source":"mapbox-gl-draw-hot"},{"id":"gl-draw-polygon-and-line-vertex-inactive.hot","type":"circle","filter":["all",["==","meta","vertex"],["==","$type","Point"],["!=","mode","static"]],"paint":{"circle-radius":3,"circle-color":"#fbb03b"},"source":"mapbox-gl-draw-hot"},{"id":"gl-draw-point-point-stroke-inactive.hot","type":"circle","filter":["all",["==","active","false"],["==","$type","Point"],["==","meta","feature"],["!=","mode","static"]],"paint":{"circle-radius":5,"circle-opacity":1,"circle-color":"#fff"},"source":"mapbox-gl-draw-hot"},{"id":"gl-draw-point-inactive.hot","type":"circle","filter":["all",["==","active","false"],["==","$type","Point"],["==","meta","feature"],["!=","mode","static"]],"paint":{"circle-radius":3,"circle-color":"#3bb2d0"},"source":"mapbox-gl-draw-hot"},{"id":"gl-draw-point-stroke-active.hot","type":"circle","filter":["all",["==","$type","Point"],["==","active","true"],["!=","meta","midpoint"]],"paint":{"circle-radius":7,"circle-color":"#fff"},"source":"mapbox-gl-draw-hot"},{"id":"gl-draw-point-active.hot","type":"circle","filter":["all",["==","$type","Point"],["!=","meta","midpoint"],["==","active","true"]],"paint":{"circle-radius":5,"circle-color":"#fbb03b"},"source":"mapbox-gl-draw-hot"},{"id":"gl-draw-polygon-fill-static.hot","type":"fill","filter":["all",["==","mode","static"],["==","$type","Polygon"]],"paint":{"fill-color":"#404040","fill-outline-color":"#404040","fill-opacity":0.1},"source":"mapbox-gl-draw-hot"},{"id":"gl-draw-polygon-stroke-static.hot","type":"line","filter":["all",["==","mode","static"],["==","$type","Polygon"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-color":"#404040","line-width":2},"source":"mapbox-gl-draw-hot"},{"id":"gl-draw-line-static.hot","type":"line","filter":["all",["==","mode","static"],["==","$type","LineString"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-color":"#404040","line-width":2},"source":"mapbox-gl-draw-hot"},{"id":"gl-draw-point-static.hot","type":"circle","filter":["all",["==","mode","static"],["==","$type","Point"]],"paint":{"circle-radius":5,"circle-color":"#404040"},"source":"mapbox-gl-draw-hot"}]
+[
+ {
+ "id": "gl-draw-polygon-fill.cold",
+ "type": "fill",
+ "filter": [
+ "all",
+ [
+ "==",
+ "$type",
+ "Polygon"
+ ]
+ ],
+ "paint": {
+ "fill-color": [
+ "case",
+ [
+ "==",
+ [
+ "get",
+ "active"
+ ],
+ "true"
+ ],
+ "#fbb03b",
+ "#3bb2d0"
+ ],
+ "fill-opacity": 0.1
+ },
+ "source": "mapbox-gl-draw-cold"
+ },
+ {
+ "id": "gl-draw-lines.cold",
+ "type": "line",
+ "filter": [
+ "any",
+ [
+ "==",
+ "$type",
+ "LineString"
+ ],
+ [
+ "==",
+ "$type",
+ "Polygon"
+ ]
+ ],
+ "layout": {
+ "line-cap": "round",
+ "line-join": "round"
+ },
+ "paint": {
+ "line-color": [
+ "case",
+ [
+ "==",
+ [
+ "get",
+ "active"
+ ],
+ "true"
+ ],
+ "#fbb03b",
+ "#3bb2d0"
+ ],
+ "line-width": 2
+ },
+ "source": "mapbox-gl-draw-cold"
+ },
+ {
+ "id": "gl-draw-point-outer.cold",
+ "type": "circle",
+ "filter": [
+ "all",
+ [
+ "==",
+ "$type",
+ "Point"
+ ],
+ [
+ "==",
+ "meta",
+ "feature"
+ ]
+ ],
+ "paint": {
+ "circle-radius": [
+ "case",
+ [
+ "==",
+ [
+ "get",
+ "active"
+ ],
+ "true"
+ ],
+ 7,
+ 5
+ ],
+ "circle-color": "#fff"
+ },
+ "source": "mapbox-gl-draw-cold"
+ },
+ {
+ "id": "gl-draw-point-inner.cold",
+ "type": "circle",
+ "filter": [
+ "all",
+ [
+ "==",
+ "$type",
+ "Point"
+ ],
+ [
+ "==",
+ "meta",
+ "feature"
+ ]
+ ],
+ "paint": {
+ "circle-radius": [
+ "case",
+ [
+ "==",
+ [
+ "get",
+ "active"
+ ],
+ "true"
+ ],
+ 5,
+ 3
+ ],
+ "circle-color": [
+ "case",
+ [
+ "==",
+ [
+ "get",
+ "active"
+ ],
+ "true"
+ ],
+ "#fbb03b",
+ "#3bb2d0"
+ ]
+ },
+ "source": "mapbox-gl-draw-cold"
+ },
+ {
+ "id": "gl-draw-vertex-outer.cold",
+ "type": "circle",
+ "filter": [
+ "all",
+ [
+ "==",
+ "$type",
+ "Point"
+ ],
+ [
+ "==",
+ "meta",
+ "vertex"
+ ],
+ [
+ "!=",
+ "mode",
+ "simple_select"
+ ]
+ ],
+ "paint": {
+ "circle-radius": [
+ "case",
+ [
+ "==",
+ [
+ "get",
+ "active"
+ ],
+ "true"
+ ],
+ 7,
+ 5
+ ],
+ "circle-color": "#fff"
+ },
+ "source": "mapbox-gl-draw-cold"
+ },
+ {
+ "id": "gl-draw-vertex-inner.cold",
+ "type": "circle",
+ "filter": [
+ "all",
+ [
+ "==",
+ "$type",
+ "Point"
+ ],
+ [
+ "==",
+ "meta",
+ "vertex"
+ ],
+ [
+ "!=",
+ "mode",
+ "simple_select"
+ ]
+ ],
+ "paint": {
+ "circle-radius": [
+ "case",
+ [
+ "==",
+ [
+ "get",
+ "active"
+ ],
+ "true"
+ ],
+ 5,
+ 3
+ ],
+ "circle-color": "#fbb03b"
+ },
+ "source": "mapbox-gl-draw-cold"
+ },
+ {
+ "id": "gl-draw-midpoint.cold",
+ "type": "circle",
+ "filter": [
+ "all",
+ [
+ "==",
+ "meta",
+ "midpoint"
+ ]
+ ],
+ "paint": {
+ "circle-radius": 3,
+ "circle-color": "#fbb03b"
+ },
+ "source": "mapbox-gl-draw-cold"
+ },
+ {
+ "id": "gl-draw-polygon-fill.hot",
+ "type": "fill",
+ "filter": [
+ "all",
+ [
+ "==",
+ "$type",
+ "Polygon"
+ ]
+ ],
+ "paint": {
+ "fill-color": [
+ "case",
+ [
+ "==",
+ [
+ "get",
+ "active"
+ ],
+ "true"
+ ],
+ "#fbb03b",
+ "#3bb2d0"
+ ],
+ "fill-opacity": 0.1
+ },
+ "source": "mapbox-gl-draw-hot"
+ },
+ {
+ "id": "gl-draw-lines.hot",
+ "type": "line",
+ "filter": [
+ "any",
+ [
+ "==",
+ "$type",
+ "LineString"
+ ],
+ [
+ "==",
+ "$type",
+ "Polygon"
+ ]
+ ],
+ "layout": {
+ "line-cap": "round",
+ "line-join": "round"
+ },
+ "paint": {
+ "line-color": [
+ "case",
+ [
+ "==",
+ [
+ "get",
+ "active"
+ ],
+ "true"
+ ],
+ "#fbb03b",
+ "#3bb2d0"
+ ],
+ "line-width": 2
+ },
+ "source": "mapbox-gl-draw-hot"
+ },
+ {
+ "id": "gl-draw-point-outer.hot",
+ "type": "circle",
+ "filter": [
+ "all",
+ [
+ "==",
+ "$type",
+ "Point"
+ ],
+ [
+ "==",
+ "meta",
+ "feature"
+ ]
+ ],
+ "paint": {
+ "circle-radius": [
+ "case",
+ [
+ "==",
+ [
+ "get",
+ "active"
+ ],
+ "true"
+ ],
+ 7,
+ 5
+ ],
+ "circle-color": "#fff"
+ },
+ "source": "mapbox-gl-draw-hot"
+ },
+ {
+ "id": "gl-draw-point-inner.hot",
+ "type": "circle",
+ "filter": [
+ "all",
+ [
+ "==",
+ "$type",
+ "Point"
+ ],
+ [
+ "==",
+ "meta",
+ "feature"
+ ]
+ ],
+ "paint": {
+ "circle-radius": [
+ "case",
+ [
+ "==",
+ [
+ "get",
+ "active"
+ ],
+ "true"
+ ],
+ 5,
+ 3
+ ],
+ "circle-color": [
+ "case",
+ [
+ "==",
+ [
+ "get",
+ "active"
+ ],
+ "true"
+ ],
+ "#fbb03b",
+ "#3bb2d0"
+ ]
+ },
+ "source": "mapbox-gl-draw-hot"
+ },
+ {
+ "id": "gl-draw-vertex-outer.hot",
+ "type": "circle",
+ "filter": [
+ "all",
+ [
+ "==",
+ "$type",
+ "Point"
+ ],
+ [
+ "==",
+ "meta",
+ "vertex"
+ ],
+ [
+ "!=",
+ "mode",
+ "simple_select"
+ ]
+ ],
+ "paint": {
+ "circle-radius": [
+ "case",
+ [
+ "==",
+ [
+ "get",
+ "active"
+ ],
+ "true"
+ ],
+ 7,
+ 5
+ ],
+ "circle-color": "#fff"
+ },
+ "source": "mapbox-gl-draw-hot"
+ },
+ {
+ "id": "gl-draw-vertex-inner.hot",
+ "type": "circle",
+ "filter": [
+ "all",
+ [
+ "==",
+ "$type",
+ "Point"
+ ],
+ [
+ "==",
+ "meta",
+ "vertex"
+ ],
+ [
+ "!=",
+ "mode",
+ "simple_select"
+ ]
+ ],
+ "paint": {
+ "circle-radius": [
+ "case",
+ [
+ "==",
+ [
+ "get",
+ "active"
+ ],
+ "true"
+ ],
+ 5,
+ 3
+ ],
+ "circle-color": "#fbb03b"
+ },
+ "source": "mapbox-gl-draw-hot"
+ },
+ {
+ "id": "gl-draw-midpoint.hot",
+ "type": "circle",
+ "filter": [
+ "all",
+ [
+ "==",
+ "meta",
+ "midpoint"
+ ]
+ ],
+ "paint": {
+ "circle-radius": 3,
+ "circle-color": "#fbb03b"
+ },
+ "source": "mapbox-gl-draw-hot"
+ }
+]
\ No newline at end of file