<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.11.0.css" />
<script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.11.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;
}
</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>
<script>
// This example shows how to switch map styles with a custom symbol layer.
TrimbleMaps.APIKey = 'YOUR_API_KEY_HERE';
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: 4 // starting zoom
});
const layerList = document.getElementById('menu');
const inputs = layerList.getElementsByTagName('input');
const geoJsonData = {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [{
type: 'Feature',
properties: {
name: 'TrimbleMAPS HQ'
},
geometry: {
type: 'Point',
coordinates: [-74.60018, 40.36144]
}
}]
}
};
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;
}
map.on('styledata', (e) => {
const layerId = 'hqPoints';
const source = 'hqSource';
const markerIcon = 'marker-icon';
if (map.getSource(source) === undefined)
map.addSource(source, geoJsonData);
let imgUrl = 'https://developer.trimblemaps.com/maps-sdk/img/marker_blue.png';
if (window.location.origin === 'http://127.0.0.1:8080')
imgUrl = 'http://127.0.0.1:8080/img/marker_blue.png';
map.loadImage(imgUrl, function (error, image) {
if (!map.hasImage(markerIcon)) {
map.addImage(markerIcon, image);
}
});
if (map.getLayer(layerId) === undefined) {
map.addLayer({
id: layerId,
type: 'symbol',
source: source,
layout: {
'icon-image': markerIcon,
'icon-size': 1
}
});
}
});
</script>
</body>
</html>