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 lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.21.0.css" />
<script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.21.0.js"></script>
<link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/addon/trimblemaps-draw-1.0.3.css" />
<script src="https://maps-sdk.trimblemaps.com/addon/trimblemaps-draw-1.0.3.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>
Draw Tool Add-on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.21.0.css" />
<script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.21.0.js"></script>
<link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/addon/trimblemaps-draw-1.0.3.css" />
<script src="https://maps-sdk.trimblemaps.com/addon/trimblemaps-draw-1.0.3.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>