MapsIndoors


Web SDK	/files/m1NG6uhAdTF1yzoopgSl	/pages/hGCVL4BYWWf9E8GfXeiW
Android SDK	/files/w7k3sHLh44mx113cDcQj	/pages/R2BgtViJgAzukc8rUSKA
iOS SDK	/files/qWevxzvxOuCjU4oc6lHm	/pages/PmdjbzpPsEAKoqdd58kn
Integration API	/files/Kxbhbd1NfpfZitN7WqLa	/pages/Jr2DI7JophOmukVIQW7U
React Native	/files/TR1JclCSzEcwBFuVrpxe	/pages/g2X6vShEuFOcI3FUFJQD
Flutter	/files/9cfNhlRLxZOZPHh5IApe	/pages/79prCj27NZCzm1STA0Vj


Product Overview	/pages/wJZIu6jC82ghnuMb3FEj	/files/LplEnDhObpoTipHBlIn0
CMS	/pages/ESgrJFHQwi1lsgOznlIf	/files/NLZu7qJvRIKytsSKC9Ek
Map Template	/pages/DZbBSGXZtVolLseSbKVr	/files/zbZssTZ6cIeZI1Gsnq9w


Design		/pages/cgvRj7KGFTEGbeFdnuWv	/files/jkcCLEoXZEpDjDaOwLDv
Glossary		/pages/uwtbt9zJrsWeSQyEZIuH	/files/zjPBWFYPwUF96X28jmX0
Changelog	Reference Docs	/pages/orEPlQKz0hS5HmAixL8p	/files/UuRDuoa5izwyFT6pivLK

` with the attribute `id="map"` was added inside the ``. This `div` is crucial as it serves as the container where both the Mapbox base map and the MapsIndoors layers will be rendered. #### Update style.css Update your `style.css` file to ensure the `#map` element fills the available space. This is necessary for the map to be visible. {% code lineNumbers="true" %} ```css /* style.css */ /* Use flexbox for the main layout (from initial setup) */ html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; /* Prevent scrollbars if map is full size */ display: flex; flex-direction: column; /* Stack children vertically if needed later */ } /* Style for the map container */ #map { /* Make map fill available space within its flex parent (body) */ flex-grow: 1; width: 100%; /* Make map fill width */ margin: 0; padding: 0; } ``` {% endcode %} **Explanation of style.css updates:** * The styles for the `#map` container are added. These styles define how the map container behaves within the flexbox layout established in the initial setup (`html, body` styles). * `flex-grow: 1;` is a key flexbox property that allows the map container to expand and fill the available vertical space within its parent (`body`). * `width: 100%;` ensures the map fills the full horizontal width of its container. * `margin: 0;` and `padding: 0;` remove any default browser spacing around the map container, ensuring it fits snugly. #### Add JavaScript to script.js Open your `script.js` file and add the following JavaScript code. This code will initialize the Mapbox map, then create the MapsIndoors view and instance, and finally add a Floor Selector. Remember to replace `YOUR_MAPBOX_ACCESS_TOKEN` with your actual Mapbox access token if you are not using the demo one, and `YOUR_MAPSINDOORS_API_KEY` with your MapsIndoors API key if not using the demo key. For testing, the demo MapsIndoors API key `02c329e6777d431a88480a09` and the Austin office venue ID `dfea941bb3694e728df92d3d` are used. {% code lineNumbers="true" %} ```javascript // script.js // Define options for the MapsIndoors Mapbox view const mapViewOptions = { accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN', // Replace with your Mapbox token element: document.getElementById('map'), center: { lng: -97.74204591828197, lat: 30.36022358949809 }, // Example: MapsPeople Austin Office zoom: 17, maxZoom: 22, mapsIndoorsTransitionLevel: 16, }; // Set the MapsIndoors API key mapsindoors.MapsIndoors.setMapsIndoorsApiKey('YOUR_MAPSINDOORS_API_KEY'); // Replace with your MapsIndoors API key // Create a new instance of the MapsIndoors Mapbox view const mapViewInstance = new mapsindoors.mapView.MapboxV3View(mapViewOptions); // Create a new MapsIndoors instance, passing the map view const mapsIndoorsInstance = new mapsindoors.MapsIndoors({ mapView: mapViewInstance, // Set the venue ID to load the map for a specific venue venue: 'YOUR_MAPSINDOORS_VENUE_ID', // Replace with your actual venue ID }); /** Floor Selector **/ // Create a new HTML div element to host the floor selector const floorSelectorElement = document.createElement('div'); // Create a new FloorSelector instance, linking it to the HTML element and the main MapsIndoors instance. new mapsindoors.FloorSelector(floorSelectorElement, mapsIndoorsInstance); // Get the underlying Mapbox map instance const mapboxInstance = mapViewInstance.getMap(); // Add the floor selector HTML element to the Mapbox map using Mapbox's addControl method // We wrap the element in an object implementing the IControl interface expected by addControl mapboxInstance.addControl({ onAdd: function () { // This function is called when the control is added to the map. // It should return the control's DOM element. return floorSelectorElement; }, onRemove: function () { // This function is called when the control is removed from the map. // Clean up any event listeners or resources here. floorSelectorElement.parentNode.removeChild(floorSelectorElement); }, }, 'top-right'); // Optional: Specify a position ('top-left', 'top-right', 'bottom-left', 'bottom-right') /** Handle Location Clicks **/ // Handle Location Clicks on Map function handleLocationClick(location) { if (location && location.id) { mapsIndoorsInstance.goTo(location); // Center the map on the clicked location } } // Add an event listener to the MapsIndoors instance for click events on locations mapsIndoorsInstance.on('click', handleLocationClick); ``` {% endcode %} **Explanation of script.js updates:** * `const mapViewOptions = { ... }`: This object defines essential configuration options for the MapsIndoors Mapbox view. * `accessToken`: Your Mapbox access token, required by Mapbox GL JS. * `element`: The HTML DOM element (our `

`) where the map will be rendered. * `center`, `zoom`, `maxZoom`: Standard map parameters to set the initial view. * `mapsIndoorsTransitionLevel`: The zoom level at which MapsIndoors will start showing indoor details. * For more details on all available options, see the [mapsindoors.mapView.MapboxV3View class documentation](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.mapView.MapboxV3View.html). * `mapsindoors.MapsIndoors.setMapsIndoorsApiKey('YOUR_MAPSINDOORS_API_KEY');`: This static method sets your MapsIndoors API key globally for the SDK. This key authenticates your requests to MapsIndoors services. See the [`mapsindoors.MapsIndoors` class reference](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/MapsIndoors.html). * `const mapViewInstance = new mapsindoors.mapView.MapboxV3View(mapViewOptions);`: This line creates an instance of `MapboxV3View`, which is responsible for integrating MapsIndoors data and rendering with a Mapbox GL JS v3 map. For more details on `MapboxV3View`, see its [class reference](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.mapView.MapboxV3View.html). * `const mapsIndoorsInstance = new mapsindoors.MapsIndoors({ mapView: mapViewInstance, venue: 'YOUR_MAPSINDOORS_VENUE_ID' });`: This creates the main `MapsIndoors` instance. This object is your primary interface for interacting with MapsIndoors functionalities like displaying locations, getting directions, etc. See the [`mapsindoors.MapsIndoors` class documentation](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/MapsIndoors.html). * **Floor Selector Integration:** * `const floorSelectorElement = document.createElement('div');`: A new HTML `div` element is dynamically created. This element will serve as the container for the Floor Selector UI. * `new mapsindoors.FloorSelector(floorSelectorElement, mapsIndoorsInstance);`: This instantiates the `FloorSelector` control. It takes the HTML element to render into and the `mapsIndoorsInstance` to interact with (e.g., to know available floors and change the current floor). For more details on `FloorSelector`, see its [class reference](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.FloorSelector.html). * `const mapboxInstance = mapViewInstance.getMap();`: The `getMap()` method on our `mapViewInstance` returns the underlying native Mapbox `Map` object. This is necessary to use Mapbox-specific functionalities. * `mapboxInstance.addControl({ ... }, 'top-right');`: This uses the native Mapbox `addControl` method to add our `floorSelectorElement` to the map UI in the top-right corner. For more details, refer to the [Mapbox GL JS documentation on controls](https://docs.mapbox.com/mapbox-gl-js/api/markers/#icontrol). * **Click-to-Center Functionality:** * `function handleLocationClick(location) { ... }`: This function is called whenever a location (POI) on the map is clicked. It checks that the clicked object is a valid MapsIndoors location and then calls `mapsIndoorsInstance.goTo(location)` to center the map on that location. * `mapsIndoorsInstance.on('click', handleLocationClick);`: This line registers the click handler so that clicking any POI on the map will smoothly center the map on that location. This pattern will be reused and expanded in later steps. ### Expected Outcome After completing these steps and opening your `index.html` file in a web browser, you should see: * An interactive map centered on the MapsPeople Austin Office. * A Floor Selector control visible in the top-right corner of the map, allowing you to switch between different floors of the venue. * Clicking on any POI or location marker on the map will center the map on that location. ### Troubleshooting * **Map doesn't load / blank page:** * Check your browser's developer console (usually F12) for any error messages. * Ensure you have replaced `YOUR_MAPBOX_ACCESS_TOKEN` with a valid token in `script.js` (or are using the provided demo token correctly). * Verify that `YOUR_MAPSINDOORS_API_KEY` is correctly set (or the demo key is used). * Double-check all CDN links in `index.html` are correct and accessible. * **Floor selector doesn't appear:** * Verify the JavaScript code for creating and adding the floor selector has no typos. * Check the console for errors related to `FloorSelector` or `addControl`. * **Clicking a location does not center the map:** * Ensure the `handleLocationClick` function is correctly defined and registered as an event listener. * Check for any JavaScript errors in the console that might indicate issues with the click handling code. ### Here's a CodeSandbox demonstrating the result you should have by now: {% embed url="" %} ### Next Steps You have successfully displayed a MapsIndoors map with Mapbox GL JS and added a floor selector! This is the foundational step for building more complex indoor mapping applications. Next, you will learn how to add search functionality to your map: * Step 2: [Create a Search Experience](/sdks-and-frameworks/web/tutorial/using-mapbox/create-a-search-experience) # Create a Search Experience **Goal:** This guide will show you how to add a search input field to your map application, allowing users to find locations within your venue. Search results will be displayed in a list and highlighted on the map. **SDK Concepts Introduced:** * Using `mapsindoors.services.LocationsService.getLocations()` to fetch locations based on a query. * Interacting with the map based on search results: * Highlighting multiple locations: `mapsIndoorsInstance.highlight()`. * Setting the floor: `mapsIndoorsInstance.setFloor()`. * Selecting a specific location: `mapsIndoorsInstance.selectLocation()`. * Clearing previous highlights and selections: `mapsIndoorsInstance.highlight()` (with no arguments) and `mapsIndoorsInstance.deselectLocation()`. * Getting current venue information: `mapsIndoorsInstance.getVenue()`. ### Prerequisites * Completion of [Step 1: Displaying a Map with Mapbox GL JS](/sdks-and-frameworks/web/tutorial/using-mapbox/display-a-map). * Your MapsIndoors API Key and Mapbox Access Token should be correctly set up as per Step 1. We will continue using the demo API key `02c329e6777d431a88480a09` and venue ID `dfea941bb3694e728df92d3d` for this example. ### The Code This guide details the modifications to HTML, CSS, and JavaScript needed to add a search input field, display search results, and dynamically interact with the map based on user searches. #### Update index.html Open your `index.html` file. The primary structural change to your HTML is the introduction of a dedicated search panel. This panel will house the input field where users type their search queries and an unordered list where the corresponding search results will appear. {% code lineNumbers="true" %} ```html MapsIndoors

``` {% endcode %} **Explanation of index.html updates:** * A new `div` element with the class `panel` is added. This `div` serves as the main container for all search-related UI elements. * Inside the `panel`, another `div` with the id `search-ui` and the class `flex-column` is introduced to arrange the search input and results list vertically. * An `` element with `id="search-input"` is the text field for user search queries. * An `

` element. * Sets its `innerHTML` to `location.properties.name`. The `properties` object on an object conforming to the `Location` interface contains various details about the location. For more information, see the [Location documentation](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.Location.html). * Stores `location.id` in `listElement.dataset.locationId` for potential future use. * Adds a `click` event listener to the list item. When clicked: * `mapsIndoorsInstance.goTo(location)`: Pans and zooms the map to the clicked location. For more details on `goTo()`, see its [reference](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/MapsIndoors.html#goTo). * `mapsIndoorsInstance.setFloor(location.properties.floor)`: Changes the map to the location's floor. To understand floor management, check the [`setFloor()` documentation](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/MapsIndoors.html#setFloor). * `mapsIndoorsInstance.selectLocation(location)`: Selects and highlights this specific location on the map. For further information, refer to the [`selectLocation()` API documentation](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/MapsIndoors.html#selectLocation). * Appends the new list item to `searchResultsElement`. * Collects all `location.id`s into `locationIdsToHighlight`. * Makes the `searchResultsElement` visible by removing the `.hidden` class. * Calls `mapsIndoorsInstance.highlight(locationIdsToHighlight)` to highlight all found locations on the map simultaneously. The `highlight()` method accepts an array of location IDs. See its [API documentation](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/MapsIndoors.html#highlight) for details on batch highlighting. * **`.catch(error => { ... })`**: Handles potential errors during the search request, logging them to the console and displaying an error message in the list. * The `handleLocationClick` function is now used for both map clicks and search result clicks, ensuring consistent behavior and code reuse. * When a user clicks a search result or a POI on the map, the map will center on that location, switch to the correct floor, and select the location. * This pattern will be reused and expanded in later steps. ### Expected Outcome After implementing these changes: * A search panel will be visible in the top-left corner of your map. * Typing 3 or more characters into the search input will trigger a search. * Matching locations will appear as a clickable list below the search input. * All matching locations will be highlighted on the map. * Clicking a location in the list will: * Pan and zoom the map to that location. * Switch to the correct floor if necessary. * Select and distinctively highlight that specific location on the map. ### Troubleshooting * **Search not working / No results:** * Check the browser's developer console (F12) for errors. * Ensure your MapsIndoors API Key (`02c329e6777d431a88480a09` for demo) is correct and the MapsIndoors SDK is loaded. * Verify `YOUR_MAPBOX_ACCESS_TOKEN` is correct. * Confirm the `venue` ID (`dfea941bb3694e728df92d3d` for demo) is valid and the venue has searchable locations. * Make sure the `onSearch` function is being called (e.g., add a `console.log` at the beginning of `onSearch`). * **Results list doesn't appear or looks wrong:** * Check CSS for the `.panel`, `#search-results`, and `li` elements. Ensure the `.hidden` class is being correctly added/removed. * **Map interactions (goTo, highlight, selectLocation) not working:** * Verify `mapsIndoorsInstance` is correctly initialized. * Ensure the `location` objects passed to these methods are valid objects conforming to the `Location` interface. * Check for console errors when clicking a search result. {% embed url="
" %} ### Next Steps You've now successfully added a powerful search feature to your indoor map! Users can easily find their way to specific points of interest. Next, learn how to display detailed information about a selected location: * Step 3: [Show the Details](/sdks-and-frameworks/web/tutorial/using-mapbox/show-the-details) # Show the Details **Goal:** This guide demonstrates how to display detailed information about a location when a user selects it from the search results or clicks a POI on the map. The details will include the location's name and description, and the map will navigate to and highlight the selected location. **SDK Classes and Methods Introduced:** * Retrieving and displaying specific location properties (e.g., `location.properties.name`, `location.properties.description`) within a dedicated details panel. * Applying `mapsIndoorsInstance.deselectLocation()` to manage map state when closing the details view. **Implementation Patterns:** * Expanding the unified click handler to show location details * Implementing UI state management between search and details views * Creating a responsive details panel UI * Handling transitions between different UI states ### Prerequisites * Completion of [Step 2: Create a Search Experience](/sdks-and-frameworks/web/tutorial/using-mapbox/create-a-search-experience). * Your MapsIndoors API Key and Mapbox Access Token should be correctly set up. We will continue using the demo API key `02c329e6777d431a88480a09` and venue ID `dfea941bb3694e728df92d3d` for this example. ### The Code This step involves modifications to `index.html` to add elements for displaying details, `style.css` to style these new elements, and `script.js` to handle the logic of fetching and displaying location details and interacting with the map. #### Unified Click Handler Pattern In Step 1, we introduced a reusable click handler (`handleLocationClick`) for POIs on the map. In Step 2, we reused this handler for search result clicks. In this step, we expand the handler to show a details panel with more information about the selected location, and manage the UI state. #### Update index.html Open your `index.html` file. We will add a new `div` within the existing `.panel` to hold the location details. This `div` will be hidden by default and shown when a location is selected. {% code lineNumbers="true" %} ```html MapsIndoors
``` {% endcode %} **Explanation of index.html updates:** * The existing search input and results list are wrapped in a `div` with `id="search-ui"` and class `flex-column`. This helps in managing the visibility of the entire search section. * A new `div` with `id="details-ui"` is added within the `.panel`. This container will hold the location's name, description, and a close button. * It has the class `hidden` to be invisible by default. * It also has `flex-column` for layout consistency. * Inside `#details-ui`: * `
`: For displaying the location name. * `
`: For displaying the location description. * ``: A button to close the details view and return to the search results. #### Update style.css Modify your `style.css` file to add styles for the new location details UI elements. {% code lineNumbers="true" %} ```css /* style.css */ /* Use flexbox for the main layout */ html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; /* Prevent scrollbars if map is full size */ display: flex; flex-direction: column; /* Stack children vertically if needed later */ } /* Style for the map container */ #map { /* Make map fill available space */ flex-grow: 1; width: 100%; /* Make map fill width */ margin: 0; padding: 0; } /* Style for the information panel container */ .panel { position: absolute; /* Position over the map */ top: 10px; /* Distance from the top */ left: 10px; /* Distance from the left */ z-index: 10; /* Ensure it's above the map and other elements */ background-color: white; /* White background for readability */ padding: 10px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Add a subtle shadow */ max-height: 80%; /* Limits max-height to prevent overflow with details */ overflow-y: auto; /* Add scroll if content exceeds max-height */ border: 1px solid #ccc; /* Add border for clarity */ width: 300px; } /* Class to apply flex display and column direction */ .flex-column { display: flex; flex-direction: column; gap: 10px; /* Space between elements */ } /* Class to hide elements */ .hidden { display: none; } /* Style for the search input field */ #search-input { padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; } /* Style for the search results list */ #search-results { list-style: none; /* Remove default list bullets */ padding: 0; margin: 0; } /* Style for individual search result items */ #search-results li { padding: 8px 0; cursor: pointer; /* Indicate clickable items */ border-bottom: 1px solid #eee; /* Separator line */ } /* Style for the last search result item (no bottom border) */ #search-results li:last-child { border-bottom: none; } /* Hover effect for search result items */ #search-results li:hover { background-color: #f0f0f0; /* Highlight on hover */ } /* --- New Styles for Location Details UI elements --- */ /* Styles for the new UI wrappers within #search-container */ #search-ui, #details-ui { width: 100%; /* Ensure they fill the container's width */ /* display: flex and flex-direction are controlled by .flex-column-container class via JS */ } /* Style for the location name in details */ #details-name { margin-top: 0; margin-bottom: 10px; font-size: 1.2rem; border-bottom: 1px solid #eee; padding-bottom: 5px; } /* Style for the location description in details */ #details-description { margin-bottom: 15px; font-size: 0.9rem; color: #555; } /* Style for general buttons within details */ .details-button { padding: 8px; border: none; border-radius: 4px; font-size: 0.9rem; cursor: pointer; margin-bottom: 8px; /* Space between buttons */ transition: background-color 0.3s ease; } .details-button:last-child { margin-bottom: 0; } /* Specific style for the Close button */ #details-close { background-color: #ccc; /* Grey */ color: #333; } #details-close:hover { background-color: #bbb; } ``` {% endcode %} **Explanation of style.css updates:** * `#search-ui`, `#details-ui`: Basic styling to ensure they take full width. The `flex-column` class will handle their internal layout. * `#details-name`: Styles for the location name heading (font size, margin, border). * `#details-description`: Styles for the description text (font size, color, `white-space: pre-wrap` to respect newlines from the data, `max-height` and `overflow-y` for scrollability). * `.details-button`: General styling for buttons in the details view (padding, border-radius, full width). * `#details-close`: Specific styling for the "Close" button (background color, text color, hover effect). #### Update script.js The `script.js` file will be updated to handle showing/hiding the details panel, populating it with location data, and interacting with the map. {% code lineNumbers="true" %} ```javascript // script.js // Define options for the MapsIndoors Mapbox view const mapViewOptions = { accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN', // Replace with your Mapbox token element: document.getElementById('map'), // Initial map center (MapsPeople - Austin Office example) center: { lng: -97.74204591828197, lat: 30.36022358949809 }, // Initial zoom level zoom: 17, // Maximum zoom level maxZoom: 22, // The zoom level at which MapsIndoors transitions mapsIndoorsTransitionLevel: 16 }; // Set the MapsIndoors API key mapsindoors.MapsIndoors.setMapsIndoorsApiKey('YOUR_MAPSINDOORS_API_KEY'); // Replace with your MapsIndoors API key // Create a new instance of the MapsIndoors Mapbox view const mapViewInstance = new mapsindoors.mapView.MapboxV3View(mapViewOptions); // Create a new MapsIndoors instance, passing the map view const mapsIndoorsInstance = new mapsindoors.MapsIndoors({ mapView: mapViewInstance, // Set the venue ID to load the map for a specific venue venue: 'YOUR_MAPSINDOORS_VENUE_ID', // Replace with your actual venue ID }); /** Floor Selector **/ // Create a new HTML div element to host the floor selector const floorSelectorElement = document.createElement('div'); // Create a new FloorSelector instance, linking it to the HTML element and the main MapsIndoors instance. new mapsindoors.FloorSelector(floorSelectorElement, mapsIndoorsInstance); // Get the underlying Mapbox map instance const mapboxInstance = mapViewInstance.getMap(); // Add the floor selector HTML element to the Mapbox map using Mapbox's addControl method // We wrap the element in an object implementing the IControl interface expected by addControl mapboxInstance.addControl({ onAdd: function () { // This function is called when the control is added to the map. // It should return the control's DOM element. return floorSelectorElement; }, onRemove: function () { // This function is called when the control is removed from the map. // Clean up any event listeners or resources here. floorSelectorElement.parentNode.removeChild(floorSelectorElement); }, }, 'top-right'); // Optional: Specify a position ('top-left', 'top-right', 'bottom-left', 'bottom-right') /** Handle Location Clicks **/ // Function to handle clicks on MapsIndoors locations function handleLocationClick(location) { if (location && location.id) { // Move the map to the selected location mapsIndoorsInstance.goTo(location); // Ensure that the map shows the correct floor mapsIndoorsInstance.setFloor(location.properties.floor); // Select the location on the map mapsIndoorsInstance.selectLocation(location); // Show the details UI for the clicked location showDetails(location); } } // Add an event listener to the MapsIndoors instance for click events on locations mapsIndoorsInstance.on('click', handleLocationClick); /** Search Functionality **/ // Get references to the search input and results list elements const searchInputElement = document.getElementById('search-input'); const searchResultsElement = document.getElementById('search-results'); // Initially hide the search results list searchResultsElement.classList.add('hidden'); // Add an event listener to the search input for 'input' events // This calls the onSearch function every time the user types in the input field searchInputElement.addEventListener('input', onSearch); // Function to perform the search and update the results list and map highlighting function onSearch() { // Get the current value from the search input const query = searchInputElement.value; // Get the current venue from the MapsIndoors instance const currentVenue = mapsIndoorsInstance.getVenue(); // Clear map highlighting mapsIndoorsInstance.highlight(); // Deselect any selected location mapsIndoorsInstance.deselectLocation(); // Check if the query is too short (less than 3 characters) or empty if (query.length < 3) { // Hide the results list if the query is too short or empty searchResultsElement.classList.add('hidden'); return; // Stop here } // Define search parameters with the current input value // Include the current venue name in the search parameters const searchParameters = { q: query, venue: currentVenue ? currentVenue.name : undefined }; // Call the MapsIndoors LocationsService to get locations based on the search query mapsindoors.services.LocationsService.getLocations(searchParameters).then(locations => { // Clear previous search results searchResultsElement.innerHTML = null; // If no locations are found, display a "No results found" message if (locations.length === 0) { const noResultsItem = document.createElement('li'); noResultsItem.textContent = 'No results found'; searchResultsElement.appendChild(noResultsItem); // Ensure the results list is visible to show the "No results found" message searchResultsElement.classList.remove('hidden'); return; // Stop here if no results } // Append new search results to the list locations.forEach(location => { const listElement = document.createElement('li'); // Display the location name listElement.innerHTML = location.properties.name; // Store the location ID on the list item for easy access listElement.dataset.locationId = location.id; // Add a click event listener to each list item listElement.addEventListener('click', function () { // Call the handleLocationClick function when a location in the search results is clicked. handleLocationClick(location); }); searchResultsElement.appendChild(listElement); }); // Show the results list now that it has content searchResultsElement.classList.remove('hidden'); // Filter map to only display search results by highlighting them mapsIndoorsInstance.highlight(locations.map(location => location.id)); }) .catch(error => { console.error("Error fetching locations:", error); const errorItem = document.createElement('li'); errorItem.textContent = 'Error performing search.'; searchResultsElement.appendChild(errorItem); searchResultsElement.classList.remove('hidden'); }); } /** UI state management **/ const searchUIElement = document.getElementById('search-ui'); const detailsUIElement = document.getElementById('details-ui'); function showSearchUI() { hideDetailsUI(); searchUIElement.classList.remove('hidden'); searchInputElement.focus(); } function showDetailsUI() { hideSearchUI(); detailsUIElement.classList.remove('hidden'); } function hideSearchUI() { searchUIElement.classList.add('hidden'); } function hideDetailsUI() { detailsUIElement.classList.add('hidden'); } /** Location Details **/ // Get references to the static details view elements const detailsNameElement = document.getElementById('details-name'); const detailsDescriptionElement = document.getElementById('details-description'); const detailsCloseButton = document.getElementById('details-close'); detailsCloseButton.addEventListener('click', () => { mapsIndoorsInstance.deselectLocation(); // Deselect any selected location showSearchUI(); }); // Show the details of a location function showDetails(location) { detailsNameElement.textContent = location.properties.name; detailsDescriptionElement.textContent = location.properties.description || 'No description available.'; showDetailsUI(); } // Initial call to set up the search UI when the page loads showSearchUI(); ``` {% endcode %} **Explanation of script.js updates:** * **Unified Click Handler Implementation**: * Building upon our approach in previous steps, we've implemented a comprehensive click handler system. * The `handleLocationClick` function manages map interactions (selecting a location, zooming, and changing floors). * This function then calls the `showDetails` function to update the UI presentation. * This separation of concerns makes the code more maintainable and easier to understand. * **UI State Management Functions**: * `showSearchUI()`: Shows the search interface and hides the details panel. * `showDetailsUI()`: Shows the details interface and hides the search panel. * `hideSearchUI()` and `hideDetailsUI()`: Helper functions to manage UI visibility. * `showDetails(location)`: Updates the details UI with the location's name and description. * The close button in the details panel has an event listener that returns to the search UI. * **Map Interaction Methods**: * `mapsIndoorsInstance.goTo(location)`: Pans and zooms the map to the selected location. * `mapsIndoorsInstance.setFloor(location.properties.floor)`: Switches to the floor where the location exists. * `mapsIndoorsInstance.selectLocation(location)`: Visually highlights the selected location on the map. * **Location Properties Access**: * We access `location.properties.name` and `location.properties.description` to display detailed information. * The fallback text "No description available" is shown when description is missing. * **Search Result Click Handler**: * Search result clicks now trigger the same handler as map POI clicks, providing a consistent experience. * This unified approach ensures the same behavior whether a user interacts with the map or search results. * The separation between `handleLocationClick` (for map operations) and `showDetails` (for UI updates) creates a cleaner architecture that's easier to maintain and extend. * **Initial Setup**: * `showSearchUI()` is called at the end to ensure the application starts with the search interface visible. ### Expected Outcome After implementing these changes: * When you search for locations and click on a result in the list: * The search input and results list will be hidden. * A details panel will appear showing the selected location's name and description. * The map will pan and zoom to the selected location. * The selected location will be highlighted on the map. * The map will switch to the correct floor of the selected location. * Clicking the "Close" button in the details panel will hide the details and show the search input and results list again. * When you click a POI on the map: * The details panel will appear showing the location's name and description. * The map will pan and zoom to the selected location. * The selected location will be highlighted on the map. * The map will switch to the correct floor of the selected location. ### Troubleshooting * **Details panel doesn't show or shows incorrect data:** * Check browser console for errors. * Verify IDs in `index.html` match those used in `script.js` for `getElementById`. * Ensure `location.properties.name` and `location.properties.description` exist for the selected location or that default text is handled. * Confirm CSS for `.hidden`, `#search-ui`, and `#details-ui` is correctly applied and toggled. * **Map doesn't navigate or select location:** * Ensure `mapsIndoorsInstance` is correctly initialized. * Verify the `location` object passed to `handleLocationClick` is a valid object conforming to the `Location` interface. * Check for console errors when `selectLocation`, `goTo`, or `setFloor` are called. * **"Close" button doesn't work:** * Ensure the event listener is correctly attached to `detailsCloseButton` and that `showSearchUI` is called. {% embed url="
" %} ### Next Steps You've now enhanced your application to display detailed information about locations using a unified click handler. Next, you'll learn how to get and display directions between locations: * Step 4: [Getting Directions](/sdks-and-frameworks/web/tutorial/using-mapbox/getting-directions) # Getting Directions **Goal:** This guide will show you how to add directions functionality to your application. Users will be able to select an origin and destination, get a route between them, and step through the directions on the map. This step builds on the search and details UI from Step 3, introducing a new directions panel and integrating the MapsIndoors DirectionsService and DirectionsRenderer. **SDK Concepts Introduced:** * Using the [DirectionsService](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.services.DirectionsService.html) to calculate routes between locations. * Using the [DirectionsRenderer](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.directions.DirectionsRenderer.html) to display and step through routes on the map. * Using `directionsRenderer.setRoute()` to display a calculated route on the map. * Using `directionsRenderer.setStepIndex()` to navigate to a specific step in the route. * Using `directionsRenderer.nextStep()` and `directionsRenderer.previousStep()` for step navigation. * Using `directionsRenderer.getLegIndex()` and `directionsRenderer.getStepIndex()` to track current position. ### Prerequisites * Completion of [Step 3: Show Location Details](/sdks-and-frameworks/web/tutorial/using-mapbox/show-the-details). Your app should already support searching for locations and viewing details. * Your MapsIndoors API Key and Mapbox Access Token should be correctly set up. We will continue using the demo API key 02c329e6777d431a88480a09 and venue ID dfea941bb3694e728df92d3d for this example. ### Update index.html Open your `index.html` file. Add a new directions panel inside the existing `.panel` container: {% code lineNumbers="true" %} ```html MapsIndoors
Directions
``` {% endcode %} #### Explanation of index.html updates * The `#details-ui` panel now includes a "Get Directions" button, allowing users to open the directions panel for the selected location. * The `#directions-ui` panel is added to the `.panel` container. This new panel contains: * Input fields for origin and destination. * A button to get directions. * Step navigation controls (step indicator, previous/next buttons). * A close button for the directions panel. * All panels (`#search-ui`, `#details-ui`, `#directions-ui`) use consistent class and ID naming, and only one is visible at a time, managed by the show/hide functions in the JavaScript. ### Update style.css Add styles for the new directions UI elements: {% code lineNumbers="true" %} ```css /* style.css */ /* Use flexbox for the main layout */ html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; /* Prevent scrollbars if map is full size */ display: flex; flex-direction: column; /* Stack children vertically if needed later */ } /* Style for the map container */ #map { /* Make map fill available space */ flex-grow: 1; width: 100%; /* Make map fill width */ margin: 0; padding: 0; } /* Style for the information panel container */ .panel { position: absolute; /* Position over the map */ top: 10px; /* Distance from the top */ left: 10px; /* Distance from the left */ z-index: 10; /* Ensure it's above the map and other elements */ background-color: white; /* White background for readability */ padding: 10px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Add a subtle shadow */ max-height: 80%; /* Limits max-height to prevent overflow with details */ overflow-y: auto; /* Add scroll if content exceeds max-height */ border: 1px solid #ccc; /* Add border for clarity */ width: 300px; } /* Class to apply flex display and column direction */ .flex-column { display: flex; flex-direction: column; gap: 10px; /* Space between elements */ } /* Class to hide elements */ .hidden { display: none; } /* Style for the search input field */ #search-input { padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; } /* Style for the search results list */ #search-results { list-style: none; /* Remove default list bullets */ padding: 0; margin: 0; } /* Style for individual search result items */ #search-results li { padding: 8px 0; cursor: pointer; /* Indicate clickable items */ border-bottom: 1px solid #eee; /* Separator line */ } /* Style for the last search result item (no bottom border) */ #search-results li:last-child { border-bottom: none; } /* Hover effect for search result items */ #search-results li:hover { background-color: #f0f0f0; /* Highlight on hover */ } /* --- New Styles for Location Details UI elements --- */ /* Styles for the new UI wrappers within #search-container */ #search-ui, #details-ui { width: 100%; /* Ensure they fill the container's width */ /* display: flex and flex-direction are controlled by .flex-column-container class via JS */ } /* Style for the location name in details */ #details-name { margin-top: 0; margin-bottom: 10px; font-size: 1.2rem; border-bottom: 1px solid #eee; padding-bottom: 5px; } /* Style for the location description in details */ #details-description { margin-bottom: 15px; font-size: 0.9rem; color: #555; } /* Style for general buttons within details */ .details-button { padding: 8px; border: none; border-radius: 4px; font-size: 0.9rem; cursor: pointer; transition: background-color 0.3s ease; } /* Specific style for the Close button */ #details-close { background-color: #ccc; /* Grey */ color: #333; } #details-close:hover { background-color: #bbb; } /* Directions panel specific */ #directions-ui { width: 100%; } .directions-inputs { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; } .directions-results-list { list-style: none; padding: 0; margin: 0; max-height: 120px; overflow-y: auto; } .directions-results-list li { padding: 8px 0; cursor: pointer; border-bottom: 1px solid #eee; } .directions-results-list li:last-child { border-bottom: none; } .directions-results-list li:hover { background-color: #f0f0f0; } .directions-step-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } #step-indicator { grid-column: span 2; } ``` {% endcode %} #### Explanation of style.css updates * Styles for the new `#directions-ui` panel and its child elements are added: * `.directions-inputs` styles the input fields and results list for selecting origin and destination. * `.directions-results-list` styles the list of search results for the origin input. * `.directions-step-nav` and `#step-indicator` style the step navigation controls. ### Update script.js Add the following logic for directions and UI state management: {% code lineNumbers="true" %} ```javascript // script.js // Define options for the MapsIndoors Mapbox view const mapViewOptions = { accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN', // Replace with your Mapbox token element: document.getElementById('map'), // Initial map center (MapsPeople - Austin Office example) center: { lng: -97.74204591828197, lat: 30.36022358949809 }, // Initial zoom level zoom: 17, // Maximum zoom level maxZoom: 22, // The zoom level at which MapsIndoors transitions mapsIndoorsTransitionLevel: 16 }; // Set the MapsIndoors API key mapsindoors.MapsIndoors.setMapsIndoorsApiKey('YOUR_MAPSINDOORS_API_KEY'); // Replace with your MapsIndoors API key // Create a new instance of the MapsIndoors Mapbox view const mapViewInstance = new mapsindoors.mapView.MapboxV3View(mapViewOptions); // Create a new MapsIndoors instance, passing the map view const mapsIndoorsInstance = new mapsindoors.MapsIndoors({ mapView: mapViewInstance, // Set the venue ID to load the map for a specific venue venue: 'YOUR_MAPSINDOORS_VENUE_ID', // Replace with your actual venue ID }); /** Floor Selector **/ // Create a new HTML div element to host the floor selector const floorSelectorElement = document.createElement('div'); // Create a new FloorSelector instance, linking it to the HTML element and the main MapsIndoors instance. new mapsindoors.FloorSelector(floorSelectorElement, mapsIndoorsInstance); // Get the underlying Mapbox map instance const mapboxInstance = mapViewInstance.getMap(); // Add the floor selector HTML element to the Mapbox map using Mapbox's addControl method // We wrap the element in an object implementing the IControl interface expected by addControl mapboxInstance.addControl({ onAdd: function () { // This function is called when the control is added to the map. // It should return the control's DOM element. return floorSelectorElement; }, onRemove: function () { // This function is called when the control is removed from the map. // Clean up any event listeners or resources here. floorSelectorElement.parentNode.removeChild(floorSelectorElement); }, }, 'top-right'); // Optional: Specify a position ('top-left', 'top-right', 'bottom-left', 'bottom-right') /** Handle Location Clicks **/ // Function to handle clicks on MapsIndoors locations function handleLocationClick(location) { if (location && location.id) { // Move the map to the selected location mapsIndoorsInstance.goTo(location); // Ensure that the map shows the correct floor mapsIndoorsInstance.setFloor(location.properties.floor); // Select the location on the map mapsIndoorsInstance.selectLocation(location); // Show the details UI for the clicked location showDetails(location); } } // Add an event listener to the MapsIndoors instance for click events on locations mapsIndoorsInstance.on('click', handleLocationClick); /** Search Functionality **/ // Get references to the search input and results list elements const searchInputElement = document.getElementById('search-input'); const searchResultsElement = document.getElementById('search-results'); // Initially hide the search results list searchResultsElement.classList.add('hidden'); // Add an event listener to the search input for 'input' events // This calls the onSearch function every time the user types in the input field searchInputElement.addEventListener('input', onSearch); // Function to perform the search and update the results list and map highlighting function onSearch() { // Get the current value from the search input const query = searchInputElement.value; // Get the current venue from the MapsIndoors instance const currentVenue = mapsIndoorsInstance.getVenue(); // Clear map highlighting mapsIndoorsInstance.highlight(); // Deselect any selected location mapsIndoorsInstance.deselectLocation(); // Check if the query is too short (less than 3 characters) or empty if (query.length < 3) { // Hide the results list if the query is too short or empty searchResultsElement.classList.add('hidden'); return; // Stop here } // Define search parameters with the current input value // Include the current venue name in the search parameters const searchParameters = { q: query, venue: currentVenue ? currentVenue.name : undefined }; // Call the MapsIndoors LocationsService to get locations based on the search query mapsindoors.services.LocationsService.getLocations(searchParameters).then(locations => { // Clear previous search results searchResultsElement.innerHTML = null; // If no locations are found, display a "No results found" message if (locations.length === 0) { const noResultsItem = document.createElement('li'); noResultsItem.textContent = 'No results found'; searchResultsElement.appendChild(noResultsItem); // Ensure the results list is visible to show the "No results found" message searchResultsElement.classList.remove('hidden'); return; // Stop here if no results } // Append new search results to the list locations.forEach(location => { const listElement = document.createElement('li'); // Display the location name listElement.innerHTML = location.properties.name; // Store the location ID on the list item for easy access listElement.dataset.locationId = location.id; // Add a click event listener to each list item listElement.addEventListener('click', function () { // Call the handleLocationClick function when a location in the search results is clicked. handleLocationClick(location); }); searchResultsElement.appendChild(listElement); }); // Show the results list now that it has content searchResultsElement.classList.remove('hidden'); // Filter map to only display search results by highlighting them mapsIndoorsInstance.highlight(locations.map(location => location.id)); }) .catch(error => { console.error("Error fetching locations:", error); const errorItem = document.createElement('li'); errorItem.textContent = 'Error performing search.'; searchResultsElement.appendChild(errorItem); searchResultsElement.classList.remove('hidden'); }); } /** UI state management **/ const searchUIElement = document.getElementById('search-ui'); const detailsUIElement = document.getElementById('details-ui'); const directionsUIElement = document.getElementById('directions-ui'); function showSearchUI() { hideDetailsUI(); hideDirectionsUI(); // Ensure directions UI is hidden searchUIElement.classList.remove('hidden'); searchInputElement.focus(); } function showDetailsUI() { hideSearchUI(); hideDirectionsUI(); // Ensure directions UI is hidden detailsUIElement.classList.remove('hidden'); } function hideSearchUI() { searchUIElement.classList.add('hidden'); } function hideDetailsUI() { detailsUIElement.classList.add('hidden'); } function showDirectionsUI() { hideSearchUI(); hideDetailsUI(); directionsUIElement.classList.remove('hidden'); } function hideDirectionsUI() { directionsUIElement.classList.add('hidden'); } /** Location Details **/ // Get references to the static details view elements const detailsNameElement = document.getElementById('details-name'); const detailsDescriptionElement = document.getElementById('details-description'); const detailsCloseButton = document.getElementById('details-close'); detailsCloseButton.addEventListener('click', () => { mapsIndoorsInstance.deselectLocation(); // Deselect any selected location showSearchUI(); }); // Variable to store the location currently shown in details let currentDetailsLocation = null; // Show the details of a location function showDetails(location) { // Keep track of the currently selected location currentDetailsLocation = location; detailsNameElement.textContent = location.properties.name; detailsDescriptionElement.textContent = location.properties.description || 'No description available.'; showDetailsUI(); } // Initial call to set up the search UI when the page loads showSearchUI(); /** Directions Functionality **/ // Handles origin/destination selection, route calculation, and step navigation const originInputElement = document.getElementById('origin-input'); const originResultsElement = document.getElementById('origin-results'); const destinationInputElement = document.getElementById('destination-input'); const getDirectionsButton = document.getElementById('get-directions'); const prevStepButton = document.getElementById('prev-step'); const nextStepButton = document.getElementById('next-step'); const stepIndicator = document.getElementById('step-indicator'); const directionsCloseButton = document.getElementById('directions-close'); let selectedOrigin = null; let selectedDestination = null; let currentRoute = null; let directionsRenderer = null; // Reference the details-directions button defined in the HTML const detailsDirectionsButton = document.getElementById('details-directions'); detailsDirectionsButton.addEventListener('click', () => { showDirectionsPanel(currentDetailsLocation); }); detailsCloseButton.addEventListener('click', showSearchUI); directionsCloseButton.addEventListener('click', () => { hideDirectionsUI(); showDetailsUI(); if (directionsRenderer) directionsRenderer.setVisible(false); }); // Show the directions panel and reset state for a new route function showDirectionsPanel(destinationLocation) { selectedOrigin = null; selectedDestination = destinationLocation; currentRoute = null; destinationInputElement.value = destinationLocation.properties.name; originInputElement.value = ''; originResultsElement.innerHTML = ''; hideSearchUI(); hideDetailsUI(); showDirectionsUI(); stepIndicator.textContent = ''; } // Search for origin locations as the user types originInputElement.addEventListener('input', onOriginSearch); function onOriginSearch() { const query = originInputElement.value; const currentVenue = mapsIndoorsInstance.getVenue(); originResultsElement.innerHTML = ''; if (query.length < 3) return; const searchParameters = { q: query, venue: currentVenue ? currentVenue.name : undefined }; mapsindoors.services.LocationsService.getLocations(searchParameters).then(locations => { if (locations.length === 0) { const noResultsItem = document.createElement('li'); noResultsItem.textContent = 'No results found'; originResultsElement.appendChild(noResultsItem); return; } locations.forEach(location => { const listElement = document.createElement('li'); listElement.textContent = location.properties.name; listElement.addEventListener('click', () => { selectedOrigin = location; originInputElement.value = location.properties.name; originResultsElement.innerHTML = ''; }); originResultsElement.appendChild(listElement); }); }); } // Calculate and display the route when both origin and destination are selected getDirectionsButton.addEventListener('click', async () => { if (!selectedOrigin || !selectedDestination) { // Optionally, show an alert or update stepIndicator instead stepIndicator.textContent = 'Please select both origin and destination.'; return; } // Use anchor property for LatLngLiteral (anchor is always a point) const origin = { lat: selectedOrigin.properties.anchor.coordinates[1], lng: selectedOrigin.properties.anchor.coordinates[0], floor: selectedOrigin.properties.floor }; const destination = { lat: selectedDestination.properties.anchor.coordinates[1], lng: selectedDestination.properties.anchor.coordinates[0], floor: selectedDestination.properties.floor }; const directionsService = new mapsindoors.services.DirectionsService(); const route = await directionsService.getRoute({ origin, destination }); currentRoute = route; if (directionsRenderer) { directionsRenderer.setVisible(false); } directionsRenderer = new mapsindoors.directions.DirectionsRenderer({ mapsIndoors: mapsIndoorsInstance, fitBounds: true, strokeColor: '#4285f4', strokeWeight: 5 }); await directionsRenderer.setRoute(route); directionsRenderer.setStepIndex(0, 0); showCurrentStep(); }); // Update the step indicator and enable/disable navigation buttons function showCurrentStep() { if (currentRoute?.legs?.length < 1) return; const currentLegIndex = directionsRenderer.getLegIndex(); const currentStepIndex = directionsRenderer.getStepIndex(); const legs = currentRoute.legs; const steps = legs[currentLegIndex].steps; if (steps.length === 0) { stepIndicator.textContent = ''; return; } stepIndicator.textContent = `Leg ${currentLegIndex + 1} of ${legs.length}, Step ${currentStepIndex + 1} of ${steps.length}`; prevStepButton.disabled = currentLegIndex === 0 && currentStepIndex === 0; nextStepButton.disabled = currentLegIndex === legs.length - 1 && currentStepIndex === steps.length - 1; } // Step navigation event listeners prevStepButton.addEventListener('click', () => { if (!directionsRenderer) { return; } directionsRenderer.previousStep(); showCurrentStep(); }); nextStepButton.addEventListener('click', () => { if (!directionsRenderer) { return; } directionsRenderer.nextStep(); showCurrentStep(); }); ``` {% endcode %} **Explanation of script.js updates:** * **UI State Management:** * New constants like `directionsUIElement` are added to reference the new directions panel in the DOM. * The existing UI state management functions (`showSearchUI()`, `showDetailsUI()`) are updated to explicitly hide the `directionsUIElement`. * New functions `showDirectionsUI()` and `hideDirectionsUI()` are introduced to manage the visibility of the directions panel, ensuring it's mutually exclusive with the search and details panels. * The "Get Directions" button (`detailsDirectionsButton`) in the details panel now has an event listener that calls `showDirectionsPanel()`, passing the `currentDetailsLocation` to pre-fill the destination. * The `directionsCloseButton` listener is added to hide the directions UI, show the details UI, and make the `directionsRenderer` invisible when directions are closed, providing a clear exit path. * **Location Click Handling:** * The script maintains the unified click handler pattern established in previous steps. The `handleLocationClick` function continues to serve as the central entry point for user interactions with locations, responding to both map POI clicks and search result clicks. * This consistent pattern ensures that when a user clicks on a location (either on the map or in search results), the following actions always occur: * The map pans to the selected location using `mapsIndoorsInstance.goTo(location)` * The floor is set to the location's floor with `mapsIndoorsInstance.setFloor(location.properties.floor)` * The location is visually selected on the map using `mapsIndoorsInstance.selectLocation(location)` * The location details panel is shown via `showDetails(location)` * This unified approach ensures a consistent user experience regardless of how locations are selected. * **Directions Panel and Origin/Destination Selection:** * New DOM element references are established for directions-related UI elements: `originInputElement`, `originResultsElement`, `destinationInputElement`, `getDirectionsButton`, `prevStepButton`, `nextStepButton`, `stepIndicator`, and `directionsCloseButton`. * State variables `selectedOrigin`, `selectedDestination`, `currentRoute`, and `directionsRenderer` are declared to manage the directions workflow state. * The `showDirectionsPanel(destinationLocation)` function resets the directions state, pre-fills the destination input with the selected location's name, and shows the directions UI. * An origin search is implemented with an `input` event listener on `originInputElement`, which calls the `onOriginSearch()` function. This function uses `mapsindoors.services.LocationsService.getLocations()` to search for origin locations, similar to the main search functionality. * **Route Calculation:** * When the user clicks the "Show Route" button (`getDirectionsButton`), the script checks if both `selectedOrigin` and `selectedDestination` are set. * It extracts coordinates and floor information from the location objects' `properties.anchor` and `properties.floor`. * A new instance of `mapsindoors.services.DirectionsService()` is created. * The `getRoute()` method is called with origin and destination parameters to calculate the route. * The route is stored in the `currentRoute` variable for later reference. * **Route Display and Step Navigation:** * Any existing `directionsRenderer` is hidden before creating a new one. * A new `mapsindoors.directions.DirectionsRenderer` is instantiated with the `mapsIndoorsInstance`, `fitBounds: true` for automatic map adjustment, and styling options. * The renderer is configured with the calculated route via `directionsRenderer.setRoute(route)`. * The renderer is set to display the first step of the first leg with `directionsRenderer.setStepIndex(0, 0)`. * The `showCurrentStep()` function updates the step indicator text and enables/disables the navigation buttons based on the current position in the route. * Event listeners for the navigation buttons call `directionsRenderer.previousStep()` and `directionsRenderer.nextStep()` respectively, followed by `showCurrentStep()` to update the UI. * **Workflow Integration:** * The script carefully integrates the directions functionality with the existing search and details features. * The details panel now includes a "Get Directions" button that transitions to the directions workflow. * The directions panel allows users to return to the details view via the close button. * All three UI states (search, details, directions) are mutually exclusive, providing a clear and focused user interface. These updates allow users to search for a location, view its details, and get step-by-step directions between two locations within your venue, all within a clear and interactive UI. ### Expected Outcome * Users can search for a location, view its details, and click "Get Directions" to open the directions panel. * When the directions panel opens from the details view, the destination input is pre-filled with the selected location's name and is disabled. * The user can type in the origin input to search for and select an origin location. * After both origin and destination are selected, clicking "Show Route" calculates and displays the route on the map. * The map updates to show the full route, and the step navigation controls become active. * Users can use the "Previous" and "Next" buttons to step through the route, with the map highlighting the current step and the `step-indicator` updating accordingly. * Only one panel (search, details, or directions) is visible at a time. * Clicking the "Close Directions" button returns to the details panel and hides the route from the map. ### Troubleshooting * If the route is not shown after clicking "Show Route", ensure both origin and destination are selected and that the locations have valid anchor coordinates. * If the map does not update, check for errors in the browser console and verify your API keys and venue ID. * If the UI panels do not switch as expected, ensure the show/hide functions are called correctly and that the correct classes are applied. {% embed url="
" %} # Using Google Maps # Display a map **Goal:** This guide will walk you through initializing the MapsIndoors SDK and displaying your first interactive indoor map using Google Maps as the map provider. **SDK Concepts Introduced:** * Setting the MapsIndoors API Key using `mapsindoors.MapsIndoors.setMapsIndoorsApiKey()` * Initializing the Google Maps map view using `mapsindoors.mapView.GoogleMapsView`. * Creating the main `mapsindoors.MapsIndoors` instance. * Adding a `mapsindoors.FloorSelector` control. * Using `mapsIndoorsInstance.goTo()` to pan and zoom the map to the selected location. * Handling map clicks to center the map on a clicked POI (location) using `mapsIndoorsInstance.on('click', callback)` ### Prerequisites * Completion of the [Set Up Your Environment](/sdks-and-frameworks/web/tutorial/set-up-your-environment) guide. * You will need a **Google Maps JavaScript API Key**. If you don't have one, you can create one in the [Google Cloud Console](https://console.cloud.google.com/). * You will need a **MapsIndoors API Key**. For this tutorial, you can use the demo API key: `02c329e6777d431a88480a09`. ### The Code To display the map, you'll need to update your `index.html`, `style.css`, and `script.js` files as follows. #### Update index.html Open your `index.html` file. You need to include the Google Maps JavaScript API and ensure there's a `
` element to contain the map. ```html MapsIndoors
``` **Explanation of index.html updates:** * The Google Maps JavaScript API is included with your API key. Replace `YOUR_GOOGLE_MAPS_API_KEY` with your actual key. * The MapsIndoors SDK script (`mapsindoors-4.41.0.js.gz`) should already be present from the initial setup guide. You can always check the [MapsIndoors SDK reference documentation](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/index.html) for the latest SDK version. * An empty `
` with the attribute `id="map"` was added inside the ``. This `div` is crucial as it serves as the container where both the Google base map and the MapsIndoors layers will be rendered. #### Update style.css Update your `style.css` file to ensure the `#map` element fills the available space. This is necessary for the map to be visible. ```css /* style.css */ /* Use flexbox for the main layout (from initial setup) */ html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; /* Prevent scrollbars if map is full size */ display: flex; flex-direction: column; /* Stack children vertically if needed later */ } /* Style for the map container */ #map { /* Make map fill available space within its flex parent (body) */ flex-grow: 1; width: 100%; /* Make map fill width */ margin: 0; padding: 0; } ``` **Explanation of style.css updates:** * The styles for the `#map` container are added. These styles define how the map container behaves within the flexbox layout established in the initial setup (`html, body` styles). * `flex-grow: 1;` is a key flexbox property that allows the map container to expand and fill the available vertical space within its parent (`body`). * `width: 100%;` ensures the map fills the full horizontal width of its container. * `margin: 0;` and `padding: 0;` remove any default browser spacing around the map container, ensuring it fits snugly. #### Add JavaScript to script.js Open your `script.js` file and add the following JavaScript code. This code will initialize the Google Map, then create the MapsIndoors view and instance, and finally add a Floor Selector. Remember to replace `YOUR_MAPSINDOORS_API_KEY` with your MapsIndoors API key if not using the demo key. For testing, the demo MapsIndoors API key `02c329e6777d431a88480a09` and the Austin office venue ID `dfea941bb3694e728df92d3d` are used. ```javascript // script.js // Define options for the MapsIndoors Google Maps view const mapViewOptions = { element: document.getElementById('map'), // Initial map center (MapsPeople - Austin Office example) center: { lng: -97.74204591828197, lat: 30.36022358949809 }, zoom: 17, maxZoom: 22, }; // Set the MapsIndoors API key mapsindoors.MapsIndoors.setMapsIndoorsApiKey('YOUR_MAPSINDOORS_API_KEY'); // Create a new instance of the MapsIndoors Google Maps view const mapViewInstance = new mapsindoors.mapView.GoogleMapsView(mapViewOptions); // Create a new MapsIndoors instance, linking it to the map view. // This is the main object for interacting with MapsIndoors functionalities. const mapsIndoorsInstance = new mapsindoors.MapsIndoors({ mapView: mapViewInstance, // Set the venue ID to load the map for a specific venue venue: 'YOUR_MAPSINDOORS_VENUE_ID', // Replace with your actual venue ID }); /** Floor Selector **/ // Create a new HTML div element to host the floor selector const floorSelectorElement = document.createElement('div'); // Create a new FloorSelector instance, linking it to the HTML element and the main MapsIndoors instance. new mapsindoors.FloorSelector(floorSelectorElement, mapsIndoorsInstance); // Get the underlying Google Maps instance const googleMapInstance = mapViewInstance.getMap(); // Add the floor selector HTML element to the Google Maps controls. googleMapInstance.controls[google.maps.ControlPosition.TOP_RIGHT].push(floorSelectorElement); /** Handle Location Clicks on Map **/ // Handle Location Clicks on Map function handleLocationClick(location) { if (location && location.id) { mapsIndoorsInstance.goTo(location); // Center the map on the clicked location } } // Add an event listener to the MapsIndoors instance for click events on locations mapsIndoorsInstance.on('click', handleLocationClick); ``` **Explanation of script.js updates:** * `const mapViewOptions = { ... }`: This object defines essential configuration options for the MapsIndoors Google Maps view. * `element`: The HTML DOM element (our `
`) where the map will be rendered. * `center`, `zoom`, `maxZoom`: Standard map parameters to set the initial view. * For more details on all available options, see the [`mapsindoors.mapView.GoogleMapsView` class documentation](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.mapView.GoogleMapsView.html). * `mapsindoors.MapsIndoors.setMapsIndoorsApiKey('YOUR_MAPSINDOORS_API_KEY');`: This static method sets your MapsIndoors API key globally for the SDK. This key authenticates your requests to MapsIndoors services. See the [`mapsindoors.MapsIndoors` class reference](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/MapsIndoors.html). * `const mapViewInstance = new mapsindoors.mapView.GoogleMapsView(mapViewOptions);`: This line creates an instance of `GoogleMapsView`, which is responsible for integrating MapsIndoors data and rendering with a Google Map. For more details on `GoogleMapsView`, see its [class reference](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.mapView.GoogleMapsView.html). * `const mapsIndoorsInstance = new mapsindoors.MapsIndoors({ mapView: mapViewInstance, venue: 'YOUR_MAPSINDOORS_VENUE_ID' });`: This creates the main `MapsIndoors` instance. This object is your primary interface for interacting with MapsIndoors functionalities like displaying locations, getting directions, etc. See the [`mapsindoors.MapsIndoors` class documentation](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/MapsIndoors.html). * **Floor Selector Integration:** * `const floorSelectorElement = document.createElement('div');`: A new HTML `div` element is dynamically created. This element will serve as the container for the Floor Selector UI. * `new mapsindoors.FloorSelector(floorSelectorElement, mapsIndoorsInstance);`: This instantiates the `FloorSelector` control. It takes the HTML element to render into and the `mapsIndoorsInstance` to interact with (e.g., to know available floors and change the current floor). For more details on `FloorSelector`, see its [class reference](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.FloorSelector.html). * `const googleMapInstance = mapViewInstance.getMap();`: The `getMap()` method on our `mapViewInstance` returns the underlying native Google Maps `Map` object. This is necessary to use Google Maps-specific functionalities. * `googleMapInstance.controls[google.maps.ControlPosition.TOP_RIGHT].push(floorSelectorElement);`: This uses the native Google Maps controls API to add our `floorSelectorElement` to the map UI in the top-right corner. For more details, refer to the [Google Maps JavaScript API documentation on controls](https://developers.google.com/maps/documentation/javascript/controls). * **Click-to-Center Functionality:** * `function handleLocationClick(location) { ... }`: This function is called whenever a location (POI) on the map is clicked. It checks that the clicked object is a valid MapsIndoors location and then calls `mapsIndoorsInstance.goTo(location)` to center the map on that location. * `mapsIndoorsInstance.on('click', handleLocationClick);`: This line registers the click handler so that clicking any POI on the map will smoothly center the map on that location. This pattern will be reused and expanded in later steps. ### Expected Outcome After completing these steps and opening your `index.html` file in a web browser, you should see: * An interactive map centered on the MapsPeople Austin Office. * A Floor Selector control visible in the top-right corner of the map, allowing you to switch between different floors of the venue. * Clicking on any POI or location marker on the map will center the map on that location. ### Troubleshooting * **Map doesn't load / blank page:** * Check your browser's developer console (usually F12) for any error messages. * Verify that `YOUR_MAPSINDOORS_API_KEY` is correctly set (or the demo key is used). * Double-check all CDN links in `index.html` are correct and accessible. * **Floor selector doesn't appear:** * Verify the JavaScript code for creating and adding the floor selector has no typos. * Check the console for errors related to `FloorSelector` or Google Maps controls. * **Clicking a location does not center the map:** * Ensure the `handleLocationClick` function is correctly defined and registered as an event listener. * Check for any JavaScript errors in the console that might indicate issues with the click handling code. {% embed url="" %} ### Next Steps You have successfully displayed a MapsIndoors map with Google Maps and added a floor selector! This is the foundational step for building more complex indoor mapping applications. Next, you will learn how to add search functionality to your map: * Step 2: [Create a Search Experience](/sdks-and-frameworks/web/tutorial/using-google-maps/create-a-search-experience) # Create a Search Experience **Goal:** This guide will show you how to add a search input field to your map application, allowing users to find locations within your venue. Search results will be displayed in a list and highlighted on the map. **SDK Concepts Introduced:** * Using `mapsindoors.services.LocationsService.getLocations()` to fetch locations based on a query. * Interacting with the map based on search results: * Highlighting multiple locations: `mapsIndoorsInstance.highlight()`. * Setting the floor: `mapsIndoorsInstance.setFloor()`. * Selecting a specific location: `mapsIndoorsInstance.selectLocation()`. * Clearing previous highlights and selections: `mapsIndoorsInstance.highlight()` (with no arguments) and `mapsIndoorsInstance.deselectLocation()`. * Getting current venue information: `mapsIndoorsInstance.getVenue()`. ### Prerequisites * Completion of [Step 1: Display a Map](/sdks-and-frameworks/web/tutorial/using-google-maps/display-a-map). * Your MapsIndoors API Key and Google Maps JavaScript API Key should be correctly set up as per Step 1. We will continue using the demo API key `02c329e6777d431a88480a09` and venue ID `dfea941bb3694e728df92d3d` for this example. ### The Code This guide details the modifications to HTML, CSS, and JavaScript needed to add a search input field, display search results, and dynamically interact with the map based on user searches. #### Update index.html Open your `index.html` file. The primary structural change to your HTML is the introduction of a dedicated search panel. This panel will house the input field where users type their search queries and an unordered list where the corresponding search results will appear. {% code lineNumbers="true" %} ```html MapsIndoors

``` {% endcode %} **Explanation of index.html updates:** * A new `div` element with the class `panel` is added. This `div` serves as the main container for all search-related UI elements. * Inside the `panel`, another `div` with the id `search-ui` and the class `flex-column` is introduced to arrange the search input and results list vertically. * An `` element with `id="search-input"` is the text field for user search queries. * An `
` (unordered list) element with `id="search-results"` will be dynamically populated with locations matching the user's query. ### Update style.css Modify your `style.css` file to incorporate styles for the newly added search panel and its contents. These styles are crucial for ensuring the search interface is user-friendly, visually appealing, and correctly positioned over the map without obstructing it entirely. {% code lineNumbers="true" %} ```css /* style.css */ /* Use flexbox for the main layout */ html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; /* Prevent scrollbars if map is full size */ display: flex; flex-direction: column; /* Stack children vertically if needed later */ } /* Style for the map container */ #map { /* Make map fill available space */ flex-grow: 1; width: 100%; /* Make map fill width */ margin: 0; padding: 0; } /* Style for the information panel container */ .panel { position: absolute; /* Positions the panel relative to the nearest positioned ancestor (or body if none). This allows it to float over the map. */ top: 10px; /* Adds a 10px margin from the top edge of its containing element. */ left: 10px; /* Adds a 10px margin from the left edge of its containing element, placing it in the top-left corner. */ z-index: 10; /* Ensures the panel appears on top of other elements, like the map itself, which might have lower z-index values. */ background-color: white; /* Sets a solid white background for the panel, making text readable. */ padding: 10px; /* Adds 10px of space inside the panel, around its content. */ border-radius: 5px; /* Rounds the corners of the panel for a softer look. */ box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Adds a subtle shadow effect, giving the panel a sense of depth. */ max-height: 80%; /* Limits max-height to prevent overflow with details */ overflow-y: auto; /* Adds a vertical scrollbar if the content inside the panel exceeds its max-height. */ border: 1px solid #ccc; /* Adds a light gray border around the panel for better visual separation. */ width: 300px; /* Sets a fixed width for the panel. */ } /* Class to apply flex display and column direction */ .flex-column { display: flex; /* Enables flexbox layout for this element. */ flex-direction: column; /* Arranges child elements in a vertical column. */ gap: 10px; /* Adds a 10px gap between child elements within the flex container. */ } /* Class to hide elements */ .hidden { display: none; /* Makes elements with this class invisible and removes them from the layout. */ } /* Style for the search input field */ #search-input { padding: 8px; /* Adds 8px of internal padding to the input field for better text spacing. */ border: 1px solid #ccc; /* Adds a light gray border around the input field. */ border-radius: 4px; /* Slightly rounds the corners of the input field. */ font-size: 1rem; /* Sets the font size within the input field to a standard readable size. */ } /* Style for the search results list */ #search-results { list-style: none; /* Removes the default bullet points from the unordered list. */ padding: 0; /* Removes default padding from the list. */ margin: 0; /* Removes default margins from the list. */ } /* Style for individual search result items */ #search-results li { padding: 8px 0; /* Adds vertical padding to each list item for spacing. */ cursor: pointer; /* Changes the mouse cursor to a pointer on hover, indicating the item is clickable. */ border-bottom: 1px solid #eee; /* Adds a light gray line below each list item, acting as a separator. */ } /* Style for the last search result item (no bottom border) */ #search-results li:last-child { border-bottom: none; /* Removes the bottom border from the last item in the list for a cleaner look. */ } /* Hover effect for search result items */ #search-results li:hover { background-color: #f0f0f0; /* Changes the background color of a list item when hovered, providing visual feedback. */ } ``` {% endcode %} **Explanation of style.css updates:** * **`.panel`**: Styles the search panel to float over the map in the top-left corner, with a white background, padding, rounded corners, and a shadow for a modern look. `max-height` and `overflow-y: auto` ensure it's scrollable if results are numerous. * **`.flex-column`**: A utility class using Flexbox to stack child elements (search input, results list) vertically with a small gap. * **`.hidden`**: A utility class to hide elements (`display: none;`), used initially for the search results list. * **`#search-input`**: Styles the search input field with padding, border, and font size for readability. * **`#search-results`**: Styles the unordered list for search results, removing default list styling. * **`#search-results li`**: Styles individual list items with padding, a bottom border for separation, and a pointer cursor to indicate clickability. * **`#search-results li:last-child`**: Removes the bottom border from the last list item. * **`#search-results li:hover`**: Provides a hover effect for list items for better user feedback. ### Update script.js The `script.js` file sees the most significant changes as it houses the logic for the search functionality. {% code lineNumbers="true" %} ```javascript // script.js // Define options for the MapsIndoors Google Maps view const mapViewOptions = { element: document.getElementById('map'), center: { lng: -97.74204591828197, lat: 30.36022358949809 }, zoom: 17, maxZoom: 22, }; // Set the MapsIndoors API key mapsindoors.MapsIndoors.setMapsIndoorsApiKey('YOUR_MAPSINDOORS_API_KEY'); // Replace with your MapsIndoors API key // Create a new instance of the MapsIndoors Google Maps view const mapViewInstance = new mapsindoors.mapView.GoogleMapsView(mapViewOptions); // Create a new MapsIndoors instance, passing the map view const mapsIndoorsInstance = new mapsindoors.MapsIndoors({ mapView: mapViewInstance, // Set the venue ID to load the map for a specific venue venue: 'YOUR_MAPSINDOORS_VENUE_ID', // Replace with your actual venue ID }); /** Floor Selector **/ // Create a new HTML div element to host the floor selector const floorSelectorElement = document.createElement('div'); // Create a new FloorSelector instance, linking it to the HTML element and the main MapsIndoors instance. new mapsindoors.FloorSelector(floorSelectorElement, mapsIndoorsInstance); // Get the underlying Google Maps instance const googleMapInstance = mapViewInstance.getMap(); // Add the floor selector HTML element to the Google Maps controls. googleMapInstance.controls[google.maps.ControlPosition.TOP_RIGHT].push(floorSelectorElement); /** Handle Location Clicks **/ // Function to handle clicks on MapsIndoors locations function handleLocationClick(location) { if (location && location.id) { // Move the map to the selected location mapsIndoorsInstance.goTo(location); // Ensure that the map shows the correct floor mapsIndoorsInstance.setFloor(location.properties.floor); // Select the location on the map mapsIndoorsInstance.selectLocation(location); } } // Add an event listener to the MapsIndoors instance for click events on locations mapsIndoorsInstance.on('click', handleLocationClick); /** Search Functionality **/ // Get references to the search input and results list elements const searchInputElement = document.getElementById('search-input'); const searchResultsElement = document.getElementById('search-results'); // Initially hide the search results list searchResultsElement.classList.add('hidden'); // Add an event listener to the search input for 'input' events // This calls the onSearch function every time the user types in the input field searchInputElement.addEventListener('input', onSearch); // Function to perform the search and update the results list and map highlighting function onSearch() { // Get the current value from the search input const query = searchInputElement.value; // Get the current venue from the MapsIndoors instance const currentVenue = mapsIndoorsInstance.getVenue(); // Clear map highlighting mapsIndoorsInstance.highlight(); // Deselect any selected location mapsIndoorsInstance.deselectLocation(); // Check if the query is too short (less than 3 characters) or empty if (query.length < 3) { // Hide the results list if the query is too short or empty searchResultsElement.classList.add('hidden'); return; // Stop here } // Define search parameters with the current input value // Include the current venue name in the search parameters const searchParameters = { q: query, venue: currentVenue ? currentVenue.name : undefined }; // Call the MapsIndoors LocationsService to get locations based on the search query mapsindoors.services.LocationsService.getLocations(searchParameters).then(locations => { // Clear previous search results searchResultsElement.innerHTML = null; // If no locations are found, display a "No results found" message if (locations.length === 0) { const noResultsItem = document.createElement('li'); noResultsItem.textContent = 'No results found'; searchResultsElement.appendChild(noResultsItem); // Ensure the results list is visible to show the "No results found" message searchResultsElement.classList.remove('hidden'); return; // Stop here if no results } // Append new search results to the list locations.forEach(location => { const listElement = document.createElement('li'); // Display the location name listElement.innerHTML = location.properties.name; // Store the location ID on the list item for easy access listElement.dataset.locationId = location.id; // Add a click event listener to each list item listElement.addEventListener('click', function () { // Call the handleLocationClick function when a location in the search results is clicked. handleLocationClick(location); }); searchResultsElement.appendChild(listElement); }); // Show the results list now that it has content searchResultsElement.classList.remove('hidden'); // Filter map to only display search results by highlighting them mapsIndoorsInstance.highlight(locations.map(location => location.id)); }) .catch(error => { console.error("Error fetching locations:", error); const errorItem = document.createElement('li'); errorItem.textContent = 'Error performing search.'; searchResultsElement.appendChild(errorItem); searchResultsElement.classList.remove('hidden'); }); } ``` {% endcode %} **Explanation of script.js updates:** * **DOM Element References**: `searchInputElement` and `searchResultsElement` get references to the HTML input field and the unordered list for displaying results, respectively. * **Initial State**: The `searchResultsElement` is hidden by default using the `.hidden` CSS class. * **Event Listener**: An `input` event listener is attached to `searchInputElement`. This calls the `onSearch` function each time the user types into the search field. * **`onSearch()` Function**: This is the core of the search logic: * It retrieves the current `query` from the input field and gets the `currentVenue` using `mapsIndoorsInstance.getVenue()`. For more details on venue information, see the [`getVenue()` reference](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/MapsIndoors.html#getVenue). * It clears any existing highlights from the map using `mapsIndoorsInstance.highlight()` (called without arguments). See its [API documentation](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/MapsIndoors.html#highlight) for more on clearing highlights. * It deselects any currently selected location using `mapsIndoorsInstance.deselectLocation()`. Refer to its [API documentation](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/MapsIndoors.html#deselectLocation) for deselection behavior. * If the `query` length is less than 3 characters, it hides the `searchResultsElement` and exits to prevent overly broad or empty searches. * It prepares `searchParameters` with the `q` (query) and scopes the search to the `currentVenue.name`. For a comprehensive list of search options, check out the [LocationsService.getLocations() documentation](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.services.LocationsService.html#.getLocations) * It calls `mapsindoors.services.LocationsService.getLocations(searchParameters)` to fetch locations. This asynchronous method returns a Promise. * **`.then(locations => { ... })`**: This block handles the successful response from the LocationsService. `locations` is an array of objects, where each object conforms to the [Location interface](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.Location.html). * It clears previous search results by setting `searchResultsElement.innerHTML = null`. * If no `locations` are found, it displays a "No results found" message in the list. * Otherwise, it iterates through each `location` object: * Creates an `
` element. * Sets its `innerHTML` to `location.properties.name`. The `properties` object on an object conforming to the `Location` interface contains various details about the location. For more information, see the [Location documentation](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.Location.html). * Stores `location.id` in `listElement.dataset.locationId` for potential future use. * Adds a `click` event listener to the list item. When clicked: * `mapsIndoorsInstance.goTo(location)`: Pans and zooms the map to the clicked location. For more details on `goTo()`, see its [reference](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/MapsIndoors.html#goTo). * `mapsIndoorsInstance.setFloor(location.properties.floor)`: Changes the map to the location's floor. To understand floor management, check the [`setFloor()` documentation](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/MapsIndoors.html#setFloor). * `mapsIndoorsInstance.selectLocation(location)`: Selects and highlights this specific location on the map. For further information, refer to the [`selectLocation()` API documentation](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/MapsIndoors.html#selectLocation). * Appends the new list item to `searchResultsElement`. * Collects all `location.id`s into `locationIdsToHighlight`. * Makes the `searchResultsElement` visible by removing the `.hidden` class. * Calls `mapsIndoorsInstance.highlight(locationIdsToHighlight)` to highlight all found locations on the map simultaneously. The `highlight()` method accepts an array of location IDs. See its [API documentation](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/MapsIndoors.html#highlight) for details on batch highlighting. * **`.catch(error => { ... })`**: Handles potential errors during the search request, logging them to the console and displaying an error message in the list. * The `handleLocationClick` function is now used for both map clicks and search result clicks, ensuring consistent behavior and code reuse. * When a user clicks a search result or a POI on the map, the map will center on that location, switch to the correct floor, and select the location. * This pattern will be reused and expanded in later steps. ### Expected Outcome After implementing these changes: * A search panel will be visible in the top-left corner of your map. * Typing 3 or more characters into the search input will trigger a search. * Matching locations will appear as a clickable list below the search input. * All matching locations will be highlighted on the map. * Clicking a location in the list will: * Pan and zoom the map to that location. * Switch to the correct floor if necessary. * Select and distinctively highlight that specific location on the map. ### Troubleshooting * **Search not working / No results:** * Check the browser's developer console (F12) for errors. * Ensure your MapsIndoors API Key (`02c329e6777d431a88480a09` for demo) is correct and the MapsIndoors SDK is loaded. * Verify `YOUR_GOOGLE_MAPS_API_KEY` is correct. * Confirm the `venue` ID (`dfea941bb3694e728df92d3d` for demo) is valid and the venue has searchable locations. * Make sure the `onSearch` function is being called (e.g., add a `console.log` at the beginning of `onSearch`). * **Results list doesn't appear or looks wrong:** * Check CSS for the `.panel`, `#search-results`, and `li` elements. Ensure the `.hidden` class is being correctly added/removed. * **Map interactions (goTo, highlight, selectLocation) not working:** * Verify `mapsIndoorsInstance` is correctly initialized. * Ensure the `location` objects passed to these methods are valid objects conforming to the `Location` interface. * Check for console errors when clicking a search result. {% embed url="" %} ### Next Steps You've now successfully added a powerful search feature to your indoor map! Users can easily find their way to specific points of interest. Next, learn how to display detailed information about a selected location: * Step 3: [Show the Details](/sdks-and-frameworks/web/tutorial/using-google-maps/show-the-details) # Show the Details **Goal:** This guide demonstrates how to display detailed information about a location when a user selects it from the search results or clicks a POI on the map. The details will include the location's name and description, and the map will navigate to and highlight the selected location. **SDK Classes and Methods Introduced:** * Retrieving and displaying specific location properties (e.g., `location.properties.name`, `location.properties.description`) within a dedicated details panel. * Applying `mapsIndoorsInstance.deselectLocation()` to manage map state when closing the details view. **Implementation Patterns:** * Expanding the unified click handler to show location details * Implementing UI state management between search and details views * Creating a responsive details panel UI * Handling transitions between different UI states ### Prerequisites * Completion of [Step 2: Create a Search Experience](/sdks-and-frameworks/web/tutorial/using-google-maps/create-a-search-experience). * Your MapsIndoors API Key and Google Maps API Key should be correctly set up. We will continue using the demo API key `02c329e6777d431a88480a09` and venue ID `dfea941bb3694e728df92d3d` for this example. ### The Code This step involves modifications to `index.html` to add elements for displaying details, `style.css` to style these new elements, and `script.js` to handle the logic of fetching and displaying location details and interacting with the map. #### Unified Click Handler Pattern In Step 1, we introduced a reusable click handler (`handleLocationClick`) for POIs on the map. In Step 2, we reused this handler for search result clicks. In this step, we expand the handler to show a details panel with more information about the selected location, and manage the UI state. #### Update index.html Open your `index.html` file. We will add a new `div` within the existing `.panel` to hold the location details. This `div` will be hidden by default and shown when a location is selected. {% code lineNumbers="true" %} ```html MapsIndoors

``` {% endcode %} **Explanation of index.html updates:** * The existing search input and results list are wrapped in a `div` with `id="search-ui"` and class `flex-column`. This helps in managing the visibility of the entire search section. * A new `div` with `id="details-ui"` is added within the `.panel`. This container will hold the location's name, description, and a close button. * It has the class `hidden` to be invisible by default. * It also has `flex-column` for layout consistency. * Inside `#details-ui`: * `
`: For displaying the location name. * `
`: For displaying the location description. * ``: A button to close the details view and return to the search results. #### Update style.css Modify your `style.css` file to add styles for the new location details UI elements. {% code lineNumbers="true" %} ```css /* style.css */ /* Use flexbox for the main layout */ html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; /* Prevent scrollbars if map is full size */ display: flex; flex-direction: column; /* Stack children vertically if needed later */ } /* Style for the map container */ #map { /* Make map fill available space */ flex-grow: 1; width: 100%; /* Make map fill width */ margin: 0; padding: 0; } /* Style for the information panel container */ .panel { position: absolute; /* Position over the map */ top: 10px; /* Distance from the top */ left: 10px; /* Distance from the left */ z-index: 10; /* Ensure it's above the map and other elements */ background-color: white; /* White background for readability */ padding: 10px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Add a subtle shadow */ max-height: 80%; /* Limits max-height to prevent overflow with details */ overflow-y: auto; /* Add scroll if content exceeds max-height */ border: 1px solid #ccc; /* Add border for clarity */ width: 300px; } /* Class to apply flex display and column direction */ .flex-column { display: flex; flex-direction: column; gap: 10px; /* Space between elements */ } /* Class to hide elements */ .hidden { display: none; } /* Style for the search input field */ #search-input { padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; } /* Style for the search results list */ #search-results { list-style: none; /* Remove default list bullets */ padding: 0; margin: 0; } /* Style for individual search result items */ #search-results li { padding: 8px 0; cursor: pointer; /* Indicate clickable items */ border-bottom: 1px solid #eee; /* Separator line */ } /* Style for the last search result item (no bottom border) */ #search-results li:last-child { border-bottom: none; } /* Hover effect for search result items */ #search-results li:hover { background-color: #f0f0f0; /* Highlight on hover */ } /* --- New Styles for Location Details UI elements --- */ /* Styles for the new UI wrappers within #search-container */ #search-ui, #details-ui { width: 100%; /* Ensure they fill the container's width */ /* display: flex and flex-direction are controlled by .flex-column-container class via JS */ } /* Style for the location name in details */ #details-name { margin-top: 0; margin-bottom: 10px; font-size: 1.2rem; border-bottom: 1px solid #eee; padding-bottom: 5px; } /* Style for the location description in details */ #details-description { margin-bottom: 15px; font-size: 0.9rem; color: #555; } /* Style for general buttons within details */ .details-button { padding: 8px; border: none; border-radius: 4px; font-size: 0.9rem; cursor: pointer; margin-bottom: 8px; /* Space between buttons */ transition: background-color 0.3s ease; } .details-button:last-child { margin-bottom: 0; } /* Specific style for the Close button */ #details-close { background-color: #ccc; /* Grey */ color: #333; } #details-close:hover { background-color: #bbb; } ``` {% endcode %} **Explanation of style.css updates:** * `#search-ui`, `#details-ui`: Basic styling to ensure they take full width. The `flex-column` class will handle their internal layout. * `#details-name`: Styles for the location name heading (font size, margin, border). * `#details-description`: Styles for the description text (font size, color, `white-space: pre-wrap` to respect newlines from the data, `max-height` and `overflow-y` for scrollability). * `.details-button`: General styling for buttons in the details view (padding, border-radius, full width). * `#details-close`: Specific styling for the "Close" button (background color, text color, hover effect). #### Update script.js The `script.js` file will be updated to handle showing/hiding the details panel, populating it with location data, and interacting with the map. {% code lineNumbers="true" %} ```javascript // script.js // Define options for the MapsIndoors Google Maps view const mapViewOptions = { element: document.getElementById('map'), // Initial map center (MapsPeople - Austin Office example) center: { lng: -97.74204591828197, lat: 30.36022358949809 }, // Initial zoom level zoom: 17, // Maximum zoom level maxZoom: 22 }; // Set the MapsIndoors API key mapsindoors.MapsIndoors.setMapsIndoorsApiKey('YOUR_MAPSINDOORS_API_KEY'); // Replace with your MapsIndoors API key // Create a new instance of the MapsIndoors Google Maps view const mapViewInstance = new mapsindoors.mapView.GoogleMapsView(mapViewOptions); // Create a new MapsIndoors instance, passing the map view const mapsIndoorsInstance = new mapsindoors.MapsIndoors({ mapView: mapViewInstance, // Set the venue ID to load the map for a specific venue venue: 'YOUR_MAPSINDOORS_VENUE_ID', // Replace with your actual venue ID }); /** Floor Selector **/ // Create a new HTML div element to host the floor selector const floorSelectorElement = document.createElement('div'); // Create a new FloorSelector instance, linking it to the HTML element and the main MapsIndoors instance. new mapsindoors.FloorSelector(floorSelectorElement, mapsIndoorsInstance); // Get the underlying Google Maps instance const googleMapInstance = mapViewInstance.getMap(); // Add the floor selector HTML element to the Google Maps controls. googleMapInstance.controls[google.maps.ControlPosition.TOP_RIGHT].push(floorSelectorElement); /** Handle Location Clicks **/ // Function to handle clicks on MapsIndoors locations function handleLocationClick(location) { if (location && location.id) { // Move the map to the selected location mapsIndoorsInstance.goTo(location); // Ensure that the map shows the correct floor mapsIndoorsInstance.setFloor(location.properties.floor); // Select the location on the map mapsIndoorsInstance.selectLocation(location); // Show the details UI for the clicked location showDetails(location); } } // Add an event listener to the MapsIndoors instance for click events on locations mapsIndoorsInstance.on('click', handleLocationClick); /** Search Functionality **/ // Get references to the search input and results list elements const searchInputElement = document.getElementById('search-input'); const searchResultsElement = document.getElementById('search-results'); // Initially hide the search results list searchResultsElement.classList.add('hidden'); // Add an event listener to the search input for 'input' events // This calls the onSearch function every time the user types in the input field searchInputElement.addEventListener('input', onSearch); // Function to perform the search and update the results list and map highlighting function onSearch() { // Get the current value from the search input const query = searchInputElement.value; // Get the current venue from the MapsIndoors instance const currentVenue = mapsIndoorsInstance.getVenue(); // Clear map highlighting mapsIndoorsInstance.highlight(); // Deselect any selected location mapsIndoorsInstance.deselectLocation(); // Check if the query is too short (less than 3 characters) or empty if (query.length < 3) { // Hide the results list if the query is too short or empty searchResultsElement.classList.add('hidden'); return; // Stop here } // Define search parameters with the current input value // Include the current venue name in the search parameters const searchParameters = { q: query, venue: currentVenue ? currentVenue.name : undefined }; // Call the MapsIndoors LocationsService to get locations based on the search query mapsindoors.services.LocationsService.getLocations(searchParameters).then(locations => { // Clear previous search results searchResultsElement.innerHTML = null; // If no locations are found, display a "No results found" message if (locations.length === 0) { const noResultsItem = document.createElement('li'); noResultsItem.textContent = 'No results found'; searchResultsElement.appendChild(noResultsItem); // Ensure the results list is visible to show the "No results found" message searchResultsElement.classList.remove('hidden'); return; // Stop here if no results } // Append new search results to the list locations.forEach(location => { const listElement = document.createElement('li'); // Display the location name listElement.innerHTML = location.properties.name; // Store the location ID on the list item for easy access listElement.dataset.locationId = location.id; // Add a click event listener to each list item listElement.addEventListener('click', function () { // Call the handleLocationClick function when a location in the search results is clicked. handleLocationClick(location); }); searchResultsElement.appendChild(listElement); }); // Show the results list now that it has content searchResultsElement.classList.remove('hidden'); // Filter map to only display search results by highlighting them mapsIndoorsInstance.highlight(locations.map(location => location.id)); }) .catch(error => { console.error("Error fetching locations:", error); const errorItem = document.createElement('li'); errorItem.textContent = 'Error performing search.'; searchResultsElement.appendChild(errorItem); searchResultsElement.classList.remove('hidden'); }); } /** UI state management **/ const searchUIElement = document.getElementById('search-ui'); const detailsUIElement = document.getElementById('details-ui'); function showSearchUI() { hideDetailsUI(); searchUIElement.classList.remove('hidden'); searchInputElement.focus(); } function showDetailsUI() { hideSearchUI(); detailsUIElement.classList.remove('hidden'); } function hideSearchUI() { searchUIElement.classList.add('hidden'); } function hideDetailsUI() { detailsUIElement.classList.add('hidden'); } /** Location Details **/ // Get references to the static details view elements const detailsNameElement = document.getElementById('details-name'); const detailsDescriptionElement = document.getElementById('details-description'); const detailsCloseButton = document.getElementById('details-close'); detailsCloseButton.addEventListener('click', () => { mapsIndoorsInstance.deselectLocation(); // Deselect any selected location showSearchUI(); }); // Show the details of a location function showDetails(location) { detailsNameElement.textContent = location.properties.name; detailsDescriptionElement.textContent = location.properties.description || 'No description available.'; showDetailsUI(); } // Initial call to set up the search UI when the page loads showSearchUI(); ``` {% endcode %} **Explanation of script.js updates:** * **Unified Click Handler Implementation**: * Building upon our approach in previous steps, we've implemented a comprehensive click handler system. * The `handleLocationClick` function manages map interactions (selecting a location, zooming, and changing floors). * This function then calls the `showDetails` function to update the UI presentation. * This separation of concerns makes the code more maintainable and easier to understand. * **UI State Management Functions**: * `showSearchUI()`: Shows the search interface and hides the details panel. * `showDetailsUI()`: Shows the details interface and hides the search panel. * `hideSearchUI()` and `hideDetailsUI()`: Helper functions to manage UI visibility. * `showDetails(location)`: Updates the details UI with the location's name and description. * The close button in the details panel has an event listener that returns to the search UI. * **Map Interaction Methods**: * `mapsIndoorsInstance.goTo(location)`: Pans and zooms the map to the selected location. * `mapsIndoorsInstance.setFloor(location.properties.floor)`: Switches to the floor where the location exists. * `mapsIndoorsInstance.selectLocation(location)`: Visually highlights the selected location on the map. * **Location Properties Access**: * We access `location.properties.name` and `location.properties.description` to display detailed information. * The fallback text "No description available" is shown when description is missing. * **Search Result Click Handler**: * Search result clicks now trigger the same handler as map POI clicks, providing a consistent experience. * This unified approach ensures the same behavior whether a user interacts with the map or search results. * The separation between `handleLocationClick` (for map operations) and `showDetails` (for UI updates) creates a cleaner architecture that's easier to maintain and extend. * **Initial Setup**: * `showSearchUI()` is called at the end to ensure the application starts with the search interface visible. ### Expected Outcome After implementing these changes: * When you search for locations and click on a result in the list: * The search input and results list will be hidden. * A details panel will appear showing the selected location's name and description. * The map will pan and zoom to the selected location. * The selected location will be highlighted on the map. * The map will switch to the correct floor of the selected location. * Clicking the "Close" button in the details panel will hide the details and show the search input and results list again. * When you click a POI on the map: * The details panel will appear showing the location's name and description. * The map will pan and zoom to the selected location. * The selected location will be highlighted on the map. * The map will switch to the correct floor of the selected location. ### Troubleshooting * **Details panel doesn't show or shows incorrect data:** * Check browser console for errors. * Verify IDs in `index.html` match those used in `script.js` for `getElementById`. * Ensure `location.properties.name` and `location.properties.description` exist for the selected location or that default text is handled. * Confirm CSS for `.hidden`, `#search-ui`, and `#details-ui` is correctly applied and toggled. * **Map doesn't navigate or select location:** * Ensure `mapsIndoorsInstance` is correctly initialized. * Verify the `location` object passed to `handleLocationClick` is a valid object conforming to the `Location` interface. * Check for console errors when `selectLocation`, `goTo`, or `setFloor` are called. * **"Close" button doesn't work:** * Ensure the event listener is correctly attached to `detailsCloseButton` and that `showSearchUI` is called. {% embed url="" %} ### Next Steps You've now enhanced your application to display detailed information about locations. Users can not only find locations but also learn more about them. Next, you'll learn how to get and display directions between locations: * Step 4: [Getting Directions](/sdks-and-frameworks/web/tutorial/using-google-maps/getting-directions) # Getting Directions **Goal:** This guide will show you how to add directions functionality to your application. Users will be able to select an origin and destination, get a route between them, and step through the directions on the map. This step builds on the search and details UI from Step 3, introducing a new directions panel and integrating the MapsIndoors DirectionsService and DirectionsRenderer. **SDK Concepts Introduced:** * Using the [DirectionsService](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.services.DirectionsService.html) to calculate routes between locations. * Using the [DirectionsRenderer](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.directions.DirectionsRenderer.html) to display and step through routes on the map. * Using `directionsRenderer.setRoute()` to display a calculated route on the map. * Using `directionsRenderer.setStepIndex()` to navigate to a specific step in the route. * Using `directionsRenderer.nextStep()` and `directionsRenderer.previousStep()` for step navigation. * Using `directionsRenderer.getLegIndex()` and `directionsRenderer.getStepIndex()` to track current position. ### Prerequisites * Completion of [Step 3: Show the Details](/sdks-and-frameworks/web/tutorial/using-google-maps/show-the-details). Your app should already support searching for locations and viewing details. * Your MapsIndoors API Key and Google Maps API Key should be correctly set up. We will continue using the demo API key `02c329e6777d431a88480a09` and venue ID `dfea941bb36964e728df92d3d` for this example. ### Update index.html Open your `index.html` file. Add a new directions panel inside the existing `.panel` container: {% code lineNumbers="true" %} ```html MapsIndoors

Directions

``` {% endcode %} #### Explanation of index.html updates * The `#details-ui` panel now includes a "Get Directions" button, allowing users to open the directions panel for the selected location. * The `#directions-ui` panel is added to the `.panel` container. This new panel contains: * Input fields for origin and destination. * A button to get directions. * Step navigation controls (step indicator, previous/next buttons). * A close button for the directions panel. * All panels (`#search-ui`, `#details-ui`, `#directions-ui`) use consistent class and ID naming, and only one is visible at a time, managed by the show/hide functions in the JavaScript. ### Update style.css Add styles for the new directions UI elements: {% code lineNumbers="true" %} ```css /* style.css */ /* Use flexbox for the main layout */ html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; /* Prevent scrollbars if map is full size */ display: flex; flex-direction: column; /* Stack children vertically if needed later */ } /* Style for the map container */ #map { /* Make map fill available space */ flex-grow: 1; width: 100%; /* Make map fill width */ margin: 0; padding: 0; } /* Style for the information panel container */ .panel { position: absolute; /* Position over the map */ top: 10px; /* Distance from the top */ left: 10px; /* Distance from the left */ z-index: 10; /* Ensure it's above the map and other elements */ background-color: white; /* White background for readability */ padding: 10px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Add a subtle shadow */ max-height: 80%; /* Limits max-height to prevent overflow with details */ overflow-y: auto; /* Add scroll if content exceeds max-height */ border: 1px solid #ccc; /* Add border for clarity */ width: 300px; } /* Class to apply flex display and column direction */ .flex-column { display: flex; flex-direction: column; gap: 10px; /* Space between elements */ } /* Class to hide elements */ .hidden { display: none; } /* Style for the search input field */ #search-input { padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; } /* Style for the search results list */ #search-results { list-style: none; /* Remove default list bullets */ padding: 0; margin: 0; } /* Style for individual search result items */ #search-results li { padding: 8px 0; cursor: pointer; /* Indicate clickable items */ border-bottom: 1px solid #eee; /* Separator line */ } /* Style for the last search result item (no bottom border) */ #search-results li:last-child { border-bottom: none; } /* Hover effect for search result items */ #search-results li:hover { background-color: #f0f0f0; /* Highlight on hover */ } /* --- New Styles for Location Details UI elements --- */ /* Styles for the new UI wrappers within #search-container */ #search-ui, #details-ui { width: 100%; /* Ensure they fill the container's width */ /* display: flex and flex-direction are controlled by .flex-column-container class via JS */ } /* Style for the location name in details */ #details-name { margin-top: 0; margin-bottom: 10px; font-size: 1.2rem; border-bottom: 1px solid #eee; padding-bottom: 5px; } /* Style for the location description in details */ #details-description { margin-bottom: 15px; font-size: 0.9rem; color: #555; } /* Style for general buttons within details */ .details-button { padding: 8px; border: none; border-radius: 4px; font-size: 0.9rem; cursor: pointer; transition: background-color 0.3s ease; } /* Specific style for the Close button */ #details-close { background-color: #ccc; /* Grey */ color: #333; } #details-close:hover { background-color: #bbb; } /* Directions panel specific */ #directions-ui { width: 100%; } .directions-inputs { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; } .directions-results-list { list-style: none; padding: 0; margin: 0; max-height: 120px; overflow-y: auto; } .directions-results-list li { padding: 8px 0; cursor: pointer; border-bottom: 1px solid #eee; } .directions-results-list li:last-child { border-bottom: none; } .directions-results-list li:hover { background-color: #f0f0f0; } .directions-step-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } #step-indicator { grid-column: span 2; } ``` {% endcode %} #### Explanation of style.css updates * Styles for the new `#directions-ui` panel and its child elements are added: * `.directions-inputs` styles the input fields and results list for selecting origin and destination. * `.directions-results-list` styles the list of search results for the origin input. * `.directions-step-nav` and `#step-indicator` style the step navigation controls. ### Update script.js Add the following logic for directions and UI state management. {% code lineNumbers="true" %} ```javascript // script.js // Define options for the MapsIndoors Google Maps view const mapViewOptions = { element: document.getElementById('map'), // Initial map center (MapsPeople - Austin Office example) center: { lng: -97.74204591828197, lat: 30.36022358949809 }, // Initial zoom level zoom: 17, // Maximum zoom level maxZoom: 22 }; // Set the MapsIndoors API key mapsindoors.MapsIndoors.setMapsIndoorsApiKey('YOUR_MAPSINDOORS_API_KEY'); // Replace with your MapsIndoors API key // Create a new instance of the MapsIndoors Google Maps view const mapViewInstance = new mapsindoors.mapView.GoogleMapsView(mapViewOptions); // Create a new MapsIndoors instance, passing the map view const mapsIndoorsInstance = new mapsindoors.MapsIndoors({ mapView: mapViewInstance, // Set the venue ID to load the map for a specific venue venue: 'YOUR_MAPSINDOORS_VENUE_ID', // Replace with your actual venue ID }); /** Floor Selector **/ // Create a new HTML div element to host the floor selector const floorSelectorElement = document.createElement('div'); // Create a new FloorSelector instance, linking it to the HTML element and the main MapsIndoors instance. new mapsindoors.FloorSelector(floorSelectorElement, mapsIndoorsInstance); // Get the underlying Google Maps instance const googleMapInstance = mapViewInstance.getMap(); // Add the floor selector HTML element to the Google Maps controls. googleMapInstance.controls[google.maps.ControlPosition.TOP_RIGHT].push(floorSelectorElement); /** Handle Location Clicks **/ // Function to handle clicks on MapsIndoors locations function handleLocationClick(location) { if (location && location.id) { // Move the map to the selected location mapsIndoorsInstance.goTo(location); // Ensure that the map shows the correct floor mapsIndoorsInstance.setFloor(location.properties.floor); // Select the location on the map mapsIndoorsInstance.selectLocation(location); // Show the details UI for the clicked location showDetails(location); } } // Add an event listener to the MapsIndoors instance for click events on locations mapsIndoorsInstance.on('click', handleLocationClick); /** Search Functionality **/ // Get references to the search input and results list elements const searchInputElement = document.getElementById('search-input'); const searchResultsElement = document.getElementById('search-results'); // Initially hide the search results list searchResultsElement.classList.add('hidden'); // Add an event listener to the search input for 'input' events // This calls the onSearch function every time the user types in the input field searchInputElement.addEventListener('input', onSearch); // Function to perform the search and update the results list and map highlighting function onSearch() { // Get the current value from the search input const query = searchInputElement.value; // Get the current venue from the MapsIndoors instance const currentVenue = mapsIndoorsInstance.getVenue(); // Clear map highlighting mapsIndoorsInstance.highlight(); // Deselect any selected location mapsIndoorsInstance.deselectLocation(); // Check if the query is too short (less than 3 characters) or empty if (query.length < 3) { // Hide the results list if the query is too short or empty searchResultsElement.classList.add('hidden'); return; // Stop here } // Define search parameters with the current input value // Include the current venue name in the search parameters const searchParameters = { q: query, venue: currentVenue ? currentVenue.name : undefined }; // Call the MapsIndoors LocationsService to get locations based on the search query mapsindoors.services.LocationsService.getLocations(searchParameters).then(locations => { // Clear previous search results searchResultsElement.innerHTML = null; // If no locations are found, display a "No results found" message if (locations.length === 0) { const noResultsItem = document.createElement('li'); noResultsItem.textContent = 'No results found'; searchResultsElement.appendChild(noResultsItem); // Ensure the results list is visible to show the "No results found" message searchResultsElement.classList.remove('hidden'); return; // Stop here if no results } // Append new search results to the list locations.forEach(location => { const listElement = document.createElement('li'); // Display the location name listElement.innerHTML = location.properties.name; // Store the location ID on the list item for easy access listElement.dataset.locationId = location.id; // Add a click event listener to each list item listElement.addEventListener('click', function () { // Call the handleLocationClick function when a location in the search results is clicked. handleLocationClick(location); }); searchResultsElement.appendChild(listElement); }); // Show the results list now that it has content searchResultsElement.classList.remove('hidden'); // Filter map to only display search results by highlighting them mapsIndoorsInstance.highlight(locations.map(location => location.id)); }) .catch(error => { console.error("Error fetching locations:", error); const errorItem = document.createElement('li'); errorItem.textContent = 'Error performing search.'; searchResultsElement.appendChild(errorItem); searchResultsElement.classList.remove('hidden'); }); } /** UI state management **/ const searchUIElement = document.getElementById('search-ui'); const detailsUIElement = document.getElementById('details-ui'); const directionsUIElement = document.getElementById('directions-ui'); function showSearchUI() { hideDetailsUI(); hideDirectionsUI(); // Ensure directions UI is hidden searchUIElement.classList.remove('hidden'); searchInputElement.focus(); } function showDetailsUI() { hideSearchUI(); hideDirectionsUI(); // Ensure directions UI is hidden detailsUIElement.classList.remove('hidden'); } function hideSearchUI() { searchUIElement.classList.add('hidden'); } function hideDetailsUI() { detailsUIElement.classList.add('hidden'); } function showDirectionsUI() { hideSearchUI(); hideDetailsUI(); directionsUIElement.classList.remove('hidden'); } function hideDirectionsUI() { directionsUIElement.classList.add('hidden'); } /** Location Details **/ // Get references to the static details view elements const detailsNameElement = document.getElementById('details-name'); const detailsDescriptionElement = document.getElementById('details-description'); const detailsCloseButton = document.getElementById('details-close'); detailsCloseButton.addEventListener('click', () => { mapsIndoorsInstance.deselectLocation(); // Deselect any selected location showSearchUI(); }); // Variable to store the location currently shown in details let currentDetailsLocation = null; // Show the details of a location function showDetails(location) { // Keep track of the currently selected location currentDetailsLocation = location; detailsNameElement.textContent = location.properties.name; detailsDescriptionElement.textContent = location.properties.description || 'No description available.'; showDetailsUI(); } // Initial call to set up the search UI when the page loads showSearchUI(); /** Directions Functionality **/ // Handles origin/destination selection, route calculation, and step navigation const originInputElement = document.getElementById('origin-input'); const originResultsElement = document.getElementById('origin-results'); const destinationInputElement = document.getElementById('destination-input'); const getDirectionsButton = document.getElementById('get-directions'); const prevStepButton = document.getElementById('prev-step'); const nextStepButton = document.getElementById('next-step'); const stepIndicator = document.getElementById('step-indicator'); const directionsCloseButton = document.getElementById('directions-close'); let selectedOrigin = null; let selectedDestination = null; let currentRoute = null; let directionsRenderer = null; // Reference the details-directions button defined in the HTML const detailsDirectionsButton = document.getElementById('details-directions'); detailsDirectionsButton.addEventListener('click', () => { showDirectionsPanel(currentDetailsLocation); }); detailsCloseButton.addEventListener('click', showSearchUI); directionsCloseButton.addEventListener('click', () => { hideDirectionsUI(); showDetailsUI(); if (directionsRenderer) directionsRenderer.setVisible(false); }); // Show the directions panel and reset state for a new route function showDirectionsPanel(destinationLocation) { selectedOrigin = null; selectedDestination = destinationLocation; currentRoute = null; destinationInputElement.value = destinationLocation.properties.name; originInputElement.value = ''; originResultsElement.innerHTML = ''; hideSearchUI(); hideDetailsUI(); showDirectionsUI(); stepIndicator.textContent = ''; } // Search for origin locations as the user types originInputElement.addEventListener('input', onOriginSearch); function onOriginSearch() { const query = originInputElement.value; const currentVenue = mapsIndoorsInstance.getVenue(); originResultsElement.innerHTML = ''; if (query.length < 3) return; const searchParameters = { q: query, venue: currentVenue ? currentVenue.name : undefined }; mapsindoors.services.LocationsService.getLocations(searchParameters).then(locations => { if (locations.length === 0) { const noResultsItem = document.createElement('li'); noResultsItem.textContent = 'No results found'; originResultsElement.appendChild(noResultsItem); return; } locations.forEach(location => { const listElement = document.createElement('li'); listElement.textContent = location.properties.name; listElement.addEventListener('click', () => { selectedOrigin = location; originInputElement.value = location.properties.name; originResultsElement.innerHTML = ''; }); originResultsElement.appendChild(listElement); }); }); } // Calculate and display the route when both origin and destination are selected getDirectionsButton.addEventListener('click', async () => { if (!selectedOrigin || !selectedDestination) { // Optionally, show an alert or update stepIndicator instead stepIndicator.textContent = 'Please select both origin and destination.'; return; } // Use anchor property for LatLngLiteral (anchor is always a point) const origin = { lat: selectedOrigin.properties.anchor.coordinates[1], lng: selectedOrigin.properties.anchor.coordinates[0], floor: selectedOrigin.properties.floor }; const destination = { lat: selectedDestination.properties.anchor.coordinates[1], lng: selectedDestination.properties.anchor.coordinates[0], floor: selectedDestination.properties.floor }; const directionsService = new mapsindoors.services.DirectionsService(); const route = await directionsService.getRoute({ origin, destination }); currentRoute = route; if (directionsRenderer) { directionsRenderer.setVisible(false); } directionsRenderer = new mapsindoors.directions.DirectionsRenderer({ mapsIndoors: mapsIndoorsInstance, fitBounds: true, strokeColor: '#4285f4', strokeWeight: 5 }); await directionsRenderer.setRoute(route); directionsRenderer.setStepIndex(0, 0); showCurrentStep(); }); // Update the step indicator and enable/disable navigation buttons function showCurrentStep() { if (currentRoute?.legs?.length < 1) return; const currentLegIndex = directionsRenderer.getLegIndex(); const currentStepIndex = directionsRenderer.getStepIndex(); const legs = currentRoute.legs; const steps = legs[currentLegIndex].steps; if (steps.length === 0) { stepIndicator.textContent = ''; return; } stepIndicator.textContent = `Leg ${currentLegIndex + 1} of ${legs.length}, Step ${currentStepIndex + 1} of ${steps.length}`; prevStepButton.disabled = currentLegIndex === 0 && currentStepIndex === 0; nextStepButton.disabled = currentLegIndex === legs.length - 1 && currentStepIndex === steps.length - 1; } // Step navigation event listeners prevStepButton.addEventListener('click', () => { if (!directionsRenderer) { return; } directionsRenderer.previousStep(); showCurrentStep(); }); nextStepButton.addEventListener('click', () => { if (!directionsRenderer) { return; } directionsRenderer.nextStep(); showCurrentStep(); }); ``` {% endcode %} **Explanation of script.js updates:** * **UI State Management:** * New constants like `directionsUIElement` are added to reference the new directions panel in the DOM. * The existing UI state management functions (`showSearchUI()`, `showDetailsUI()`) are updated to explicitly hide the `directionsUIElement`. * New functions `showDirectionsUI()` and `hideDirectionsUI()` are introduced to manage the visibility of the directions panel, ensuring it's mutually exclusive with the search and details panels. * The "Get Directions" button (`detailsDirectionsButton`) in the details panel now has an event listener that calls `showDirectionsPanel()`, passing the `currentDetailsLocation` to pre-fill the destination. * The `directionsCloseButton` listener is added to hide the directions UI, show the details UI, and make the `directionsRenderer` invisible when directions are closed, providing a clear exit path. * **Location Click Handling:** * The script maintains the unified click handler pattern established in previous steps. The `handleLocationClick` function continues to serve as the central entry point for user interactions with locations, responding to both map POI clicks and search result clicks. * This consistent pattern ensures that when a user clicks on a location (either on the map or in search results), the following actions always occur: * The map pans to the selected location using `mapsIndoorsInstance.goTo(location)` * The floor is set to the location's floor with `mapsIndoorsInstance.setFloor(location.properties.floor)` * The location is visually selected on the map using `mapsIndoorsInstance.selectLocation(location)` * The location details panel is shown via `showDetails(location)` * This unified approach ensures a consistent user experience regardless of how locations are selected. * **Directions Panel and Origin/Destination Selection:** * New DOM element references are established for directions-related UI elements: `originInputElement`, `originResultsElement`, `destinationInputElement`, `getDirectionsButton`, `prevStepButton`, `nextStepButton`, `stepIndicator`, and `directionsCloseButton`. * State variables `selectedOrigin`, `selectedDestination`, `currentRoute`, and `directionsRenderer` are declared to manage the directions workflow state. * The `showDirectionsPanel(destinationLocation)` function resets the directions state, pre-fills the destination input with the selected location's name, and shows the directions UI. * An origin search is implemented with an `input` event listener on `originInputElement`, which calls the `onOriginSearch()` function. This function uses `mapsindoors.services.LocationsService.getLocations()` to search for origin locations, similar to the main search functionality. * **Route Calculation:** * When the user clicks the "Show Route" button (`getDirectionsButton`), the script checks if both `selectedOrigin` and `selectedDestination` are set. * It extracts coordinates and floor information from the location objects' `properties.anchor` and `properties.floor`. * A new instance of `mapsindoors.services.DirectionsService()` is created. * The `getRoute()` method is called with origin and destination parameters to calculate the route. * The route is stored in the `currentRoute` variable for later reference. * **Route Display and Step Navigation:** * Any existing `directionsRenderer` is hidden before creating a new one. * A new `mapsindoors.directions.DirectionsRenderer` is instantiated with the `mapsIndoorsInstance`, `fitBounds: true` for automatic map adjustment, and styling options. * The renderer is configured with the calculated route via `directionsRenderer.setRoute(route)`. * The renderer is set to display the first step of the first leg with `directionsRenderer.setStepIndex(0, 0)`. * The `showCurrentStep()` function updates the step indicator text and enables/disables the navigation buttons based on the current position in the route. * Event listeners for the navigation buttons call `directionsRenderer.previousStep()` and `directionsRenderer.nextStep()` respectively, followed by `showCurrentStep()` to update the UI. * **Workflow Integration:** * The script carefully integrates the directions functionality with the existing search and details features. * The details panel now includes a "Get Directions" button that transitions to the directions workflow. * The directions panel allows users to return to the details view via the close button. * All three UI states (search, details, directions) are mutually exclusive, providing a clear and focused user interface. These updates allow users to search for a location, view its details, and get step-by-step directions between two locations within your venue, all within a clear and interactive UI. ### Expected Outcome * Users can search for a location, view its details, and click "Get Directions" to open the directions panel. * When the directions panel opens from the details view, the destination input is pre-filled with the selected location's name and is disabled. * The user can type in the origin input to search for and select an origin location. * After both origin and destination are selected, clicking "Show Route" calculates and displays the route on the map. * The map updates to show the full route, and the step navigation controls become active. * Users can use the "Previous" and "Next" buttons to step through the route, with the map highlighting the current step and the `step-indicator` updating accordingly. * Only one panel (search, details, or directions) is visible at a time. * Clicking the "Close Directions" button returns to the details panel and hides the route from the map. ### Troubleshooting * If the route is not shown after clicking "Show Route", ensure both origin and destination are selected and that the locations have valid anchor coordinates. * If the map does not update, check for errors in the browser console and verify your API keys and venue ID. * If the UI panels do not switch as expected, ensure the show/hide functions are called correctly and that the correct classes are applied. {% embed url="" %} # Getting Started: MapsIndoors 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[](https://docs.mapsindoors.com/getting-started/web/new-project#set-up-your-environment) 1. If you do not have prior development experience, you can install an Integrated Development Environment (IDE), e.g. [Visual Studio Code](https://code.visualstudio.com/). 2. 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. 3. Inside that, create two empty files: `index.html` and `main.js`. > The file `index.html` is the entry point for our application and contains the HTML code. The file `main.js` will be read by `index.html` and consists of the JavaScript code for the actual application to run. To try the app you will be creating, run `index.html` in your web browser. 4. Open `index.html`. Create a basic HTML structure and include the `main.js` file as follows: ```html MapsIndoors ``` 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[](https://docs.mapsindoors.com/getting-started/web/map#show-a-map-with-mapsindoors) {% tabs %} {% tab title="Google Maps - Manually" %} 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 ``, followed by the Google Maps script tag: ```html MapsIndoors ``` 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 `
` 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.GoogleMapsView.html#GoogleMapsView) 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 = { 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`](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.mapView.GoogleMapsView.html) with some [`mapViewOptions`](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.mapView.GoogleMapsView.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 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 `googleMapsInstance` to position it as a map controller: ```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); ``` You should now be able to switch between floors. Here's a JSFiddle demonstrating the result you should have by now: {% embed url="" %} {% endtab %} {% tab title="Google Maps - 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 `gm-api-key` and `mi-api-key` attributes with your API keys 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 Google Maps *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 Google Maps *instance* and call its [`setCenter` method](https://developers.google.com/maps/documentation/javascript/reference/map#Map.setCenter) to center the map on the loaded data: ```javascript // 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 `` component, see [components.mapsindoors.com/map-googlemaps](https://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**[****](https://docs.mapsindoors.com/getting-started/web/map#show-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-googlemaps/) to your existing element. In this case with the value `"TOP_RIGHT"`: ```html MapsIndoors ``` You should now be able to switch between floors. Here's a JSFiddle demonstrating the result you should have by now: {% embed url="" %} {% endtab %} {% tab title="Mapbox - Manually" %} 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 ``, followed by the Mapbox `script` and `style` tag: ```html MapsIndoors ``` > Remember to add your API keys to the links in your code. You can use the demo MapsIndoors API key: `d876ff0e60bb430b8fabb145`. Add an empty `
` 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.MapboxView.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 }; 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`](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.mapView.MapboxView.html) with some [`mapViewOptions`](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.mapView.MapboxView.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 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 }; 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 () { } }); ``` {% 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. Here's a JSFiddle demonstrating the result you should have by now: {% endtab %} {% tab title="Mapbox v3 - Manually" %} 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 ``, followed by the Mapbox `script` and `style` tag: ```html MapsIndoors ``` > Remember to add your API keys to the links in your code. You can use the demo MapsIndoors API key: `d876ff0e60bb430b8fabb145`. Add an empty `
` 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#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="" %} {% endtab %} {% endtabs %} ## 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. {% tabs %} {% tab title="Google Maps - Manually" %} **Create a Simple Query Search** MapsIndoors Locations can be retrieved in the MapsIndoors namespace using the [`LocationsService.getLocations()` method](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.services.LocationsService.html#.getLocations) but first you need to add a `` and ` ``` * Create the `onSearch` method. * Get a reference to the search `` element. * Define a new object with the search parameter `q` and the value of `searchInputElement`. * Call the `getLocations` method and log out the results to the console. ```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'); const searchParameters = { q: searchInputElement.value }; mapsindoors.services.LocationsService.getLocations(searchParameters).then(locations => { console.log(locations); }); }); } ``` See all available search parameters in the [reference documentation](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.services.LocationsService.html#.getLocations). **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 `
` list element below the search field in `` with the `id` attribute set to "search-results". ```html MapsIndoors

``` * 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="" %} {% endtab %} {% tab title="Google Maps - MI Components" %} **Create a Simple Query Search** Using the `` component you get a ``element tied tightly together with the [Location Service](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/LocationsService.html). * Insert the `` 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="" fullWidth="false" %} {% endtab %} {% tab title="Mapbox - Manually" %} **Create a Simple Query Search** MapsIndoors Locations can be retrieved in the MapsIndoors namespace using the [`LocationsService.getLocations()` method](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.services.LocationsService.html#.getLocations) but first you need to add an `` and ` ``` * Create the `onSearch` method. * Get a reference to the search `` element. * Define a new object with the search parameter `q` and the value of `searchInputElement`. * Call the `getLocations` method and log out the results to the console. ```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 }); // 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 searchParameters = { q: searchInputElement.value }; mapsindoors.services.LocationsService.getLocations(searchParameters).then(locations => { console.log(locations); }); } ``` See all available search parameters in the [reference documentation](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.services.LocationsService.html#.getLocations). **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. * Add the `
` list element below the search field in `` with the `id` attribute set to "search-results". ```html MapsIndoors

``` * 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: {% embed url="" %} {% endtab %} {% tab title="Mapbox - MI Components" %} **Create a Simple Query Search** Using the `` component you get an ``element tied tightly together with the [Location Service](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/LocationsService.html). * Insert the `` 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="" %} {% endtab %} {% endtabs %} ## Step 4. Getting Directions In this step you'll create directions between two points and change the transportation mode. ### Step 4a. Get Directions Between Two Locations[](https://docs.mapsindoors.com/getting-started/web/directions#get-directions-between-two-locations) To get directions between two MapsIndoors Locations, or places outside of your MapsIndoors solution, we need two things: 1. The Directions Service instance 2. The Directions Render instance We need the Directions Service to calculate the fastest route between two points, and use the Directions Render to actually draw the route on the map. {% tabs %} {% tab title="Google Maps - 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 Google Maps). Then, we need to initialize the [MapsIndoors Directions Render](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.directions.DirectionsRenderer.html) with the MapsIndoors instance: ```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'); // 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 app is ready to provide directions. Next up is how to give it an Origin and Destination *-* and draw a route between those. **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' [DirectionsRenderer](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 = { 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'); // 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. You will now have something like this: ```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'); // 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 any item in the search results list to get directions from the hardcoded origin to that destination. **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 `` 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: {% endtab %} {% tab title="Google Maps - MI Components" %} **Get Directions Service and Render instances** First, add two new `let` statements all the way at the top, after the `miMapElement` constant for storing our Directions Service and Directions Renderer instances. Then, we populate them with the instances within the `mapsIndoorsReady` event: ```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; 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); }); ``` > 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 app is ready to provide directions. Next up is how to give it an Origin and Destination - and draw a route between those. **Draw a Route on the Map**[****](https://docs.mapsindoors.com/getting-started/web/directions#draw-a-route-on-the-map) Now our app is ready to provide directions. Next up is how to give it an Origin and Destination *-* and draw a route between those. **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' [DirectionsRenderer](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 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; 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: '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 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: '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 any item in the search results list to get directions from the hardcoded origin to that destination. **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 ` ``` 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 `` element with all four transportation options above the search field: ```html MapsIndoors
Choose a travel mode:
``` 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 `` element with all four transportation options above the search field: ```html MapsIndoors Choose a travel mode: ``` 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 `

Directions

Directions