Skip to content

Instantly share code, notes, and snippets.

@dnseminara

dnseminara/index.html

Created February 2, 2018 20:47
Show Gist options
  • Save dnseminara/0790e53cef9867e848e716937727ab18 to your computer and use it in GitHub Desktop.
Save dnseminara/0790e53cef9867e848e716937727ab18 to your computer and use it in GitHub Desktop.
Download ZIP
Mapbox Draw - Color Change
Raw
index.html
<!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>
@dmssk
Copy link

dmssk commented Feb 5, 2021

Nice example, thanks!

@TheReidZhang
Copy link

Great work! Thank you for doing this. Do you know how to change the style programmably for the next shape about to draw?

@tanpld
Copy link

tanpld commented Jul 24, 2023

Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment