Show a Map

Last updated:

Your environment is now fully configured, and you have the necessary Google Maps and MapsIndoors API keys. Next you will learn how to load a Google Maps map with MapsIndoors.

Show a Map with MapsIndoors

Please note that data in MapsIndoors is loaded asynchronously. This results in behavior where data might not have finished loading if you call methods accessing it immediately after initializing MapsIndoors. Best practice is to set up listeners or delegates to inform of when data is ready. Please be aware of this when developing using the MapsIndoors SDK.

The MapsIndoors SDK is hosted on a Content Delivery Network (CDN) and should be loaded using a script tag.

Insert the MapsIndoors SDK script tag into <head>, followed by the Google Maps script tag:

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MapsIndoors</title>
+ <script src="https://app.mapsindoors.com/mapsindoors/js/sdk/4.5.1/mapsindoors-4.5.1.js.gz?apikey=YOUR_MAPSINDOORS_API_KEY"></script>
+ <script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=YOUR_GOOGLE_MAPS_API_KEY"></script>
</head>
<body>
<script src="main.js"></script>
</body>
</html>

Remember to add your API keys to the links in your code. You can use the demo MapsIndoors API key showing "The White House": d876ff0e60bb430b8fabb145

Add an empty <div> element to <body> with the id attribute set to "map":

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MapsIndoors</title>
<script src="https://app.mapsindoors.com/mapsindoors/js/sdk/4.5.1/mapsindoors-4.5.1.js.gz?apikey=YOUR_MAPSINDOORS_API_KEY"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=YOUR_GOOGLE_MAPS_API_KEY"></script>
</head>
<body>
+ <div id="map" style="width: 600px; height: 600px;"></div>
<script src="main.js"></script>
</body>
</html>

To load data and display it on the map, we need to create a new instance of the MapsIndoors class with a mapView instance with a few properties set. This is all done by placing the following code in the main.js file you created earlier:

// main.js

const mapViewOptions = {
element: document.getElementById('map'),
center: { lat: 38.8974905, lng: -77.0362723 }, // The White House
zoom: 17,
maxZoom: 22,
};
const mapViewInstance = new mapsindoors.mapView.GoogleMapsView(mapViewOptions);
const mapsIndoorsInstance = new mapsindoors.MapsIndoors({
mapView: mapViewInstance
});

What happens in this snippet is we create a mapViewInstance that pulls up a GoogleMapsView with some mapViewOptions. The options define which element in the html-file to display the map in (in this case <div id="map">), where the map should center, what zoom level to display, and what the max zoom level is.

Using the <mi-map-googlemaps> component, the MapsIndoors JS SDK is automatically inserted into the DOM when initialized.

The MapsIndoors Web Components library can be loaded using unpkg, a widely used CDN for everything on npm.

Insert script tag into <head>:

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MapsIndoors</title>
+ <script src="https://unpkg.com/@mapsindoors/components@8.2.0/dist/mi-components/mi-components.js"></script>
</head>
<body>
<script src="main.js"></script>
</body>
</html>

Check @mapsindoors/components for latest version.

After you added the script tag into <head>, add the <mi-map-googlemaps> custom element into <body>. We need to add and populate the gm-api-key and mi-api-key attributes with your API keys as well:

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MapsIndoors</title>
<script src="https://unpkg.com/@mapsindoors/components@8.2.0/dist/mi-components/mi-components.js"></script>
</head>
<body>
+ <mi-map-googlemaps
+ style="width: 600px;
+ height: 600px;
"

+ gm-api-key="YOUR_GOOGLE_MAPS_API_KEY"
+ mi-api-key="YOUR_MAPSINDOORS_API_KEY">

+ </mi-map-googlemaps>
<script src="main.js"></script>
</body>
</html>

Remember to add your API keys where indicated. You can use the demo MapsIndoors API key showing "The White House": d876ff0e60bb430b8fabb145

To center the map correctly, you need need the Google Maps instance in your JavaScript-file.

First we get a reference to the <mi-map-googlemaps> element. Then we attach the mapsIndoorsReady event listener so we'll know when MapsIndoors is ready after loading. Lastly, on the mapsIndoorsReady event, get the Google Map instance and call its setCenter method to center the map on the loaded data:

// main.js

const miMapElement = document.querySelector('mi-map-googlemaps');

miMapElement.addEventListener('mapsIndoorsReady', () => {
miMapElement.getMapInstance().then((mapInstance) => {
mapInstance.setCenter({ lat: 38.8974905, lng: -77.0362723 }); // The White House
});
})

For more information on how to configure the <mi-map-googlemaps> component, see components.mapsindoors.com/map-googlemaps.

The MapsIndoors SDK is hosted on a Content Delivery Network (CDN) and should be loaded using a script tag.

Insert the MapsIndoors SDK script tag into <head>, followed by the Mapbox script and style tag:

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MapsIndoors</title>
+ <script src="https://app.mapsindoors.com/mapsindoors/js/sdk/4.17.0/mapsindoors-4.17.0.js.gz?apikey=YOUR_MAPSINDOORS_API_KEY"></script>
+ <script src='https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.js'></script>
+ <link href='https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
<script src="main.js"></script>
</body>
</html>

Remember to add your API keys to the links in your code. You can use the demo MapsIndoors API key showing "The White House": d876ff0e60bb430b8fabb145 Add an empty <div> element to <body> with the id attribute set to "map":

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MapsIndoors</title>
<script src="https://app.mapsindoors.com/mapsindoors/js/sdk/4.17.0/mapsindoors-4.17.0.js.gz?apikey=YOUR_MAPSINDOORS_API_KEY"></script>
<script src='https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
+ <div id="map" style="width: 600px; height: 600px;"></div>
<script src="main.js"></script>
</body>
</html>

To load data and display it on the map, we need to create a new instance of the MapsIndoors class with a mapView instance with a few properties set. This is all done by placing the following code in the main.js file you created earlier:

// main.js

const mapViewOptions = {
accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
element: document.getElementById('map'),
center: { lat: 38.8974905, lng: -77.0362723 }, // The White House
zoom: 17,
maxZoom: 22,
};
const mapViewInstance = new mapsindoors.mapView.MapboxView(mapViewOptions);
const mapsIndoorsInstance = new mapsindoors.MapsIndoors({
mapView: mapViewInstance,
});

What happens in this snippet is we create a mapViewInstance that pulls up a MapboxView with some mapViewOptions. The options define which element in the html-file to display the map in (in this case <div id="map">), where the map should center, what zoom level to display, and what the max zoom level is.

Go here https://docs.mapbox.com/help/glossary/access-token/ for information about how to obtain a Mapbox access token.

Using the <mi-map-mapbox> component, the MapsIndoors JS SDK is automatically inserted into the DOM when initialized.

The MapsIndoors Web Components library can be loaded using unpkg, a widely used CDN for everything on npm.

Insert script tag into <head>:

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MapsIndoors</title>
+ <script src="https://unpkg.com/@mapsindoors/components@8.2.0/dist/mi-components/mi-components.js"></script>
</head>
<body>
<script src="main.js"></script>
</body>
</html>

Check @mapsindoors/components for latest version. After you added the script tag into <head>, add the <mi-map-mapbox> custom element into <body>. We need to add and populate the accessToken and mi-api-key attributes with your access token and API key as well:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MapsIndoors</title>
<script src="https://unpkg.com/@mapsindoors/components@8.2.0/dist/mi-components/mi-components.js"></script>
</head>
<body>
+ <mi-map-mapbox style="width: 600px; height: 600px;" accessToken="YOUR_MAPBOX_ACCESS_TOKEN" mi-api-key="YOUR_MAPSINDOORS_API_KEY">
+ </mi-map-mapbox>
<script src="main.js"></script>
</body>
</html>

Remember to add your API keys where indicated. You can use the demo MapsIndoors API key showing "The White House": d876ff0e60bb430b8fabb145 To center the map correctly, you need need the Mapbox instance in your JavaScript-file.

First we get a reference to the <mi-map-mapbox> element. Then we attach the mapsIndoorsReady event listener so we'll know when MapsIndoors is ready after loading. Lastly, on the mapsIndoorsReady event, get the Mapbox instance and call its setCenter method to center the map on the loaded data:

// main.js
const miMapElement = document.querySelector('mi-map-mapbox');
miMapElement.addEventListener('mapsIndoorsReady', () => {
miMapElement.getMapInstance().then((mapInstance) => {
mapInstance.setCenter([-77.0362723, 38.8974905]); // The White House
});
});

For more information on how to configure the <mi-map-mapbox> component, see components.mapsindoors.com/map-mapbox.

You should now see a Google Maps map with MapsIndoors data loaded on top.

Show a Floor Selector

Next, we'll add a Floor Selector for changing between Floors.

First, we add an empty <div> element programmatically. Then we create a new FloorSelector instance and push the floorSelectorElement to the googleMapsInstance to position it as a map controller:

// main.js

const mapViewOptions = {
element: document.getElementById('map'),
center: { lat: 38.8974905, lng: -77.0362723 }, // The White House
zoom: 17,
maxZoom: 22,
};
const mapViewInstance = new mapsindoors.mapView.GoogleMapsView(mapViewOptions);
const mapsIndoorsInstance = new mapsindoors.MapsIndoors({ mapView: mapViewInstance });
+ const googleMapsInstance = mapViewInstance.getMap();

// Floor Selector
+ const floorSelectorElement = document.createElement('div');
+ new mapsindoors.FloorSelector(floorSelectorElement, mapsIndoorsInstance);
+ googleMapsInstance.controls[google.maps.ControlPosition.RIGHT_TOP].push(floorSelectorElement);

Using the <mi-map-googlemaps> element, you can add the floorSelectorControlPosition attribute to your existing element. In this case with the value "TOP_RIGHT":

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MapsIndoors</title>
<script src="https://unpkg.com/@mapsindoors/components@8.2.0/dist/mi-components/mi-components.js"></script>
</head>
<body>
<mi-map-googlemaps
style="width: 600px;
height: 600px;"
gm-api-key="YOUR_GOOGLE_MAPS_API_KEY"
mi-api-key="YOUR_MAPSINDOORS_API_KEY"
+ floor-selector-control-position="TOP_RIGHT">
</mi-map-googlemaps>
<script src="main.js"></script>
</body>
</html>

See all available control positions in the Google Maps Documentation.

First, we add an empty <div> element programmatically. Then we create a new FloorSelector instance and push the floorSelectorElement to the mapboxInstance to position it as a map controller:

// main.js

const mapViewOptions = {
accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
element: document.getElementById('map'),
center: { lat: 38.8974905, lng: -77.0362723 }, // The White House
zoom: 17,
maxZoom: 22,
};

const mapViewInstance = new mapsindoors.mapView.MapboxView(mapViewOptions);
const mapsIndoorsInstance = new mapsindoors.MapsIndoors({ mapView: mapViewInstance });
+ const mapboxInstance = mapViewInstance.getMap();

+ // Floor Selector
+ const floorSelectorElement = document.createElement('div');
+ new mapsindoors.FloorSelector(floorSelectorElement, mapsIndoorsInstance);
+ mapboxInstance.addControl({ onAdd: function () { return floorSelectorElement }, onRemove: function () { } });

https://docs.mapbox.com/mapbox-gl-js/api/map/#map#addcontrol

Using the <mi-map-mapbox> element, you can add the floorSelectorControlPosition attribute to your existing element. In this case with the value "TOP_RIGHT":

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MapsIndoors</title>
<script src="https://unpkg.com/@mapsindoors/components@8.2.0/dist/mi-components/mi-components.js"></script>
</head>

<body>
+ <mi-map-mapbox style="width: 600px; height: 600px;" accessToken="YOUR_MAPBOX_ACCESS_TOKEN" mi-api-key="YOUR_MAPSINDOORS_API_KEY" floor-selector-control-position="TOP_RIGHT">
</mi-map-mapbox>
<script src="main.js"></script>
</body>
</html>

See all available control positions in the Mapbox Documentation.

You should now be able to switch between the first and second Floors of The White House.

If you have followed the tutorial exactly so far, you will now have something like this (due to technical limitations, only the Google Maps result is shown on this page, but Mapbox implementation will also work if you followed this guide):

Next up: Search