Created
February 2, 2018 20:47
-
-
Save dnseminara/0790e53cef9867e848e716937727ab18 to your computer and use it in GitHub Desktop.
Mapbox Draw - Color Change
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset='utf-8' /> | |
| <title>Draw Color Change Example</title> | |
| <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> | |
| <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.js'></script> | |
| <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.css' rel='stylesheet' /> | |
| <style> | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| #map { | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| width: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <style> | |
| #black-color, | |
| #red-color, | |
| #green-color { | |
| z-index: 1005; | |
| position: absolute; | |
| right: 5px; | |
| color: white; | |
| } | |
| #black-color { | |
| top: 10px; | |
| background-color: black; | |
| } | |
| #red-color { | |
| top: 35px; | |
| background-color: red; | |
| } | |
| #green-color { | |
| top: 60px; | |
| background-color: green; | |
| } | |
| </style> | |
| <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.4/mapbox-gl-draw.js'></script> | |
| <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.4/mapbox-gl-draw.css' type='text/css' /> | |
| <div id='map'> | |
| <button id="black-color" onclick="changeColor('black')">Change to Black</button> | |
| <button id="red-color" onclick="changeColor('red')">Change to Red</button> | |
| <button id="green-color" onclick="changeColor('green')">Change to Green</button> | |
| </div> | |
| <script> | |
| mapboxgl.accessToken = ''; | |
| var map = new mapboxgl.Map({ | |
| container: 'map', // container id | |
| style: 'mapbox://styles/mapbox/light-v9', //hosted style id | |
| zoom: 7, | |
| center: [-76.462, 38.258], | |
| }); | |
| var drawFeatureID = ''; | |
| var newDrawFeature = false; | |
| // add draw | |
| var draw = new MapboxDraw({ | |
| // this is used to allow for custom properties for styling | |
| // it appends the word "user_" to the property | |
| userProperties: true, | |
| controls: { | |
| 'combine_features': false, | |
| 'uncombine_features': false, | |
| }, | |
| styles: [ | |
| // default themes provided by MB Draw | |
| // default themes provided by MB Draw | |
| // default themes provided by MB Draw | |
| // default themes provided by MB Draw | |
| { | |
| 'id': 'gl-draw-polygon-fill-inactive', | |
| 'type': 'fill', | |
| 'filter': ['all', ['==', 'active', 'false'], | |
| ['==', '$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' | |
| }, | |
| 'paint': { | |
| 'line-color': '#fbb03b', | |
| 'line-dasharray': [0.2, 2], | |
| 'line-width': 2 | |
| } | |
| }, | |
| { | |
| 'id': 'gl-draw-line-inactive', | |
| 'type': 'line', | |
| 'filter': ['all', ['==', 'active', 'false'], | |
| ['==', '$type', 'LineString'], | |
| ['!=', 'mode', 'static'] | |
| ], | |
| 'layout': { | |
| 'line-cap': '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' | |
| }, | |
| 'paint': { | |
| 'line-color': '#fbb03b', | |
| 'line-dasharray': [0.2, 2], | |
| 'line-width': 2 | |
| } | |
| }, | |
| { | |
| 'id': 'gl-draw-polygon-and-line-vertex-stroke-inactive', | |
| 'type': 'circle', | |
| 'filter': ['all', ['==', 'meta', 'vertex'], | |
| ['==', '$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'] | |
| ], | |
| 'paint': { | |
| 'circle-radius': 3, | |
| 'circle-color': '#fbb03b' | |
| } | |
| }, | |
| { | |
| 'id': 'gl-draw-point-point-stroke-inactive', | |
| 'type': 'circle', | |
| 'filter': ['all', ['==', 'active', 'false'], | |
| ['==', '$type', 'Point'], | |
| ['==', 'meta', 'feature'], | |
| ['!=', 'mode', 'static'] | |
| ], | |
| 'paint': { | |
| 'circle-radius': 5, | |
| 'circle-opacity': 1, | |
| 'circle-color': '#fff' | |
| } | |
| }, | |
| { | |
| 'id': 'gl-draw-point-inactive', | |
| 'type': 'circle', | |
| 'filter': ['all', ['==', 'active', 'false'], | |
| ['==', '$type', 'Point'], | |
| ['==', 'meta', 'feature'], | |
| ['!=', 'mode', 'static'] | |
| ], | |
| 'paint': { | |
| 'circle-radius': 3, | |
| 'circle-color': '#3bb2d0' | |
| } | |
| }, | |
| { | |
| 'id': 'gl-draw-point-stroke-active', | |
| 'type': 'circle', | |
| 'filter': ['all', ['==', '$type', 'Point'], | |
| ['==', 'active', 'true'], | |
| ['!=', 'meta', 'midpoint'] | |
| ], | |
| 'paint': { | |
| 'circle-radius': 7, | |
| 'circle-color': '#fff' | |
| } | |
| }, | |
| { | |
| 'id': 'gl-draw-point-active', | |
| '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' | |
| }, | |
| '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' | |
| }, | |
| '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' | |
| } | |
| }, | |
| // end default themes provided by MB Draw | |
| // end default themes provided by MB Draw | |
| // end default themes provided by MB Draw | |
| // end default themes provided by MB Draw | |
| // new styles for toggling colors | |
| // new styles for toggling colors | |
| // new styles for toggling colors | |
| // new styles for toggling colors | |
| { | |
| 'id': 'gl-draw-polygon-color-picker', | |
| 'type': 'fill', | |
| 'filter': ['all', ['==', '$type', 'Polygon'], | |
| ['has', 'user_portColor'] | |
| ], | |
| 'paint': { | |
| 'fill-color': ['get', 'user_portColor'], | |
| 'fill-outline-color': ['get', 'user_portColor'], | |
| 'fill-opacity': 0.5 | |
| } | |
| }, | |
| { | |
| 'id': 'gl-draw-line-color-picker', | |
| 'type': 'line', | |
| 'filter': ['all', ['==', '$type', 'LineString'], | |
| ['has', 'user_portColor'] | |
| ], | |
| 'paint': { | |
| 'line-color': ['get', 'user_portColor'], | |
| 'line-width': 2 | |
| } | |
| }, | |
| { | |
| 'id': 'gl-draw-point-color-picker', | |
| 'type': 'circle', | |
| 'filter': ['all', ['==', '$type', 'Point'], | |
| ['has', 'user_portColor'] | |
| ], | |
| 'paint': { | |
| 'circle-radius': 3, | |
| 'circle-color': ['get', 'user_portColor'] | |
| } | |
| }, | |
| ] | |
| }) | |
| map.addControl(draw, 'top-left'); | |
| //change colors | |
| function changeColor(color) { | |
| if (drawFeatureID !== '' && typeof draw === 'object') { | |
| // add whatever colors you want here... | |
| if (color === 'black') { | |
| draw.setFeatureProperty(drawFeatureID, 'portColor', '#000'); | |
| } else if (color === 'red') { | |
| draw.setFeatureProperty(drawFeatureID, 'portColor', '#ff0000'); | |
| } else if (color === 'green') { | |
| draw.setFeatureProperty(drawFeatureID, 'portColor', '#008000'); | |
| } | |
| var feat = draw.get(drawFeatureID); | |
| draw.add(feat) | |
| } | |
| } | |
| // callback for draw.update and draw.selectionchange | |
| var setDrawFeature = function(e) { | |
| if (e.features.length && e.features[0].type === 'Feature') { | |
| var feat = e.features[0]; | |
| drawFeatureID = feat.id; | |
| } | |
| } | |
| /* Event Handlers for Draw Tools */ | |
| map.on('draw.create', function() { | |
| newDrawFeature = true; | |
| }); | |
| map.on('draw.update', setDrawFeature); | |
| map.on('draw.selectionchange', setDrawFeature); | |
| map.on('click', function(e) { | |
| if (!newDrawFeature) { | |
| var drawFeatureAtPoint = draw.getFeatureIdsAt(e.point); | |
| //if another drawFeature is not found - reset drawFeatureID | |
| drawFeatureID = drawFeatureAtPoint.length ? drawFeatureAtPoint[0] : ''; | |
| } | |
| newDrawFeature = false; | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Nice example, thanks!
Great work! Thank you for doing this. Do you know how to change the style programmably for the next shape about to draw?
Thanks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Nicely done! Thank you for this! I had a terrible time figuring this out.