Skip to main content

Draw Tool Add-on

An add-on that allows a user to draw markers and polygons on a map. Select a tool from the control bar at the top left corner of the map. Single click on the map to select the points you want to add to your drawing and double-click to complete your drawing. Learn more about the Draw Tool add-on.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.3.0.css" />
        <script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.3.0.js"></script>
        <link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/addon/trimblemaps-draw-1.0.0.css" />
        <script src="https://maps-sdk.trimblemaps.com/addon/trimblemaps-draw-1.0.0.js"></script>
        <style>
            body { margin: 0; padding: 0; }

            #map {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>

        <script>
            TrimbleMaps.APIKey = 'YOUR_API_KEY_HERE';
            const map = new TrimbleMaps.Map({
              container: 'map', // container id
                style: TrimbleMaps.Common.Style.TRANSPORTATION, //hosted style id
                center: [-77.38, 39], // starting position
                zoom: 3 // starting zoom
            });

            var Draw = new TrimbleMapsControl.Draw({
              // Include other optional customization options
            });

            // Map#addControl takes an optional second argument to set the position of the control.
            // If no position is specified the control defaults to `top-right`.
            map.addControl(Draw, "top-left");
        </script>
    </body>
</html>
Last updated December 16, 2021.