Map Styles Symbol
Map styles with a symbol style marker layer on astyledata
event.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.19.0.css" /> <script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.19.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>
Map Styles Symbol
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.19.0.css" /> <script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.19.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>