3D Terrain
Use the Terrain Control to enable 3D terrain on the map. Requires Trimble Maps v4.0.0 or later.<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>3D Terrain</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@trimbleinc/modus-bootstrap@1.6.2/dist/modus.min.css" /> <link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v4/trimblemaps-4.2.1.css" /> <script src="https://maps-sdk.trimblemaps.com/v4/trimblemaps-4.2.1.js"></script> <style> body { margin: 0; padding: 0; } html, body, #map { height: 100%; } </style> </head> <body> <div id="map"></div> <div class="position-absolute m-3" style="z-index: 1; top: 0; left: 0"> <button type="button" class="btn btn-primary" onclick="map.setStyle(TrimbleMaps.Common.Style.TERRAIN)">Terrain</button> <button type="button" class="btn btn-primary" onclick="map.setStyle(TrimbleMaps.Common.Style.SATELLITE)">Satellite</button> <button type="button" class="btn btn-primary" onclick="map.setStyle(TrimbleMaps.Common.Style.TRANSPORTATION_DARK)">Transportation Dark</button> </div> <script> TrimbleMaps.setAPIKey("68B06901AF7DA34884CE5FB7A202A743"); const map = (window.map = new TrimbleMaps.Map({ container: "map", zoom: 14.5, center: [-106.114, 39.576], bearing: 270, pitch: 56, region: "ww", style: TrimbleMaps.Common.Style.TRANSPORTATION, maxZoom: 18, maxPitch: 85, })); map.addControl( new TrimbleMaps.NavigationControl({ visualizePitch: true, showZoom: true, showCompass: true, }), ); map.on("styledata", () => { // Add new sources and layers if (!map.getSource("hillshadeSource")) { map.addSource("hillshadeSource", { type: "raster-dem", tiles: ["https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png"], encoding: "terrarium", tileSize: 256, }); } if (!map.getSource("terrainSource")) { map.addSource("terrainSource", { type: "raster-dem", tiles: ["https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png"], encoding: "terrarium", tileSize: 256, }); } if (!map.getLayer("hills")) { map.addLayer( { id: "hills", type: "hillshade", source: "hillshadeSource", layout: { visibility: "visible" }, paint: { "hillshade-shadow-color": "#473B24" }, }, "admin_boundary", ); } }); map.on("sourcedata", (e) => { if (e.sourceId === "terrainSource" && e.isSourceLoaded) { //enable the terrain control once terrain sources are loaded. map.setTerrain({ source: "terrainSource", exaggeration: 1, }); } }); map.on("load", () => { // adding the terrain Control to map. map.addControl( new TrimbleMaps.TerrainControl({ source: "terrainSource", }), ); }); </script> </body> </html>
3D Terrain
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>3D Terrain</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@trimbleinc/modus-bootstrap@1.6.2/dist/modus.min.css" /> <link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v4/trimblemaps-4.2.1.css" /> <script src="https://maps-sdk.trimblemaps.com/v4/trimblemaps-4.2.1.js"></script> <style> body { margin: 0; padding: 0; } html, body, #map { height: 100%; } </style> </head> <body> <div id="map"></div> <div class="position-absolute m-3" style="z-index: 1; top: 0; left: 0"> <button type="button" class="btn btn-primary" onclick="map.setStyle(TrimbleMaps.Common.Style.TERRAIN)">Terrain</button> <button type="button" class="btn btn-primary" onclick="map.setStyle(TrimbleMaps.Common.Style.SATELLITE)">Satellite</button> <button type="button" class="btn btn-primary" onclick="map.setStyle(TrimbleMaps.Common.Style.TRANSPORTATION_DARK)">Transportation Dark</button> </div> <script> TrimbleMaps.setAPIKey("68B06901AF7DA34884CE5FB7A202A743"); const map = (window.map = new TrimbleMaps.Map({ container: "map", zoom: 14.5, center: [-106.114, 39.576], bearing: 270, pitch: 56, region: "ww", style: TrimbleMaps.Common.Style.TRANSPORTATION, maxZoom: 18, maxPitch: 85, })); map.addControl( new TrimbleMaps.NavigationControl({ visualizePitch: true, showZoom: true, showCompass: true, }), ); map.on("styledata", () => { // Add new sources and layers if (!map.getSource("hillshadeSource")) { map.addSource("hillshadeSource", { type: "raster-dem", tiles: ["https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png"], encoding: "terrarium", tileSize: 256, }); } if (!map.getSource("terrainSource")) { map.addSource("terrainSource", { type: "raster-dem", tiles: ["https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png"], encoding: "terrarium", tileSize: 256, }); } if (!map.getLayer("hills")) { map.addLayer( { id: "hills", type: "hillshade", source: "hillshadeSource", layout: { visibility: "visible" }, paint: { "hillshade-shadow-color": "#473B24" }, }, "admin_boundary", ); } }); map.on("sourcedata", (e) => { if (e.sourceId === "terrainSource" && e.isSourceLoaded) { //enable the terrain control once terrain sources are loaded. map.setTerrain({ source: "terrainSource", exaggeration: 1, }); } }); map.on("load", () => { // adding the terrain Control to map. map.addControl( new TrimbleMaps.TerrainControl({ source: "terrainSource", }), ); }); </script> </body> </html>