3D Buildings
Displays 3D buildings on the map. Requires Trimble Maps v3.0.0 or later. Learn more about the 3D Buildings layer.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.22.0.css" />
<script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.22.0.js"></script>
<style>
body { margin: 0; padding: 0; }
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.note {
position: absolute;
top: 20px;
left: 20px;
background-color: rgba(255, 255, 255, 0.8);
font-family: sans-serif;
font-weight: bold;
padding: 4px 8px;
color: maroon;
}
</style>
</head>
<body>
<div id="map"></div>
<div class="note">Right-click drag to rotate</div>
<script>
TrimbleMaps.APIKey = 'YOUR_API_KEY_HERE';
const map = new TrimbleMaps.Map({
container: 'map',
style: TrimbleMaps.Common.Style.TRANSPORTATION,
zoom: 14,
center: [-74.010474, 40.708400],
pitch: 90,
});
map.on('load', () => {
if (map.getLayer('building_3d')) {
map.setLayoutProperty(
'building_3d',
'visibility',
'visible'
);
}
});
</script>
</body>
</html>
3D Buildings
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.22.0.css" />
<script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.22.0.js"></script>
<style>
body { margin: 0; padding: 0; }
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.note {
position: absolute;
top: 20px;
left: 20px;
background-color: rgba(255, 255, 255, 0.8);
font-family: sans-serif;
font-weight: bold;
padding: 4px 8px;
color: maroon;
}
</style>
</head>
<body>
<div id="map"></div>
<div class="note">Right-click drag to rotate</div>
<script>
TrimbleMaps.APIKey = 'YOUR_API_KEY_HERE';
const map = new TrimbleMaps.Map({
container: 'map',
style: TrimbleMaps.Common.Style.TRANSPORTATION,
zoom: 14,
center: [-74.010474, 40.708400],
pitch: 90,
});
map.on('load', () => {
if (map.getLayer('building_3d')) {
map.setLayoutProperty(
'building_3d',
'visibility',
'visible'
);
}
});
</script>
</body>
</html>