Step-5: Introduction to MapboxDraw tool

Step-5: Introduction to MapboxDraw tool

Introduction:

This step-5 introduces the MapboxDraw tool that adds support for drawing and editing features on Viamap.

Getting Started

To enable drawing and editing features on Viamap, initialize MapboxDraw instance and add controls.

Initialize MapBoxDraw

Following method initializes the Draw tool on the map:

new MapboxDraw(options?)

MapboxDraw() method takes an options object as an argument. All of the options are optional. To see the list of options please refer to MapboxDraw’s official guide here. The following code initializes the MapBox instance with few controls enabled:

var Draw = new MapboxDraw({
    displayControlsDefault: true,
    controls: {
        polygon: true,
        trash: true
    }
});

Add Draw Controls to Viamap

Controls are added using map.addControl(control, position?) method where a control is added on a specified position as shown below:

map.addControl(Draw, 'top-left');

Final Code:

Here is the final code that adds Mapbox Draw tool on Viamap.

A working example can be seen here.

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <title>Viamap vektordemo</title>

        <!-- add viamap bootstrap code -->
        <script src="./js/viamapstrap.js"></script>
    </head>

    <body style="margin:0; padding:0;">
        <nav id="menu"></nav>
        <div id='map' style="position:absolute; top:0; bottom:0; width:100%;"></div>
        <script>
            vms.initmap({
                    container: 'map',
                    hash: false,
                })
                .then(function(map) {
                    map.addControl(new mapboxgl.NavigationControl(), 'top-left');

                    // https://github.com/mapbox/mapbox-gl-draw/blob/master/docs/API.md

                    // use bootstrap loader to add additional sourcecode, initialize on callback
                    vms.load({
                            'jscripts': ['./js/mapbox-gl-draw.js'],
                            'CSSheets': ['./css/mapbox-gl-draw.css'],
                        })
                        .then(function() {

                            var Draw = new MapboxDraw({
                                displayControlsDefault: true,
                                controls: {
                                    polygon: true,
                                    trash: true
                                }
                            });

                            map.addControl(Draw, 'top-left');
                            var draw_search = function(e) {
                                console.log(e.features);
                            }

                            map.on('draw.create', draw_search)
                                .on('draw.update', draw_search);
                        });
                });
        </script>
    </body>

</html>

Do you want to try Viamap? Download “starter kit