Tutorial
Throughout the Getting Started guide, you will modify and extend the same code to create your map. Let's start by creating the initial app.
Step 1. Set Up Your Environment
If you do not have prior development experience, you can install an Integrated Development Environment (IDE), e.g. Visual Studio Code.
Start by creating a new project folder. The location is not important, just remember the location, and ensure your newly created project folder is empty.
Inside that, create two empty files:
index.html
andmain.js
.The file
index.html
is the entry point for our application and contains the HTML code. The filemain.js
will be read byindex.html
and consists of the JavaScript code for the actual application to run. To try the app you will be creating, runindex.html
in your web browser.Open
index.html
. Create a basic HTML structure and include themain.js
file as follows:
<!-- 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>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
Both here, and in the following examples, you will always be able to see which of the two files the code should go in, by looking at the first line, where the name of the file is written.
Your environment is now fully configured, and you have the necessary API keys. Next, you will learn how to display a map with MapsIndoors.
Step 2. Display a Map with MapsIndoors
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.24.8/mapsindoors-4.24.8.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. If you do not have your own API key, you can use the demo MapsIndoors API key: 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.24.8/mapsindoors-4.24.8.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.
You should now see a map from your chosen map engine with MapsIndoors data loaded on top.
Display 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);
You should now be able to switch between floors.
Here's a JSFiddle demonstrating the result you should have by now:
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@latest/dist/mi-components/mi-components.esm.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: 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 Maps 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.
You should now see a map from your chosen map engine with MapsIndoors data loaded on top.
Display a Floor Selector
Next, we'll add a Floor Selector for changing between floors.
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>
You should now be able to switch between floors.
Here's a JSFiddle demonstrating the result you should have by now:
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.24.8/mapsindoors-4.24.8.js.gz?apikey=YOUR_MAPSINDOORS_API_KEY"></script>
<script src='https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.14.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:
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.24.8/mapsindoors-4.24.8.js.gz?apikey=YOUR_MAPSINDOORS_API_KEY"></script>
<script src='https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.14.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.
You should now see a map from your chosen map engine with MapsIndoors data loaded on top.
Display 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 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 () { } });
See all available control positions in the Mapbox Documentation.
You should now be able to switch between floors.
Here's a JSFiddle demonstrating the result you should have by now:
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.33.0/mapsindoors-4.33.0.js.gz?apiKey=YOUR_MAPSINDOORS_API_KEY"></script>
<script src='https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v3.3.0/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:
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.33.0/mapsindoors-4.33.0.js.gz?apiKey=YOUR_MAPSINDOORS_API_KEY"></script>
<script src='https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v3.3.0/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,
mapsIndoorsTransitionLevel: 17,
lightPreset: 'dusk',
showMapMarkers: false
};
const mapViewInstance = new mapsindoors.mapView.MapboxV3View(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. You can also control mapsIndoorsTransitionLevel
which defines when Mapbox' Extruded buildings disappear and MapsIndoors data is shown. lightPreset
sets the global light for you application, while showMapMarkers
property defines if Mapbox' Markers are shown on the map.
You should now see a map from your chosen map engine with MapsIndoors data loaded on top.
Display 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 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,
mapsIndoorsTransitionLevel: 17,
lightPreset: 'dusk',
showMapMarkers: false
};
const mapViewInstance = new mapsindoors.mapView.MapboxV3View(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 () { } });
See all available control positions in the Mapbox Documentation.
You should now be able to switch between floors.
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@latest/dist/mi-components/mi-components.esm.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@latest/dist/mi-components/mi-components.esm.js"></script>
</head>
<body>
<mi-map-mapbox style="width: 600px; height: 600px;" access-token="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: 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 map from your chosen map engine with MapsIndoors data loaded on top.
Display a Floor Selector
Next, we'll add a Floor Selector for changing between floors.
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@latest/dist/mi-components/mi-components.esm.js"></script>
</head>
<body>
<mi-map-mapbox style="width: 600px; height: 600px;" access-token="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 floors.
Here's a JSFiddle demonstrating the result you should have by now:
Step 3. Create a Search Experience
In this step, you'll create a simple search and display the search results in a list. You'll also learn how to filter the data displayed on the map.
Create a Simple Query Search
MapsIndoors Locations can be retrieved in the MapsIndoors namespace using the LocationsService.getLocations()
method but first you need to add a <input>
and <button>
element to the DOM.
Create an
<input>
and<button>
element in<body>
.Attach an
onclick
event to the<button>
element and call aonSearch
method, which you will create next.
<!-- 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.24.8/mapsindoors-4.24.8.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>
<input type="text" placeholder="Search">
<button onclick="onSearch()">Search</button>
</body>
</html>
Create the
onSearch
method.Get a reference to the search
<input>
element.Define a new object with the search parameter
q
and the value ofsearchInputElement
.Call the
getLocations
method and log out the results to the console.
// 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);
function onSearch() {
const searchInputElement = document.querySelector('input');
const searchParameters = { q: searchInputElement.value };
mapsindoors.services.LocationsService.getLocations(searchParameters).then(locations => {
console.log(locations);
});
});
}
See all available search parameters in the reference documentation.
Display a List of Search Results
To display a list of search results you can append each search result to a list element.
Add the
<ul>
list element below the search field in<body>
with theid
attribute set to "search-results".
<!-- 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.24.8/mapsindoors-4.24.8.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>
<input type="text" placeholder="Search">
<button onclick="onSearch()">Search</button>
<ul id="search-results"></ul>
</body>
</html>
Get a reference to the list element.
Reset the list on every complete search.
// 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);
function onSearch() {
const searchInputElement = document.querySelector('input');
// Get list element reference
const searchResultsElement = document.getElementById('search-results');
const searchParameters = { q: searchInputElement.value };
mapsindoors.services.LocationsService.getLocations(searchParameters).then(locations => {
// Reset search results list
searchResultsElement.innerHTML = null;
});
}
Add a for loop and append every result to the search results list element.
// 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);
function onSearch() {
const searchInputElement = document.querySelector('input');
// Get list element reference
const searchResultsElement = document.getElementById('search-results');
const searchParameters = { q: searchInputElement.value };
mapsindoors.services.LocationsService.getLocations(searchParameters).then(locations => {
// Reset search results list
searchResultsElement.innerHTML = null;
// Append new search results
locations.forEach(location => {
const listElement = document.createElement('li');
listElement.innerHTML = location.properties.name;
searchResultsElement.appendChild(listElement);
});
});
}
Filter Locations on Map Based on Search Results
To filter the map to only display the search results you can use the filter
method.
Call
mapsIndoorsInstance.filter
with an array of Location IDs.
// 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);
function onSearch() {
const searchInputElement = document.querySelector('input');
// Get list element reference
const searchResultsElement = document.getElementById('search-results');
const searchParameters = { q: searchInputElement.value };
mapsindoors.services.LocationsService.getLocations(searchParameters).then(locations => {
// Reset search results list
searchResultsElement.innerHTML = null;
// Append new search results
locations.forEach(location => {
const listElement = document.createElement('li');
listElement.innerHTML = location.properties.name;
searchResultsElement.appendChild(listElement);
});
// Filter map to only display search results
mapsIndoorsInstance.filter(locations.map(location => location.id), false);
});
}
To remove the location filter again, call mapsIndoorsInstance.filter(null)
.
Here's a JSFiddle demonstrating the result you should have by now:
Create a Simple Query Search
Using the <mi-search>
component you get a <input>
element tied tightly together with the Location Service.
Insert the
<mi-search>
custom element into<body>
.Add the
mapsindoors
andplaceholder
attributes.
<!-- 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 type="module" src="https://unpkg.com/@mapsindoors/components@latest/dist/mi-components/mi-components.esm.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>
<mi-search
style="width: 600px;"
mapsindoors="true"
placeholder="Search">
</mi-search>
<script src="main.js"></script>
</body>
</html>
Get a reference to the
<mi-search>
element.Attach an
results
event listener and log out the results to the console.
// main.js
const miMapElement = document.querySelector('mi-map-googlemaps');
const miSearchElement = document.querySelector('mi-search');
miMapElement.addEventListener('mapsIndoorsReady', () => {
miMapElement.getMapInstance().then((mapInstance) => {
mapInstance.setCenter({ lat: 38.8974905, lng: -77.0362723 }); // The White House
});
})
miSearchElement.addEventListener('results', (event) => {
console.log(event.detail);
});
For more information on available events and how to configure the <mi-search>
component, see components.mapsindoors.com/search.
Display a List of Search Results
To display a list of search results you can append each search result to a list element.
Insert the
<mi-list>
custom element below the search field in<body>
.Add the
scroll-buttons-enabled
andscroll-length
attributes.
<!-- 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 type="module" src="https://unpkg.com/@mapsindoors/components@13.7.1/dist/mi-components/mi-components.esm.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>
<mi-search style="width: 600px;" mapsindoors="true" placeholder="Search">
</mi-search>
<mi-list
style="width: 600px; height: 400px;"
scroll-buttons-enabled="true"
scroll-length="200">
</mi-list>
<script src="main.js"></script>
</body>
</html>
For more information on how to configure the <mi-list>
component, see components.mapsindoors.com/list.
Get a reference to the list element.
Reset the list on every complete search.
// main.js
const miMapElement = document.querySelector('mi-map-googlemaps');
const miSearchElement = document.querySelector('mi-search');
const miListElement = document.querySelector('mi-list');
miMapElement.addEventListener('mapsIndoorsReady', () => {
miMapElement.getMapInstance().then((mapInstance) => {
mapInstance.setCenter({ lat: 38.8974905, lng: -77.0362723 }); // The White House
});
})
miSearchElement.addEventListener('results', (event) => {
// Reset search results list
miListElement.innerHTML = null;
});
Add a for loop and append every result to the search results list element.
// main.js
const miMapElement = document.querySelector('mi-map-googlemaps');
const miSearchElement = document.querySelector('mi-search');
const miListElement = document.querySelector('mi-list');
miMapElement.addEventListener('mapsIndoorsReady', () => {
miMapElement.getMapInstance().then((mapInstance) => {
mapInstance.setCenter({ lat: 38.8974905, lng: -77.0362723 }); // The White House
});
})
miSearchElement.addEventListener('results', (event) => {
// Reset search results list
miListElement.innerHTML = null;
// Append new search results
event.detail.forEach(location => {
const miListItemElement = document.createElement('mi-list-item-location');
miListItemElement.location = location;
miListElement.appendChild(miListItemElement);
});
});
Filter Locations on Map Based on Search Results
To filter the map to only display the search results you can use the filter
method.
// main.js
const miMapElement = document.querySelector('mi-map-googlemaps');
const miSearchElement = document.querySelector('mi-search');
const miListElement = document.querySelector('mi-list');
miMapElement.addEventListener('mapsIndoorsReady', () => {
miMapElement.getMapInstance().then((mapInstance) => {
mapInstance.setCenter({ lat: 38.8974905, lng: -77.0362723 }); // The White House
});
})
miSearchElement.addEventListener('results', (event) => {
// Reset search results list
miListElement.innerHTML = null;
// Append new search results
event.detail.forEach(location => {
<