Querying building information
Obtain information about a building at a location and place a marker above its centroid.
<!DOCTYPE HTML>
<html>
<head>
<script src="https://unpkg.com/wrld.js@1.x.x"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet.css" rel="stylesheet" />
</head>
<body>
<div style="position: relative">
<div id="map" style="height: 400px"></div>
<script>
var map = Wrld.map("map", "your_api_key_here", {
center: [37.784079, -122.396762],
zoom: 18
});
function onInitialStreamingComplete() {
var buildingHighlight = Wrld.buildings.buildingHighlight(
Wrld.buildings.buildingHighlightOptions()
.highlightBuildingAtLocation([37.784079, -122.396762])
.informationOnly()
)
.addTo(map);
}
function onBuildingInformationReceived(event) {
var buildingInformation = event.buildingHighlight.getBuildingInformation();
if (buildingInformation !== null) {
console.log(JSON.stringify(buildingInformation.toJson()));
var buildingDimensions = buildingInformation.getBuildingDimensions();
var groundAltitude = buildingDimensions.getBaseAltitude();
var buildingHeight = (buildingDimensions.getTopAltitude() - groundAltitude);
var title = "Height: " + buildingHeight.toFixed(2) + " m";
Wrld.marker(buildingDimensions.getCentroid(), {
elevation: buildingHeight,
title: title
}).addTo(map);
var contours = buildingInformation.getBuildingContours();
contours.forEach(function(contour) {
var points = contour.getPoints();
points.push(points[0]);
var polyline = Wrld.polyline(points, {
elevation: (contour.getTopAltitude() - groundAltitude),
elevationMode: "heightAboveGround",
color: "blue"
})
.addTo(map);
});
}
else {
console.log("No building information was received for building highlight id: " + event.buildingHighlight.getId());
}
}
map.on("initialstreamingcomplete", onInitialStreamingComplete);
map.buildings.on("buildinginformationreceived", onBuildingInformationReceived);
</script>
</div>
</body>
</html>