Only showing indoor maps
Hide the exterior view and only show indoor maps. Use the Switch Indoor Map
button to switch between indoor maps.
Loading...
<!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" />
<link href="https://cdn-webgl.wrld3d.com/wrldjs/addons/resources/v1/latest/css/wrld.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdn-webgl.wrld3d.com/wrldjs/addons/indoor_control/v1/latest/indoor_control.js"></script>
</head>
<body>
<div style="position: relative">
<style>
.loading-screen {
position: absolute;
right: 0px;
left: 0px;
top: 0px;
bottom: 0px;
z-index: 150;
background-color: rgb(61, 68, 71);
height: 400px;
}
.hidden {
visibility: hidden;
}
.loading-text {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: inherit;
font-family: amsibold,'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
}
.eegeo-indoor-control #eegeo-exit-interior-button-container {
visibility: hidden;
}
</style>
<div id="loading-screen" class="loading-screen">
<div class="loading-text">Loading...</div>
</div>
<div id="topRightButtons" style="position: absolute; right: 0; bottom: 20px; z-index: 20">
<button type="button" onclick="switchIndoorMap()">Switch Indoor Map</button>
</div>
<div id="widget-container" class="wrld-widget-container"></div>
<div id="map" style="height: 400px"></div>
<script>
const indoorMaps = ["westport_house", "EIM-e16a94b1-f64f-41ed-a3c6-8397d9cfe607", "intercontinental_hotel_8628", "70f9b00f-8c4f-4570-9a23-62bd80a76f8a"];
var indoorMapLoaded = {};
var currentIndoorMapIndex = 0;
var currentIndoorMap = indoorMaps[currentIndoorMapIndex];
var map = Wrld.map("map", "your_api_key_here", {
center: [56.459993, -2.978231],
indoorsEnabled: true,
drawClearColor: "#3d4447",
indoorMapBackgroundColor: "#3d4447"
});
var indoorControl = new WrldIndoorControl("widget-container", map);
var isShowingLoadingScreen = true;
setLoadingScreenVisibility(isShowingLoadingScreen);
function onIndoorMapEntered(event) {
if (isShowingLoadingScreen) {
if (currentIndoorMap in indoorMapLoaded && indoorMapLoaded[currentIndoorMap]) {
setLoadingScreenVisibility(false);
}
else {
indoorMapLoaded[currentIndoorMap] = true;
setTimeout(() => {
setLoadingScreenVisibility(false);
}, 500);
}
}
}
function onInitialStreamingComplete() {
enterCurrentIndoorMap();
}
function setLoadingScreenVisibility(visible) {
var className = visible ? "loading-screen" : "loading-screen hidden";
var loadingScreen = document.getElementById("loading-screen");
loadingScreen.className = className;
isShowingLoadingScreen = visible;
}
function enterCurrentIndoorMap() {
if (map.indoors.isIndoors()) {
map.indoors.exit();
}
map.indoors.enter(currentIndoorMap, {
animate: false
});
}
var switchIndoorMap = function () {
currentIndoorMapIndex = (currentIndoorMapIndex + 1) % indoorMaps.length;
currentIndoorMap = indoorMaps[currentIndoorMapIndex];
if (!isShowingLoadingScreen) {
setLoadingScreenVisibility(true);
enterCurrentIndoorMap();
}
}
function onIndoorMapEnterFailed(event) {
console.log("onIndoorMapEnterFailed");
}
map.on("initialstreamingcomplete", onInitialStreamingComplete)
map.indoors.on("indoormapenter", onIndoorMapEntered);
map.indoors.on("indoormapenterfailed", onIndoorMapEnterFailed);
</script>
</div>
</body>
</html>