<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.9.0.css" />
<script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.9.0.js"></script>
<style>
body { margin: 0; padding: 0; }
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
#menu {
position: absolute;
background: #fff;
padding: 10px;
font-family: 'Open Sans', sans-serif;
}
#pick-on-map {
top: 50px;
position: absolute;
background: #fff;
padding: 8px;
font-family: 'Open Sans', sans-serif;
}
#pick-on-map span {
color: #576571;
line-height: 32px;
display: inline-block;
vertical-align: bottom;
}
#geocodeCtrl .button {
background-image: url('https://developer.trimblemaps.com/maps-sdk/img/marker_blue.png');
height: 22px !important;
width: 22px !important;
border: 1px solid transparent;
display: inline-block;
}
#geocodeCtrl .active {
background-color: #9fb7c8;
border: 1px solid #7f92a0;
}
#geocodeCtrl .inactive {
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
}
.marker-icon {
background-image: url('https://developer.trimblemaps.com/maps-sdk/img/marker_blue.png');
background-repeat: no-repeat;
width: 21px;
height: 25px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="menu">
<input id="transportation" type="radio" name="rtoggle" value="TRANSPORTATION" checked="checked" />
<label for="transportation">transportation</label>
<input id="basic" type="radio" name="rtoggle" value="BASIC" />
<label for="basic">basic</label>
<input id="datalight" type="radio" name="rtoggle" value="DATALIGHT" />
<label for="datalight">datalight</label>
<input id="datadark" type="radio" name="rtoggle" value="DATADARK" />
<label for="datadark">datadark</label>
<input id="terrain" type="radio" name="rtoggle" value="TERRAIN" />
<label for="terrain">terrain</label>
<input id="satellite" type="radio" name="rtoggle" value="SATELLITE" />
<label for="satellite">satellite</label>
</div>
<div id="pick-on-map">
<div id="geocodeCtrl" onclick="toggle()">
<div id="iconDiv" class="inactive button" title="Click map to find an address."></div>
<span>Pick on Map</span>
</div>
<button type="button" onclick="runRoute()">Run Route</button>
<button type="button" onclick="clearRouteStops()">Clear</button>
</div>
<script>
// Click on Pick on Map blue marker icon to enable adding stops on the map.
// After adding 2 or more stops, click Run Route to generate a route.
// Click Clear to remove all routes.
// Click on style radio button to switch map style.
TrimbleMaps.APIKey = 'YOUR_API_KEY_HERE';
let pickOnMapEnabled = false;
let routeCounter = 0;
function toggle() {
const iconDiv = document.getElementById('iconDiv');
iconDiv.classList.toggle('active');
iconDiv.classList.toggle('inactive');
pickOnMapEnabled = !pickOnMapEnabled;
}
function randomColor() {
const r = Math.round(Math.random() * 255);
const g = Math.round(Math.random() * 255);
const b = Math.round(Math.random() * 255);
const color = `rgb(${r}, ${g}, ${b})`;
return color;
}
const map = new TrimbleMaps.Map({
container: 'map', // container id
style: TrimbleMaps.Common.Style.TRANSPORTATION, // hosted style id
center: [-74.60018, 40.36144], // starting position
zoom: 12 // starting zoom
});
const layerList = document.getElementById('menu');
const inputs = layerList.getElementsByTagName('input');
function switchLayer (elem) {
const styleId = elem.target.value;
map.setStyle(TrimbleMaps.Common.Style[styleId]);
}
for (let i = 0; i < inputs.length; i++) {
inputs[i].onclick = switchLayer;
}
let markers = [];
let routes = [];
map.on('click', function (e) {
if (pickOnMapEnabled === true) {
const el = document.createElement('div');
el.className = 'marker-icon';
const marker = new TrimbleMaps.Marker({
element: el,
draggable: true
})
.setLngLat([e.lngLat.lng, e.lngLat.lat]).addTo(map);
markers.push(marker);
}
});
function runRoute() {
routeCounter++;
if (markers.length < 2) {
alert('Need at least 2 stops to run a route.');
return;
}
const stops = [];
for (const marker of markers) {
var ll = marker.getLngLat();
stops.push(ll);
}
const route = new TrimbleMaps.Route({
routeId: `myRoute_${routeCounter}`,
routeColor: randomColor(),
stops: stops,
routeType: TrimbleMaps.Common.RouteType.PRACTICAL,
reportType: [
TrimbleMaps.Common.ReportType.MILEAGE
]
}).addTo(map);
routes.push(route);
route.once('route', function (e) {
// Remove markers
for (const marker of markers) {
marker.remove();
}
markers = [];
});
route.once('report', function (reports) {
// console.log(reports);
});
}
function clearRouteStops() {
// Remove markers
for (const marker of markers) {
marker.remove();
}
markers.splice(0, markers.length);
// Remove route if there is one
for (const route of routes) {
route.remove();
}
routes.splice(0, routes.length);
}
</script>
</body>
</html>