Map Styles
Map styles provide the visual styling for the map. The map style can be set when the map is initialized and it can be changed using the setStyle function on a map object. Learn more about Map Styles.<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v2/trimblemaps-2.3.1.css" /> <script src="https://maps-sdk.trimblemaps.com/v2/trimblemaps-2.3.1.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> TrimbleMaps.APIKey = 'YOUR_API_KEY_HERE'; const map = new TrimbleMaps.Map({ container: 'map', // container id style: TrimbleMaps.Common.Style.TRANSPORTATION, //hosted style id center: [-99, 38], // starting position zoom: 4 // starting zoom }); const layerList = document.getElementById('menu'); const inputs = layerList.getElementsByTagName('input'); switchLayer = function(elem) { const styleId = elem.target.value; map.setStyle(TrimbleMaps.Common.Style[styleId]); } for (let i = 0; i < inputs.length; i++) { inputs[i].onclick = switchLayer; } </script> </body> </html>