` element to `` with the `id` attribute set to "map":
```html
MapsIndoors
```
To load data and display it on the map, we need to create a new *instance* of the [`MapsIndoors` class](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.MapsIndoors.html#MapsIndoors) with a [`mapView` instance](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.mapView.MapboxV3View.html) with a few *properties* set. This is all done by placing the following code in the `main.js` file you created earlier:
```javascript
// 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`](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.mapView.MapboxV3View.html) with some [`mapViewOptions`](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.mapView.MapboxV3View.html). The options define which element in the html-file to display the map in (in this case `
`), 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](/sdks-and-frameworks/web/tutorial/getting-started/prerequisites.md#mapbox-v3) 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 `
` element programmatically. Then we create a new [`FloorSelector` *instance*](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/FloorSelector.html) and push the `floorSelectorElement` to the `mapboxInstance` to position it as a map controller:
```javascript
// 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 () { } });
```
{% embed url="
" %}
> See all available control positions in the [Mapbox Documentation](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#addcontrol).
You should now be able to switch between floors.
{% endtab %}
{% tab title="Mapbox - MI Components" %}
Using the `` component, the MapsIndoors JS SDK is automatically inserted into the DOM when initialized.
The MapsIndoors Web Components library can be loaded using [unpkg](https://unpkg.com/), a widely used CDN for everything on [npm](https://npmjs.com/).
Insert script tag into ``:
```html
MapsIndoors
```
Check [@mapsindoors/components](https://www.npmjs.com/package/@mapsindoors/components) for latest version.
After you added the script tag into ``, add the `` custom element into ``. We need to add and populate the `accessToken` and `mi-api-key` attributes with your access token and API key as well:
```html
MapsIndoors
```
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 `` element. Then we attach the [`mapsIndoorsReady`](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.MapsIndoors.html#event:ready) 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](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#setcenter) to center the map on the loaded data:
```javascript
// 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 `` component, see [components.mapsindoors.com/map-mapbox](https://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 `` element, you can add the [floorSelectorControlPosition attribute](https://components.mapsindoors.com/map-mapbox/) to your existing element. In this case with the value `"TOP_RIGHT"`:
```html
MapsIndoors
```
> See all available control positions in the [Mapbox Documentation](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#addcontrol).
You should now be able to switch between floors.
Here's a JSFiddle demonstrating the result you should have by now:
{% embed url="` element to the DOM.
* Create an `` element in ``.
* Attach an `onclick` event to the `` element and call a `onSearch` method, which you will create next.
```html
MapsIndoors
Search
```
* Create the `onSearch` method.
* Get a reference to the search `` list element below the search field in `` with the `id` attribute set to "search-results".
```html
MapsIndoors
Search
```
* Get a reference to the list element.
* Reset the list on every complete search.
```javascript
// 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.
```javascript
// 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**[****](https://docs.mapsindoors.com/getting-started/web/search#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.
```javascript
// 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:
{% embed url="` component you get a `` custom element into ``.
* Add the `mapsindoors` and `placeholder` attributes.
```html
MapsIndoors
```
* Get a reference to the `` element.
* Attach an `results` event listener and log out the results to the console.
```javascript
// 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 `` component, see [components.mapsindoors.com/search](https://components.mapsindoors.com/search/).
**Display a List of Search Results**[****](https://docs.mapsindoors.com/getting-started/web/search#show-a-list-of-search-results)
To display a list of search results you can append each search result to a list element.
* Insert the `` custom element below the search field in ``.
* Add the `scroll-buttons-enabled` and `scroll-length` attributes.
```html
MapsIndoors
```
For more information on how to configure the `` component, see [components.mapsindoors.com/list](https://components.mapsindoors.com/list/).
* Get a reference to the list element.
* Reset the list on every complete search.
```javascript
// 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.
```javascript
// 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**[****](https://docs.mapsindoors.com/getting-started/web/search#filter-locations-on-map-based-on-search-results)
To filter the map to only display the search results you can use the `filter` method.
```javascript
// 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);
});
// Get the MapsIndoors instance
miMapElement.getMapsIndoorsInstance().then((mapsIndoorsInstance) => {
// Filter map to only display search results
mapsIndoorsInstance.filter(event.detail.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:
{% embed url="` element to the DOM.
* Create an `` element in ``.
* Attach an `onclick` event to the `` element and call a `onSearch` method, which you will create next.
```html
MapsIndoors
Search
```
* Create the `onSearch` method.
* Get a reference to the search `` list element below the search field in `` with the `id` attribute set to "search-results".
```html
MapsIndoors
Search
```
* Get a reference to the list element.
* Reset the list on every complete search.
```javascript
// 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 () { } });
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.
```javascript
// 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 () { } });
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**[****](https://docs.mapsindoors.com/getting-started/web/search#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.
```javascript
// 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 () { } });
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:
` component you get an `` custom element into ``.
* Add the `mapsindoors` and `placeholder` attributes.
```html
MapsIndoors
```
* Get a reference to the `` element.
* Attach a `results` event listener and log the results in the console.
```javascript
// main.js
const miMapElement = document.querySelector('mi-map-mapbox');
+ const miSearchElement = document.querySelector('mi-search');
miMapElement.addEventListener('mapsIndoorsReady', () => {
miMapElement.getMapInstance().then((mapInstance) => {
mapInstance.setCenter([-77.0362723, 38.8974905]); // The White House
});
});
miSearchElement.addEventListener('results', (event) => {
console.log(event.detail);
});
```
For more information on available events and how to configure the `` component, see [components.mapsindoors.com/search](https://components.mapsindoors.com/search/).
**Display a List of Search Results**[****](https://docs.mapsindoors.com/getting-started/web/search#show-a-list-of-search-results)
To display a list of search results you can append each search result to a list element.
* Insert the `` custom element below the search field in ``.
* Add the `scroll-buttons-enabled` and `scroll-length` attributes.
```html
MapsIndoors
```
For more information on how to configure the `` component, see [components.mapsindoors.com/list](https://components.mapsindoors.com/list/).
* Get a reference to the list element.
* Reset the list on every complete search.
```javascript
// main.js
const miMapElement = document.querySelector("mi-map-mapbox");
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.
```javascript
// main.js
const miMapElement = document.querySelector('mi-map-mapbox');
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**[****](https://docs.mapsindoors.com/getting-started/web/search#filter-locations-on-map-based-on-search-results)
To filter the map to only display the search results you can use the `filter` method.
```javascript
// main.js
const miMapElement = document.querySelector("mi-map-mapbox");
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);
});
// Get the MapsIndoors instance
miMapElement.getMapsIndoorsInstance().then((mapsIndoorsInstance) => {
// Filter map to only display search results
mapsIndoorsInstance.filter(event.detail.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:
{% embed url="` element with all four transportation options above the search field:
<!-- 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>
<!-- Travel mode selector -->
<label for="travel-modes">Choose a travel mode:</label>
<select name="travelModeSelector" id="travel-modes">
<option value="walking" selected>Walking</option>
<option value="bicycling">Bicycling</option>
<option value="driving">Driving</option>
<option value="transit">Transit</option>
</select>
<script src="main.js"></script>
<input type="text" placeholder="Search">
<button onclick="onSearch()">Search</button>
<ul id="search-results"></ul>
</body>
</html>
` elements value:
```javascript
// 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();
const externalDirectionsProvider = new mapsindoors.directions.GoogleMapsProvider();
const miDirectionsServiceInstance = new mapsindoors.services.DirectionsService(externalDirectionsProvider);
const directionsRendererOptions = { mapsIndoors: mapsIndoorsInstance }
const miDirectionsRendererInstance = new mapsindoors.directions.DirectionsRenderer(directionsRendererOptions);
// 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 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;
// Add click event listener
listElement.addEventListener("click", () => getRoute(location), false);
searchResultsElement.appendChild(listElement);
});
// Filter map to only display search results
mapsIndoorsInstance.filter(locations.map(location => location.id), false);
});
}
function getRoute(location) {
const originLocationCoordinate = { lat: 38.897389429704695, lng: -77.03740973527613, floor: 0 }; // Oval Office, The White House (Hardcoded coordinate and floor index)
const destinationCoordinate = { lat: location.properties.anchor.coordinates[1], lng: location.properties.anchor.coordinates[0], floor: location.properties.floor };
// Route parameters
const routeParameters = {
origin: originLocationCoordinate,
destination: destinationCoordinate,
travelMode: document.getElementById('travel-modes').value.toUpperCase()
};
// Get route from directions service
miDirectionsServiceInstance.getRoute(routeParameters).then((directionsResult) => {
// Use directions render to display route
miDirectionsRendererInstance.setRoute(directionsResult);
});
}
```
You now have something like this:
` element with all four transportation options above the search field:
```html
MapsIndoors
Choose a travel mode:
Walking
Bicycling
Driving
Transit
```
To use the chosen travel mode when getting a route, we need to replace the hardcoded value for `travelMode` parameter inside the `getRoute` method with the `` elements value:
```javascript
// main.js
const miMapElement = document.querySelector('mi-map-googlemaps');
const miSearchElement = document.querySelector('mi-search');
const miListElement = document.querySelector('mi-list');
let miDirectionsServiceInstance;
let miDirectionsRendererInstance;
miMapElement.addEventListener('mapsIndoorsReady', () => {
miMapElement.getMapInstance().then((mapInstance) => {
mapInstance.setCenter({ lat: 38.8974905, lng: -77.0362723 }); // The White House
});
miMapElement.getDirectionsServiceInstance().then((directionsServiceInstance) => miDirectionsServiceInstance = directionsServiceInstance);
miMapElement.getDirectionsRendererInstance().then((directionsRendererInstance) => miDirectionsRendererInstance = directionsRendererInstance);
})
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;
// Add click event listener
miListItemElement.addEventListener("click", () => getRoute(location), false);
miListElement.appendChild(miListItemElement);
});
// Get the MapsIndoors instance
miMapElement.getMapsIndoorsInstance().then((mapsIndoorsInstance) => {
// Filter map to only display search results
mapsIndoorsInstance.filter(event.detail.map(location => location.id), false);
});
});
function getRoute(location) {
const originLocationCoordinate = { lat: 38.897389429704695, lng: -77.03740973527613, floor: 0 }; // Oval Office, The White House (Hardcoded coordinate and floor index)
const destinationCoordinate = { lat: location.properties.anchor.coordinates[1], lng: location.properties.anchor.coordinates[0], floor: location.properties.floor };
// Route parameters
const routeParameters = {
origin: originLocationCoordinate,
destination: destinationCoordinate,
travelMode: document.getElementById('travel-modes').value.toUpperCase()
};
// Get route from directions service
miDirectionsServiceInstance.getRoute(routeParameters).then((directionsResult) => {
// Use directions render to display route
miDirectionsRendererInstance.setRoute(directionsResult);
});
}
```
You now have something like this:
{% endtab %}
{% tab title="Mapbox - Manually" %}
**Get Directions Service and Render instances**
First, initialize the [MapsIndoors Directions Service](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.services.DirectionsService.html), and add an external Directions Provider (in this case Mapbox).
Then, we need to initialize the [MapsIndoors Directions Renderer](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.directions.DirectionsRenderer.html) with the MapsIndoors instance:
```javascript
// 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();
const externalDirectionsProvider = new mapsindoors.directions.MapboxProvider('YOUR_MAPBOX_ACCESS_TOKEN');
const miDirectionsServiceInstance = new mapsindoors.services.DirectionsService(externalDirectionsProvider);
const directionsRendererOptions = { mapsIndoors: mapsIndoorsInstance }
const miDirectionsRendererInstance = new mapsindoors.directions.DirectionsRenderer(directionsRendererOptions);
// Floor Selector
const floorSelectorElement = document.createElement('div');
new mapsindoors.FloorSelector(floorSelectorElement, mapsIndoorsInstance);
mapboxInstance.addControl({ onAdd: function () { return floorSelectorElement }, onRemove: function () { } });
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);
});
}
```
> See all available directions render options and methods in the [reference documentation](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.directions.DirectionsRenderer.html).
Now our example app is ready to provide Directions. Next up is how to give it an Origin and Destination and draw the route between.
**Draw a Route on the Map**[****](https://docs.mapsindoors.com/getting-started/web/directions#draw-a-route-on-the-map)
To display a route on the map, we use the coordinates of an Origin and Destination and draw a line between them. For this, we use MapsIndoors' [Directions Renderer](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.directions.DirectionsRenderer.html).
The Destination coordinate is retrieved dynamically, using the coordinate of the selected Location in the search results list. Therefore, you must search for the destination to get directions, and then click the result in the text list. Different solutions can of course be implemented into your own solution later.
In this tutorial, the Origin is, naturally, a hardcoded coordinate in the demo API key supplied with this guide. If you're using you own key, you can hardcode coordinates from a Location in your building instead.
In the following example, this is what happens:
1. Create a new `getRoute` method in `main.js` which accepts a `location`
2. Create two new constants, one for the Origin's coordinate, and another for the Destination's coordinate
3. Add another constant defining the `routeParameters`
4. Using the [MapsIndoors Directions Service](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.services.DirectionsService.html#getRoute) call the `getRoute` method to get the fastest route between the two coordinates
> See all available route parameters in the [reference documentation](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.services.DirectionsService.html#getRoute).
5. Using the [MapsIndoors Directions Renderer](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.directions.DirectionsRenderer.html#setRoute) call the `setRoute` method to display the route on the map
```javascript
// 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();
const externalDirectionsProvider = new mapsindoors.directions.MapboxProvider();
const miDirectionsServiceInstance = new mapsindoors.services.DirectionsService(externalDirectionsProvider);
const directionsRendererOptions = { mapsIndoors: mapsIndoorsInstance }
const miDirectionsRendererInstance = new mapsindoors.directions.DirectionsRenderer(directionsRendererOptions);
// Floor Selector
const floorSelectorElement = document.createElement('div');
new mapsindoors.FloorSelector(floorSelectorElement, mapsIndoorsInstance);
mapboxInstance.addControl({ onAdd: function () { return floorSelectorElement }, onRemove: function () { } });
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);
});
}
function getRoute(location) {
const originLocationCoordinate = { lat: 38.897389429704695, lng: -77.03740973527613, floor: 0 }; // Oval Office, The White House (Hardcoded coordinate and floor index)
const destinationCoordinate = { lat: location.properties.anchor.coordinates[1], lng: location.properties.anchor.coordinates[0], floor: location.properties.floor };
// Route parameters
const routeParameters = {
origin: originLocationCoordinate,
destination: destinationCoordinate,
travelMode: 'WALKING'
};
// Get route from directions service
miDirectionsServiceInstance.getRoute(routeParameters).then((directionsResult) => {
// Use directions render to display route
miDirectionsRendererInstance.setRoute(directionsResult);
});
}
```
Now, to make it more dynamic, we attach a `click` event listener for each location appended to the search results list element with the `getRoute` method as a callback function.
```javascript
// 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();
const externalDirectionsProvider = new mapsindoors.directions.MapboxProvider();
const miDirectionsServiceInstance = new mapsindoors.services.DirectionsService(externalDirectionsProvider);
const directionsRendererOptions = { mapsIndoors: mapsIndoorsInstance }
const miDirectionsRendererInstance = new mapsindoors.directions.DirectionsRenderer(directionsRendererOptions);
// Floor Selector
const floorSelectorElement = document.createElement('div');
new mapsindoors.FloorSelector(floorSelectorElement, mapsIndoorsInstance);
mapboxInstance.addControl({ onAdd: function () { return floorSelectorElement }, onRemove: function () { } });
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;
// Add click event listener
listElement.addEventListener("click", () => getRoute(location), false);
searchResultsElement.appendChild(listElement);
});
// Filter map to only display search results
mapsIndoorsInstance.filter(locations.map(location => location.id), false);
});
}
function getRoute(location) {
const originLocationCoordinate = { lat: 38.897389429704695, lng: -77.03740973527613, floor: 0 }; // Oval Office, The White House (Hardcoded coordinate and floor index)
const destinationCoordinate = { lat: location.properties.anchor.coordinates[1], lng: location.properties.anchor.coordinates[0], floor: location.properties.floor };
// Route parameters
const routeParameters = {
origin: originLocationCoordinate,
destination: destinationCoordinate,
travelMode: 'WALKING'
};
// Get route from directions service
miDirectionsServiceInstance.getRoute(routeParameters).then((directionsResult) => {
// Use directions render to display route
miDirectionsRendererInstance.setRoute(directionsResult);
});
}
```
Now you can click on each item in the search results list to get directions.
**Change Transportation Mode**[****](https://docs.mapsindoors.com/getting-started/web/directions#change-transportation-mode)
In MapsIndoors, the transportation mode is referred to as travel mode. There are four travel modes; walking, bicycling, driving and transit (public transportation). The travel modes apply for outdoor navigation. Indoor navigation calculations are based on walking travel mode.
To change between travel modes we first need to add a `` element with all four transportation options above the search field:
```html
MapsIndoors
Choose a travel mode:
Walking
Bicycling
Driving
Transit
Search
```
To use the chosen transportation when getting a route, we need to replace the hardcoded value for `travelMode` parameter inside the `getRoute` method with the `` elements value:
```javascript
// 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();
const externalDirectionsProvider = new mapsindoors.directions.MapboxProvider();
const miDirectionsServiceInstance = new mapsindoors.services.DirectionsService(externalDirectionsProvider);
const directionsRendererOptions = { mapsIndoors: mapsIndoorsInstance }
const miDirectionsRendererInstance = new mapsindoors.directions.DirectionsRenderer(directionsRendererOptions);
// Floor Selector
const floorSelectorElement = document.createElement('div');
new mapsindoors.FloorSelector(floorSelectorElement, mapsIndoorsInstance);
mapboxInstance.addControl({ onAdd: function () { return floorSelectorElement }, onRemove: function () { } });
function onSearch() {
const searchInputElement = document.querySelector('input');
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;
// Add click event listener
listElement.addEventListener("click", () => getRoute(location), false);
searchResultsElement.appendChild(listElement);
});
// Filter map to only display search results
mapsIndoorsInstance.filter(locations.map(location => location.id), false);
});
}
function getRoute(location) {
const originLocationCoordinate = { lat: 38.897389429704695, lng: -77.03740973527613, floor: 0 }; // Oval Office, The White House (Hardcoded coordinate and floor index)
const destinationCoordinate = { lat: location.properties.anchor.coordinates[1], lng: location.properties.anchor.coordinates[0], floor: location.properties.floor };
// Route parameters
const routeParameters = {
origin: originLocationCoordinate,
destination: destinationCoordinate,
travelMode: document.getElementById('travel-modes').value.toUpperCase()
};
// Get route from directions service
miDirectionsServiceInstance.getRoute(routeParameters).then((directionsResult) => {
// Use directions render to display route
miDirectionsRendererInstance.setRoute(directionsResult);
});
}
```
You now have something like this:` element with all four transportation options above the search field:
```html
MapsIndoors
Choose a travel mode:
Walking
Bicycling
Driving
Transit
```
To use the chosen travel mode when getting a route, we need to replace the hardcoded value for `travelMode` parameter inside the `getRoute` method with the `` elements value:
```javascript
// main.js
const miMapElement = document.querySelector('mi-map-mapbox');
const miSearchElement = document.querySelector('mi-search');
const miListElement = document.querySelector('mi-list');
let miDirectionsServiceInstance;
let miDirectionsRendererInstance;
miMapElement.addEventListener('mapsIndoorsReady', () => {
miMapElement.getMapInstance().then((mapInstance) => {
mapInstance.setCenter({ lat: 38.8974905, lng: -77.0362723 }); // The White House
});
miMapElement.getDirectionsServiceInstance().then((directionsServiceInstance) => miDirectionsServiceInstance = directionsServiceInstance);
miMapElement.getDirectionsRendererInstance().then((directionsRendererInstance) => miDirectionsRendererInstance = directionsRendererInstance);
})
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;
// Add click event listener
miListItemElement.addEventListener("click", () => getRoute(location), false);
miListElement.appendChild(miListItemElement);
});
// Get the MapsIndoors instance
miMapElement.getMapsIndoorsInstance().then((mapsIndoorsInstance) => {
// Filter map to only display search results
mapsIndoorsInstance.filter(event.detail.map(location => location.id), false);
});
});
function getRoute(location) {
const originLocationCoordinate = { lat: 38.897389429704695, lng: -77.03740973527613, floor: 0 }; // Oval Office, The White House (Hardcoded coordinate and floor index)
const destinationCoordinate = { lat: location.properties.anchor.coordinates[1], lng: location.properties.anchor.coordinates[0], floor: location.properties.floor };
// Route parameters
const routeParameters = {
origin: originLocationCoordinate,
destination: destinationCoordinate,
travelMode: document.getElementById('travel-modes').value.toUpperCase()
};
// Get route from directions service
miDirectionsServiceInstance.getRoute(routeParameters).then((directionsResult) => {
// Use directions render to display route
miDirectionsRendererInstance.setRoute(directionsResult);
});
}
```
You now have something like this:
{% embed url="
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.