Most of our users love the context that our detailed 3D outdoor maps give to their buildings, but some use cases require a focus on the indoor environment only:

Your app UX might want to start with the indoor view, instead of first having to load the outdoor map, have the user click to enter, and then load the indoor map.
Your indoor map is located in a part of the world where we don’t yet have outdoor map coverage, and you prefer not to show the default sea background.
You want to keep the user in the indoor map, with no option to go outside and explore the WRLD.

We recently made some changes to our SDKs to enable this, and added an indoors-only example to our wrld.js docs page. In this blog, I’ll take you through the key steps to building your own indoor-only mapping experience with wrld.js.

Creating your indoor map

If you already have an indoor map, feel free to skip this section or just use one of our public indoor maps. You’ll need the UUID of the indoor map - some of them are shown in the example, such as our HQ "westport-house". Maps created by users will have UUIDs like "EIM-e16a94b1-f64f-41ed-a3c6-8397d9cfe607", which is a shopping centre in Dundee. If you are creating your own map, you’ll find the UUID in the Indoor Map Designer tool.

Creating an indoor map

Most of the time, the simplest way to create an indoor map is to use our Indoor Map Designer to pick a building on the map, claim it, and download a geojson template to edit. You can follow along with our video tutorial or the step-by-step guide on Github.

Did you know, you can create an indoor map even if your building doesn’t exist in the 3D outdoor map? This might be the case if you’re working in an area we don’t have coverage of (e.g. China or India), or your building might be missing from our map data - FAQ: Why isn’t my building on the map?. In either case, you can just create an outline for your building using a geojson editor like QGIS. Once you’ve got your file ready, you can upload it to WRLD with the following command:

curl -v -XPOST https://indoor-maps-api.wrld3d.com/v1/edits/?token=<dev_token> -F name="<my venue name>" -F venue_street_address="<address>" -F venue_phone_number="<phone no.>" -F venue_email="<email address>" -F submission_contact_email="<email address for notifications>" -F venue_outline="@</path/to/my/file>"

You’ll need your Developer Token which you can find on your WRLD account page. We’re working on making our indoor map creation process easier - but if you get stuck, just contact our support team and we’ll be happy to help

Setting up an indoor-only web app

Everything you’ll need is covered in our wrld.js example code but I’ll explain the main points in a bit more detail below:

Set the background colour which will be be shown outside the bounds of the indoor map, and before the map is loaded:

   var map = L.Wrld.map("map", "your_api_key_here", {
     ...
     drawClearColor: "#3d4447",
     indoorMapBackgroundColor: "#3d4447"
     ...
   });

Add some UI to show while the indoor map is loading - depending on the size of the map and your internet connection it could take a few seconds. We used a div called loading-screen which is a sibling of the map and added a function to show or hide it:

   function setLoadingScreenVisibility(visible) {
     var className = visible ? "loading-screen" : "loading-screen hidden";
     var loadingScreen = document.getElementById("loading-screen");
     loadingScreen.className = className;
     isShowingLoadingScreen = visible;
   }

Since the user won’t see the outdoor view, we need to call map.indoors.enter() instead of having them click on the indoor entrance icon. It’s only possible to go indoors once the map has fully loaded, so we can use WRLD Map events to arrange actions in the correct sequence. You’ll find a bit more logic included in onIndoorMapEntered() in our example code but essentially we just need to hide the loading screen. We added a short delay to avoid the loading screen to avoid a visually jarring transition:
```
   map.on("initialstreamingcomplete", onInitialStreamingComplete)
   map.indoors.on("indoormapenter", onIndoorMapEntered);
    
   function onInitialStreamingComplete() {
     map.indoors.enter("INSERT_INDOOR_MAP_UUID_HERE");
   }

   function onIndoorMapEntered(event) {
     ...
     setLoadingScreenVisibility(false);
     ...
   }
```
Hide the Exit Indoor Map UI, by overriding the default wrld CSS and hiding the button that would normally show at the top of the Indoor Control:
```
   .eegeo-indoor-control #eegeo-exit-interior-button-container { 
     visibility: hidden;
   }
```
If you need to switch between maps, you can do that simply by showing the loading screen, and calling map.indoors.enter("A_DIFFERENT_INDOOR_MAP_UUID") and (if desired) showing the loading screen to hide the transition between maps.

So there you have it - a WRLD mapping app that only allows the user to interact with the indoor environment!

I hope you found this a helpful guide to get you started with fully indoor mapping experiences. If you have any questions don’t hestitate to contact our support team. Don’t forget if you’re not already on our Digital Twin plan, you’ll need an account in order to create an API key to use with wrld.js. You can start a free trial here - no credit card needed!