CODEWITHSUNDEEP
javascripthtmlcssmapboxmapbox-gl-js
escigs
escigs

Reputation: 31

How can I use custom HTML buttons to call a Mapbox GL JS Draw Polygon function?

I am trying to build a custom controller for a map using Mapbox GL JS which includes a Draw polygon functionality. But when I wish to include the Draw polygon as per the Mapbox Documentation, it shows a menu on top right of the screen.

This is how it looks whenever I add the JS shown in https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-draw/

This is the JS code which works Mapbox GL JS documentation has provided

var draw = new MapboxDraw({
// Instead of showing all the draw tools, show only the line string and delete tools
displayControlsDefault: false,
controls: {
    line_string: true,
    polygon: true,
    point: true,
    trash: true
}

});


// Add the draw tool to the map
map.addControl(draw);

I want to build a custom button which does the same function of allowing me to draw over a map.

I wish to use this button and it should open the draw cursor similar to when I click on draw function in their default menu

How can I going about doing this?

Upvotes: 3

Views: 3432

Answers (1)

botivegh
botivegh

Reputation: 500

You can apply the drawing mode using draw.changeMode('draw_polygon'). This would trigger the same event as the original button would do. Therefore you can get rid of that. 

document.getElementById('button').onclick = function () {
    draw.changeMode('draw_polygon');

}

Upvotes: 7

Related Questions