html,
body,
arcgis-webscene {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
portal-card {
font-family: "Roboto", sans-serif;
margin: auto;
width: 100%;
}
.map-center {
font-family: "Roboto", sans-serif;
padding: 1em;
text-align: center;
margin: auto;
width: 100%;
background: #e8912e;
color: #fff;
font-weight: bold;
}
#root {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
var url = new URL(location.href);
var params = new URLSearchParams(url.searchParams);
var id = "5a392557cffb485f8fe004e668e9edc0";
if (params.has("id")) {
id = params.get("id");
}
var webscene = document.createElement("arcgis-webscene");
webscene.setAttribute("websceneid", id);
webscene.setAttribute("widgets", "coordinateconversion::bottom-left");
var label = document.getElementById("center");
webscene.addEventListener("change", function(event) {
var center = event.detail[0];
label.innerText =
"Lat: " +
center.latitude.toFixed(3) +
" | Lon: " +
center.longitude.toFixed(3);
});
var root = document.getElementById("root");
root.appendChild(webscene);
