diff --git a/sdks-and-frameworks/web/tutorial/1-set-up-your-environment.md b/sdks-and-frameworks/web/tutorial/1-set-up-your-environment.md new file mode 100644 index 00000000..c5013f58 --- /dev/null +++ b/sdks-and-frameworks/web/tutorial/1-set-up-your-environment.md @@ -0,0 +1,34 @@ +--- +description: Step 1. Set Up Your Environment +--- + +# Step 1. 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 `script.js`. + + > The file `index.html` is the entry point for our application and contains the HTML code. The file `script.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 `script.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. diff --git a/sdks-and-frameworks/web/tutorial/tutorial.md b/sdks-and-frameworks/web/tutorial/tutorial.md index b00d3e4f..72f7b61e 100644 --- a/sdks-and-frameworks/web/tutorial/tutorial.md +++ b/sdks-and-frameworks/web/tutorial/tutorial.md @@ -6,32 +6,31 @@ Throughout the Getting Started guide, you will modify and extend the same code t 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`. +3. Inside that, create two empty files: `index.html` and `script.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: + > The file `index.html` is the entry point for our application and contains the HTML code. The file `script.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 `script.js` file as follows: ```html - + - - - - MapsIndoors + + + 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) @@ -44,58 +43,64 @@ Insert the MapsIndoors SDK script tag into ``, followed by the Google Maps ```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: +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 `script.js` file you created earlier: + +In the `script.js` code below, replace `YOUR_MAPSINDOORS_API_KEY` with your actual MapsIndoors API key. For testing, you can use the demo API key: `02c329e6777d431a88480a09`. ```javascript -// main.js +// script.js const mapViewOptions = { element: document.getElementById('map'), - center: { lat: 38.8974905, lng: -77.0362723 }, // The White House + center: { lat: 30.359285384, lng: -97.7412840716576 }, // MapsPeople - Austin Office zoom: 17, maxZoom: 22, }; + +//Set the MapsIndoors API key +mapsindoors.MapsIndoors.setMapsIndoorsApiKey('YOUR_MAPSINDOORS_API_KEY'); + const mapViewInstance = new mapsindoors.mapView.GoogleMapsView(mapViewOptions); const mapsIndoorsInstance = new mapsindoors.MapsIndoors({ mapView: mapViewInstance @@ -112,15 +117,21 @@ 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: +In the `script.js` code below, replace `YOUR_MAPSINDOORS_API_KEY` with your actual MapsIndoors API key. For testing, you can use the demo API key: `02c329e6777d431a88480a09`. + ```javascript -// main.js +// script.js const mapViewOptions = { element: document.getElementById('map'), - center: { lat: 38.8974905, lng: -77.0362723 }, // The White House + center: { lat: 30.359285384, lng: -97.7412840716576 }, // MapsPeople - Austin Office zoom: 17, maxZoom: 22, }; + +//Set the MapsIndoors API key +mapsindoors.MapsIndoors.setMapsIndoorsApiKey('YOUR_MAPSINDOORS_API_KEY'); + const mapViewInstance = new mapsindoors.mapView.GoogleMapsView(mapViewOptions); const mapsIndoorsInstance = new mapsindoors.MapsIndoors({ mapView: mapViewInstance }); const googleMapsInstance = mapViewInstance.getMap(); @@ -147,18 +158,17 @@ Insert script tag into ``: ```html - + - MapsIndoors - + - + ``` @@ -169,42 +179,40 @@ After you added the script tag into ``, add the `` cust ```html - + - MapsIndoors - + - + ``` -Remember to add your API keys where indicated. You can use the demo MapsIndoors API key: `d876ff0e60bb430b8fabb145` +Remember to add your API keys where indicated. You can use the demo MapsIndoors API key: `02c329e6777d431a88480a09` 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 +// script.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 + mapInstance.setCenter({ lat: 30.359285384, lng: -97.7412840716576 }); // MapsPeople - Austin Office }); }) ``` @@ -221,26 +229,26 @@ Using the `` element, you can add the [floorSelectorControlPo ```html - + - MapsIndoors - + + + style="width: 720px; height: 480px;" + gm-api-key="YOUR_GOOGLE_MAPS_API_KEY" + mi-api-key="YOUR_MAPSINDOORS_API_KEY" + floor-selector-control-position="TOP_RIGHT"> - + + ``` @@ -251,7 +259,7 @@ Here's a JSFiddle demonstrating the result you should have by now: {% embed url="https://jsfiddle.net/mapspeople/h0gdbmo4/1/" %} {% endtab %} -{% tab title="Mapbox - Manually" %} +{% 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: @@ -261,23 +269,23 @@ Insert the MapsIndoors SDK script tag into ``, followed by the Mapbox `scr + - - - - MapsIndoors - - - + + + 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 @@ -285,41 +293,50 @@ Add an empty `
` element to `` with the `id` attribute set to "map": + - - - - MapsIndoors - - - + + + 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: +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 `script.js` file you created earlier: + +In the `script.js` code below, replace `YOUR_MAPSINDOORS_API_KEY` with your actual MapsIndoors API key. For testing, you can use the demo API key: `02c329e6777d431a88480a09`. ```javascript -// main.js +// script.js const mapViewOptions = { accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN', element: document.getElementById('map'), - center: { lat: 38.8974905, lng: -77.0362723 }, // The White House + center: { lng: -97.74204591828197, lat: 30.36022358949809 }, // MapsPeople - Austin Office zoom: 17, - maxZoom: 22 + maxZoom: 22, + mapsIndoorsTransitionLevel: 16, }; -const mapViewInstance = new mapsindoors.mapView.MapboxView(mapViewOptions); + +//Set the MapsIndoors API key +mapsindoors.MapsIndoors.setMapsIndoorsApiKey('YOUR_MAPSINDOORS_API_KEY'); + +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.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. +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](getting-started/prerequisites.md#mapbox-v3) for you application, while `showMapMarkers` property defines if Mapbox' Markers are shown on the map. You should now see a map from your chosen map engine with MapsIndoors data loaded on top. @@ -329,141 +346,39 @@ 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="https://docs.mapbox.com/mapbox-gl-js/api/map/#map#addcontrol" %} - -> 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: - -[https://jsfiddle.net/mapspeople/o12hrcL8/6/](https://jsfiddle.net/mapspeople/o12hrcL8/6/) -{% 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: +In the `script.js` code below, replace `YOUR_MAPSINDOORS_API_KEY` with your actual MapsIndoors API key. For testing, you can use the demo API key: `02c329e6777d431a88480a09`. ```javascript -// main.js +// script.js const mapViewOptions = { accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN', element: document.getElementById('map'), - center: { lat: 38.8974905, lng: -77.0362723 }, // The White House + center: { lng: -97.74204591828197, lat: 30.36022358949809 }, // MapsPeople - Austin Office zoom: 17, maxZoom: 22, - mapsIndoorsTransitionLevel: 17, - lightPreset: 'dusk', - showMapMarkers: false + mapsIndoorsTransitionLevel: 16, }; + +//Set the MapsIndoors API key +mapsindoors.MapsIndoors.setMapsIndoorsApiKey('YOUR_MAPSINDOORS_API_KEY'); + 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](getting-started/prerequisites.md#mapbox-v3) for you application, while `showMapMarkers` property defines if Mapbox' Markers are shown on the map. - -You should now see a map from your chosen map engine with MapsIndoors data loaded on top. - -### Display a Floor Selector - -Next, we'll add a Floor Selector for changing between floors. - -First, we add an empty `
` element programmatically. Then we create a new [`FloorSelector` _instance_](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/FloorSelector.html) and push the `floorSelectorElement` to the `mapboxInstance` to position it as a map controller: - -```javascript -// main.js - -const mapViewOptions = { - accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN', - element: document.getElementById('map'), - center: { lat: 38.8974905, lng: -77.0362723 }, // The White House - zoom: 17, - maxZoom: 22, - mapsIndoorsTransitionLevel: 17, - lightPreset: 'dusk', - showMapMarkers: false -}; -const mapViewInstance = new mapsindoors.mapView.MapboxV3View(mapViewOptions); -const mapsIndoorsInstance = new mapsindoors.MapsIndoors({ mapView: mapViewInstance }); const mapboxInstance = mapViewInstance.getMap(); // Floor Selector const floorSelectorElement = document.createElement('div'); new mapsindoors.FloorSelector(floorSelectorElement, mapsIndoorsInstance); -mapboxInstance.addControl({ onAdd: function () { return floorSelectorElement }, onRemove: function () { } }); +mapboxInstance.addControl({ + onAdd: function () { + return floorSelectorElement; + }, + onRemove: function () { }, +}); ``` {% embed url="https://docs.mapbox.com/mapbox-gl-js/api/map/#map#addcontrol" %} @@ -471,6 +386,10 @@ mapboxInstance.addControl({ onAdd: function () { return floorSelectorElement }, > 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 CodeSandbox demonstrating the result you should have by now: + +{% embed url="https://codesandbox.io/p/sandbox/github/MapsPeople/mapsindoors-getting-started-for-web/tree/main/sdk/mapbox/1-display-a-map" %} {% endtab %} {% tab title="Mapbox - MI Components" %} @@ -482,18 +401,17 @@ Insert script tag into ``: ```html - + - MapsIndoors - + - + ``` @@ -506,33 +424,33 @@ After you added the script tag into ``, add the `` custom e + - MapsIndoors - + - + - + ``` -Remember to add your API keys where indicated. You can use the demo MapsIndoors API key: `d876ff0e60bb430b8fabb145`. +Remember to add your API keys where indicated. You can use the demo MapsIndoors API key: `02c329e6777d431a88480a09`. 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 +// script.js const miMapElement = document.querySelector('mi-map-mapbox'); miMapElement.addEventListener('mapsIndoorsReady', () => { miMapElement.getMapInstance().then((mapInstance) => { - mapInstance.setCenter([-77.0362723, 38.8974905]); // The White House + mapInstance.setCenter([-97.7412840716576, 30.359285384]); // MapsPeople - Austin Office }); }); ``` @@ -549,21 +467,20 @@ Using the `` element, you can add the [floorSelectorControlPositi ```html - + - MapsIndoors - + - + - + ``` @@ -595,20 +512,19 @@ MapsIndoors Locations can be retrieved in the MapsIndoors namespace using the [` ```html - + - MapsIndoors - + -
- +
+ @@ -621,11 +537,11 @@ MapsIndoors Locations can be retrieved in the MapsIndoors namespace using the [` * Call the `getLocations` method and log out the results to the console. ```javascript -// main.js +// script.js const mapViewOptions = { element: document.getElementById('map'), - center: { lat: 38.8974905, lng: -77.0362723 }, // The White House + center: { lat: 30.359285384, lng: -97.7412840716576 }, // MapsPeople - Austin Office zoom: 17, maxZoom: 22, }; @@ -659,20 +575,19 @@ To display a list of search results you can append each search result to a list ```html - + - MapsIndoors - + -
- +
+
    @@ -684,11 +599,11 @@ To display a list of search results you can append each search result to a list * Reset the list on every complete search. ```javascript -// main.js +// script.js const mapViewOptions = { element: document.getElementById('map'), - center: { lat: 38.8974905, lng: -77.0362723 }, // The White House + center: { lat: 30.359285384, lng: -97.7412840716576 }, // MapsPeople - Austin Office zoom: 17, maxZoom: 22, }; @@ -717,11 +632,11 @@ function onSearch() { * Add a _for_ loop and append every result to the search results list element. ```javascript -// main.js +// script.js const mapViewOptions = { element: document.getElementById('map'), - center: { lat: 38.8974905, lng: -77.0362723 }, // The White House + center: { lat: 30.359285384, lng: -97.7412840716576 }, // MapsPeople - Austin Office zoom: 17, maxZoom: 22, }; @@ -761,11 +676,11 @@ To filter the map to only display the search results you can use the `filter` me * Call `mapsIndoorsInstance.filter` with an array of Location IDs. ```javascript -// main.js +// script.js const mapViewOptions = { element: document.getElementById('map'), - center: { lat: 38.8974905, lng: -77.0362723 }, // The White House + center: { lat: 30.359285384, lng: -97.7412840716576 }, // MapsPeople - Austin Office zoom: 17, maxZoom: 22, }; @@ -817,25 +732,28 @@ Using the `` component you get a ``element tied tightly togeth ```html - + - MapsIndoors - + - + ``` @@ -844,14 +762,14 @@ Using the `` component you get a ``element tied tightly togeth * Attach an `results` event listener and log out the results to the console. ```javascript -// main.js +// script.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 + mapInstance.setCenter({ lat: 30.359285384, lng: -97.7412840716576 }); // MapsPeople - Austin Office }); }) @@ -866,34 +784,35 @@ For more information on available events and how to configure the `` 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 - + - + - + - + ``` @@ -904,7 +823,7 @@ For more information on how to configure the `` component, see [compone * Reset the list on every complete search. ```javascript -// main.js +// script.js const miMapElement = document.querySelector('mi-map-googlemaps'); const miSearchElement = document.querySelector('mi-search'); @@ -912,7 +831,7 @@ const miListElement = document.querySelector('mi-list'); miMapElement.addEventListener('mapsIndoorsReady', () => { miMapElement.getMapInstance().then((mapInstance) => { - mapInstance.setCenter({ lat: 38.8974905, lng: -77.0362723 }); // The White House + mapInstance.setCenter({ lat: 30.359285384, lng: -97.7412840716576 }); // MapsPeople - Austin Office }); }) @@ -925,7 +844,7 @@ miSearchElement.addEventListener('results', (event) => { * Add a _for_ loop and append every result to the search results list element. ```javascript -// main.js +// script.js const miMapElement = document.querySelector('mi-map-googlemaps'); const miSearchElement = document.querySelector('mi-search'); @@ -933,7 +852,7 @@ const miListElement = document.querySelector('mi-list'); miMapElement.addEventListener('mapsIndoorsReady', () => { miMapElement.getMapInstance().then((mapInstance) => { - mapInstance.setCenter({ lat: 38.8974905, lng: -77.0362723 }); // The White House + mapInstance.setCenter({ lat: 30.359285384, lng: -97.7412840716576 }); // MapsPeople - Austin Office }); }) @@ -957,7 +876,7 @@ To filter the map to only display the search results you can use the `filter` me ```javascript -// main.js +// script.js const miMapElement = document.querySelector('mi-map-googlemaps'); const miSearchElement = document.querySelector('mi-search'); @@ -965,7 +884,7 @@ const miListElement = document.querySelector('mi-list'); miMapElement.addEventListener('mapsIndoorsReady', () => { miMapElement.getMapInstance().then((mapInstance) => { - mapInstance.setCenter({ lat: 38.8974905, lng: -77.0362723 }); // The White House + mapInstance.setCenter({ lat: 30.359285384, lng: -97.7412840716576 }); // MapsPeople - Austin Office }); }) @@ -993,11 +912,10 @@ To remove the location filter again, call `mapsIndoorsInstance.filter(null)`. Here's a JSFiddle demonstrating the result you should have by now: {% embed url="https://jsfiddle.net/mapspeople/jtnw0u1y/1/" 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 ` @@ -1033,23 +950,39 @@ MapsIndoors Locations can be retrieved in the MapsIndoors namespace using the [` * 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. +In the `script.js` code below, replace `YOUR_MAPSINDOORS_API_KEY` with your actual MapsIndoors API key. For testing, you can use the demo API key: `02c329e6777d431a88480a09`. + ```javascript -// main.js +// script.js const mapViewOptions = { accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN', element: document.getElementById('map'), - center: { lat: 38.8974905, lng: -77.0362723 }, // The White House + center: { lng: -97.74204591828197, lat: 30.36022358949809 }, // MapsPeople - Austin Office zoom: 17, maxZoom: 22, + mapsIndoorsTransitionLevel: 16, }; -const mapViewInstance = new mapsindoors.mapView.MapboxView(mapViewOptions); -const mapsIndoorsInstance = new mapsindoors.MapsIndoors({ mapView: mapViewInstance }); + +//Set the MapsIndoors API key +mapsindoors.MapsIndoors.setMapsIndoorsApiKey('YOUR_MAPSINDOORS_API_KEY'); + +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 () { } }); +mapboxInstance.addControl({ + onAdd: function () { + return floorSelectorElement; + }, + onRemove: function () { }, +}); function onSearch() { const searchInputElement = document.querySelector('input'); @@ -1071,21 +1004,20 @@ To display a list of search results you can append each search result to a list ```html - + - MapsIndoors - - - + + + -
    - +
    +
      @@ -1096,24 +1028,39 @@ To display a list of search results you can append each search result to a list * Get a reference to the list element. * Reset the list on every complete search. +In the `script.js` code below, replace `YOUR_MAPSINDOORS_API_KEY` with your actual MapsIndoors API key. For testing, you can use the demo API key: `02c329e6777d431a88480a09`. + ```javascript -// main.js +// script.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, + accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN', + element: document.getElementById('map'), + center: { lng: -97.74204591828197, lat: 30.36022358949809 }, // MapsPeople - Austin Office + zoom: 17, + maxZoom: 22, + mapsIndoorsTransitionLevel: 16, }; -const mapViewInstance = new mapsindoors.mapView.MapboxView(mapViewOptions); -const mapsIndoorsInstance = new mapsindoors.MapsIndoors({ mapView: mapViewInstance }); + +//Set the MapsIndoors API key +mapsindoors.MapsIndoors.setMapsIndoorsApiKey('YOUR_MAPSINDOORS_API_KEY'); + +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 () { } }); +mapboxInstance.addControl({ + onAdd: function () { + return floorSelectorElement; + }, + onRemove: function () { }, +}); function onSearch() { const searchInputElement = document.querySelector('input'); @@ -1131,100 +1078,144 @@ function onSearch() { * Add a _for_ loop and append every result to the search results list element. ```javascript -// main.js +// script.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, + accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN', + element: document.getElementById('map'), + center: { lng: -97.74204591828197, lat: 30.36022358949809 }, // MapsPeople - Austin Office + zoom: 17, + maxZoom: 22, + mapsIndoorsTransitionLevel: 16, }; -const mapViewInstance = new mapsindoors.mapView.MapboxView(mapViewOptions); -const mapsIndoorsInstance = new mapsindoors.MapsIndoors({ mapView: mapViewInstance }); + +//Set the MapsIndoors API key +mapsindoors.MapsIndoors.setMapsIndoorsApiKey('YOUR_MAPSINDOORS_API_KEY'); + +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 () { } }); +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 searchInputElement = document.querySelector('input'); + // Get list element reference + const searchResultsElement = document.getElementById('search-results'); + const searchParameters = { q: searchInputElement.value }; - const searchParameters = { q: searchInputElement.value }; - mapsindoors.services.LocationsService.getLocations(searchParameters).then(locations => { - // Reset search results list - searchResultsElement.innerHTML = null; + // Check if input is empty + if (searchInputElement.value === '') { + // Reset search results list + searchResultsElement.innerHTML = null; + return; + } - // Append new search results - locations.forEach(location => { - const listElement = document.createElement('li'); - listElement.innerHTML = location.properties.name; - searchResultsElement.appendChild(listElement); - }); - }); + 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) +### Highlight 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. +To filter the map to only display the search results you can use the `highlight` method. -* Call `mapsIndoorsInstance.filter` with an array of Location IDs. +* Call `mapsIndoorsInstance.highlight` with an array of Location IDs. ```javascript -// main.js +// script.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, + accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN', + element: document.getElementById('map'), + center: { lng: -97.74204591828197, lat: 30.36022358949809 }, // MapsPeople - Austin Office + zoom: 17, + maxZoom: 22, + mapsIndoorsTransitionLevel: 16, }; -const mapViewInstance = new mapsindoors.mapView.MapboxView(mapViewOptions); -const mapsIndoorsInstance = new mapsindoors.MapsIndoors({ mapView: mapViewInstance }); + +//Set the MapsIndoors API key +mapsindoors.MapsIndoors.setMapsIndoorsApiKey('YOUR_MAPSINDOORS_API_KEY'); + +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 () { } }); +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; + const searchInputElement = document.querySelector('input'); + // Get list element reference + const searchResultsElement = document.getElementById('search-results'); + + // Check if input is empty + if (searchInputElement.value === '') { + // Reset search results list + searchResultsElement.innerHTML = null; + // Clear map + mapsIndoorsInstance.highlight(); + return; + } - // Append new search results - locations.forEach(location => { - const listElement = document.createElement('li'); - listElement.innerHTML = location.properties.name; - searchResultsElement.appendChild(listElement); + 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.highlight(locations.map(location => location.id), false); }); - - // 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)`. +To remove the location filter again, call `mapsIndoorsInstance.highlight()`. Here's a JSFiddle demonstrating the result you should have by now: -[https://jsfiddle.net/mapspeople/r86903om/3/](https://jsfiddle.net/mapspeople/r86903om/3/) +[CodeSandbox - 3. Create a Search Experience](https://codesandbox.io/p/sandbox/github/MapsPeople/mapsindoors-getting-started-for-web/tree/main/sdk/mapbox/3-create-a-search-experience) -{% embed url="https://jsfiddle.net/mapspeople/r86903om/" %} +{% embed url="https://codesandbox.io/p/sandbox/github/MapsPeople/mapsindoors-getting-started-for-web/tree/main/sdk/mapbox/3-create-a-search-experience" %} {% endtab %} {% tab title="Mapbox - MI Components" %} @@ -1237,25 +1228,24 @@ Using the `` component you get an ``element tied tightly toget ```html - + - MapsIndoors - - + - + ``` @@ -1264,13 +1254,13 @@ Using the `` component you get an ``element tied tightly toget * Attach a `results` event listener and log the results in the console. ```javascript -// main.js +// script.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 + mapInstance.setCenter([-97.7412840716576, 30.359285384]); // MapsPeople - Austin Office }); }); @@ -1285,31 +1275,28 @@ For more information on available events and how to configure the `` 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 - + - + - + - + - + ``` @@ -1320,7 +1307,7 @@ For more information on how to configure the `` component, see [compone * Reset the list on every complete search. ```javascript -// main.js +// script.js const miMapElement = document.querySelector("mi-map-mapbox"); const miSearchElement = document.querySelector('mi-search'); @@ -1328,7 +1315,7 @@ const miListElement = document.querySelector('mi-list'); miMapElement.addEventListener('mapsIndoorsReady', () => { miMapElement.getMapInstance().then((mapInstance) => { - mapInstance.setCenter({ lat: 38.8974905, lng: -77.0362723 }); // The White House + mapInstance.setCenter({ lat: 30.359285384, lng: -97.7412840716576 }); // MapsPeople - Austin Office }); }) @@ -1341,7 +1328,7 @@ miSearchElement.addEventListener('results', (event) => { * Add a _for_ loop and append every result to the search results list element. ```javascript -// main.js +// script.js const miMapElement = document.querySelector('mi-map-mapbox'); const miSearchElement = document.querySelector('mi-search'); @@ -1349,7 +1336,7 @@ const miListElement = document.querySelector('mi-list'); miMapElement.addEventListener('mapsIndoorsReady', () => { miMapElement.getMapInstance().then((mapInstance) => { - mapInstance.setCenter({ lat: 38.8974905, lng: -77.0362723 }); // The White House + mapInstance.setCenter({ lat: 30.359285384, lng: -97.7412840716576 }); // MapsPeople - Austin Office }); }) @@ -1370,10 +1357,8 @@ miSearchElement.addEventListener('results', (event) => { To filter the map to only display the search results you can use the `filter` method. - - ```javascript -// main.js +// script.js const miMapElement = document.querySelector("mi-map-mapbox"); const miSearchElement = document.querySelector('mi-search'); @@ -1381,7 +1366,7 @@ const miListElement = document.querySelector('mi-list'); miMapElement.addEventListener('mapsIndoorsReady', () => { miMapElement.getMapInstance().then((mapInstance) => { - mapInstance.setCenter({ lat: 38.8974905, lng: -77.0362723 }); // The White House + mapInstance.setCenter({ lat: 30.359285384, lng: -97.7412840716576 }); // MapsPeople - Austin Office }); }) @@ -1433,11 +1418,11 @@ First, initialize the [MapsIndoors Directions Service](https://app.mapsindoors.c 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 +// script.js const mapViewOptions = { element: document.getElementById('map'), - center: { lat: 38.8974905, lng: -77.0362723 }, // The White House + center: { lat: 30.359285384, lng: -97.7412840716576 }, // MapsPeople - Austin Office zoom: 17, maxZoom: 22, }; @@ -1492,20 +1477,20 @@ In this tutorial, the Origin is, naturally, a hardcoded coordinate in the demo A In the following example, this is what happens: -1. Create a new `getRoute` method in `main.js` which accepts a location +1. Create a new `getRoute` method in `script.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 +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 +// script.js const mapViewOptions = { element: document.getElementById('map'), - center: { lat: 38.8974905, lng: -77.0362723 }, // The White House + center: { lat: 30.359285384, lng: -97.7412840716576 }, // MapsPeople - Austin Office zoom: 17, maxZoom: 22, }; @@ -1546,7 +1531,7 @@ function onSearch() { } function getRoute(location) { - const originLocationCoordinate = { lat: 38.897389429704695, lng: -77.03740973527613, floor: 0 }; // Oval Office, The White House (Hardcoded coordinate and floor index) + const originLocationCoordinate = { lat: 30.360337, lng: -97.7421792, floor: 0 }; // Meeting room: Ocean's Eleven (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 @@ -1569,11 +1554,11 @@ Now, to make it more dynamic, we attach a `click` event listener for each locati You will now have something like this: ```javascript -// main.js +// script.js const mapViewOptions = { element: document.getElementById('map'), - center: { lat: 38.8974905, lng: -77.0362723 }, // The White House + center: { lat: 30.359285384, lng: -97.7412840716576 }, // MapsPeople - Austin Office zoom: 17, maxZoom: 22, }; @@ -1618,7 +1603,7 @@ function onSearch() { } function getRoute(location) { - const originLocationCoordinate = { lat: 38.897389429704695, lng: -77.03740973527613, floor: 0 }; // Oval Office, The White House (Hardcoded coordinate and floor index) + const originLocationCoordinate = { lat: 30.360337, lng: -97.7421792, floor: 0 }; // Meeting room: Ocean's Eleven (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 @@ -1644,45 +1629,46 @@ In MapsIndoors, the transportation mode is referred to as travel mode. There are 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 al ```html - + - MapsIndoors - + @@ -1973,13 +1959,13 @@ To change between travel modes we first need to add a ` @@ -1990,7 +1976,7 @@ To change between travel modes we first need to add a `` elements value: ```javascript -// main.js +// script.js const miMapElement = document.querySelector('mi-map-googlemaps'); const miSearchElement = document.querySelector('mi-search'); @@ -2001,7 +1987,7 @@ let miDirectionsRendererInstance; miMapElement.addEventListener('mapsIndoorsReady', () => { miMapElement.getMapInstance().then((mapInstance) => { - mapInstance.setCenter({ lat: 38.8974905, lng: -77.0362723 }); // The White House + mapInstance.setCenter({ lat: 30.359285384, lng: -97.7412840716576 }); // MapsPeople - Austin Office }); miMapElement.getDirectionsServiceInstance().then((directionsServiceInstance) => miDirectionsServiceInstance = directionsServiceInstance); @@ -2029,7 +2015,7 @@ miSearchElement.addEventListener('results', (event) => { }); function getRoute(location) { - const originLocationCoordinate = { lat: 38.897389429704695, lng: -77.03740973527613, floor: 0 }; // Oval Office, The White House (Hardcoded coordinate and floor index) + const originLocationCoordinate = { lat: 30.360337, lng: -97.7421792, floor: 0 }; // Meeting room: Ocean's Eleven (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 @@ -2054,331 +2040,7 @@ You now have something like this: {% embed url="https://jsfiddle.net/mapspeople/jzqx7kmy/1/" %} {% endtab %} -{% tab title="Mapbox - Manually" %} -#### Get Directions Service and Render instances - -First, initialize the [MapsIndoors Directions Service](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.services.DirectionsService.html), and add an external Directions Provider (in this case Mapbox). - -Then, we need to initialize the [MapsIndoors Directions Renderer](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.directions.DirectionsRenderer.html) with the MapsIndoors instance: - -```javascript -// main.js - -const mapViewOptions = { - accessToken: "YOUR_MAPBOX_ACCESS_TOKEN", - element: document.getElementById("map"), - center: { lat: 38.8974905, lng: -77.0362723 }, // The White House - zoom: 17, - maxZoom: 22, -}; -const mapViewInstance = new mapsindoors.mapView.MapboxView(mapViewOptions); -const mapsIndoorsInstance = new mapsindoors.MapsIndoors({ mapView: mapViewInstance }); -const mapboxInstance = mapViewInstance.getMap(); - -const externalDirectionsProvider = new mapsindoors.directions.MapboxProvider('YOUR_MAPBOX_ACCESS_TOKEN'); -const miDirectionsServiceInstance = new mapsindoors.services.DirectionsService(externalDirectionsProvider); -const directionsRendererOptions = { mapsIndoors: mapsIndoorsInstance } -const miDirectionsRendererInstance = new mapsindoors.directions.DirectionsRenderer(directionsRendererOptions); - -// Floor Selector -const floorSelectorElement = document.createElement('div'); -new mapsindoors.FloorSelector(floorSelectorElement, mapsIndoorsInstance); -mapboxInstance.addControl({ onAdd: function () { return floorSelectorElement }, onRemove: function () { } }); - -function onSearch() { - const searchInputElement = document.querySelector('input'); - // Get list element reference - const searchResultsElement = document.getElementById('search-results'); - - const searchParameters = { q: searchInputElement.value }; - mapsindoors.services.LocationsService.getLocations(searchParameters).then(locations => { - // Reset search results list - searchResultsElement.innerHTML = null; - - // Append new search results - locations.forEach(location => { - const listElement = document.createElement('li'); - listElement.innerHTML = location.properties.name; - searchResultsElement.appendChild(listElement); - }); - - // Filter map to only display search results - mapsIndoorsInstance.filter(locations.map(location => location.id), false); - }); -} -``` - -> See all available directions render options and methods in the [reference documentation](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.directions.DirectionsRenderer.html). - -Now our example app is ready to provide Directions. Next up is how to give it an Origin and Destination and draw the route between. - -#### Draw a Route on the Map[​](https://docs.mapsindoors.com/getting-started/web/directions#draw-a-route-on-the-map) - -To display a route on the map, we use the coordinates of an Origin and Destination and draw a line between them. For this, we use MapsIndoors' [Directions Renderer](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.directions.DirectionsRenderer.html). - -The Destination coordinate is retrieved dynamically, using the coordinate of the selected Location in the search results list. Therefore, you must search for the destination to get directions, and then click the result in the text list. Different solutions can of course be implemented into your own solution later. - -In this tutorial, the Origin is, naturally, a hardcoded coordinate in the demo API key supplied with this guide. If you're using you own key, you can hardcode coordinates from a Location in your building instead. - -In the following example, this is what happens: - -1. Create a new `getRoute` method in `main.js` which accepts a `location` -2. Create two new constants, one for the Origin's coordinate, and another for the Destination's coordinate -3. Add another constant defining the `routeParameters` -4. Using the [MapsIndoors Directions Service](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.services.DirectionsService.html#getRoute) call the `getRoute` method to get the fastest route between the two coordinates - - > See all available route parameters in the [reference documentation](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.services.DirectionsService.html#getRoute). -5. Using the [MapsIndoors Directions Renderer](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.directions.DirectionsRenderer.html#setRoute) call the `setRoute` method to display the route on the map - -```javascript -// main.js - -const mapViewOptions = { - accessToken: "YOUR_MAPBOX_ACCESS_TOKEN", - element: document.getElementById('map'), - center: { lat: 38.8974905, lng: -77.0362723 }, // The White House - zoom: 17, - maxZoom: 22, -}; -const mapViewInstance = new mapsindoors.mapView.MapboxView(mapViewOptions); -const mapsIndoorsInstance = new mapsindoors.MapsIndoors({ mapView: mapViewInstance }); -const mapboxInstance = mapViewInstance.getMap(); - -const externalDirectionsProvider = new mapsindoors.directions.MapboxProvider(); -const miDirectionsServiceInstance = new mapsindoors.services.DirectionsService(externalDirectionsProvider); -const directionsRendererOptions = { mapsIndoors: mapsIndoorsInstance } -const miDirectionsRendererInstance = new mapsindoors.directions.DirectionsRenderer(directionsRendererOptions); - -// Floor Selector -const floorSelectorElement = document.createElement('div'); -new mapsindoors.FloorSelector(floorSelectorElement, mapsIndoorsInstance); -mapboxInstance.addControl({ onAdd: function () { return floorSelectorElement }, onRemove: function () { } }); - -function onSearch() { - const searchInputElement = document.querySelector('input'); - // Get list element reference - const searchResultsElement = document.getElementById('search-results'); - - const searchParameters = { q: searchInputElement.value }; - mapsindoors.services.LocationsService.getLocations(searchParameters).then(locations => { - // Reset search results list - searchResultsElement.innerHTML = null; - - // Append new search results - locations.forEach(location => { - const listElement = document.createElement('li'); - listElement.innerHTML = location.properties.name; - searchResultsElement.appendChild(listElement); - }); - - // Filter map to only display search results - mapsIndoorsInstance.filter(locations.map(location => location.id), false); - }); -} - -function getRoute(location) { - const originLocationCoordinate = { lat: 38.897389429704695, lng: -77.03740973527613, floor: 0 }; // Oval Office, The White House (Hardcoded coordinate and floor index) - const destinationCoordinate = { lat: location.properties.anchor.coordinates[1], lng: location.properties.anchor.coordinates[0], floor: location.properties.floor }; - - // Route parameters - const routeParameters = { - origin: originLocationCoordinate, - destination: destinationCoordinate, - travelMode: 'WALKING' - }; - - // Get route from directions service - miDirectionsServiceInstance.getRoute(routeParameters).then((directionsResult) => { - // Use directions render to display route - miDirectionsRendererInstance.setRoute(directionsResult); - }); -} -``` - -Now, to make it more dynamic, we attach a `click` event listener for each location appended to the search results list element with the `getRoute` method as a callback function. - -```javascript -// main.js - -const mapViewOptions = { - accessToken: "YOUR_MAPBOX_ACCESS_TOKEN", - element: document.getElementById('map'), - center: { lat: 38.8974905, lng: -77.0362723 }, // The White House - zoom: 17, - maxZoom: 22, -}; -const mapViewInstance = new mapsindoors.mapView.MapboxView(mapViewOptions); -const mapsIndoorsInstance = new mapsindoors.MapsIndoors({ mapView: mapViewInstance }); -const mapboxInstance = mapViewInstance.getMap(); - -const externalDirectionsProvider = new mapsindoors.directions.MapboxProvider(); -const miDirectionsServiceInstance = new mapsindoors.services.DirectionsService(externalDirectionsProvider); -const directionsRendererOptions = { mapsIndoors: mapsIndoorsInstance } -const miDirectionsRendererInstance = new mapsindoors.directions.DirectionsRenderer(directionsRendererOptions); - -// Floor Selector -const floorSelectorElement = document.createElement('div'); -new mapsindoors.FloorSelector(floorSelectorElement, mapsIndoorsInstance); -mapboxInstance.addControl({ onAdd: function () { return floorSelectorElement }, onRemove: function () { } }); - -function onSearch() { - const searchInputElement = document.querySelector('input'); - // Get list element reference - const searchResultsElement = document.getElementById('search-results'); - - const searchParameters = { q: searchInputElement.value }; - mapsindoors.services.LocationsService.getLocations(searchParameters).then(locations => { - // Reset search results list - searchResultsElement.innerHTML = null; - - // Append new search results - locations.forEach(location => { - const listElement = document.createElement('li'); - listElement.innerHTML = location.properties.name; - - // Add click event listener - listElement.addEventListener("click", () => getRoute(location), false); - - searchResultsElement.appendChild(listElement); - }); - - // Filter map to only display search results - mapsIndoorsInstance.filter(locations.map(location => location.id), false); - }); -} - -function getRoute(location) { - const originLocationCoordinate = { lat: 38.897389429704695, lng: -77.03740973527613, floor: 0 }; // Oval Office, The White House (Hardcoded coordinate and floor index) - const destinationCoordinate = { lat: location.properties.anchor.coordinates[1], lng: location.properties.anchor.coordinates[0], floor: location.properties.floor }; - - // Route parameters - const routeParameters = { - origin: originLocationCoordinate, - destination: destinationCoordinate, - travelMode: 'WALKING' - }; - - // Get route from directions service - miDirectionsServiceInstance.getRoute(routeParameters).then((directionsResult) => { - // Use directions render to display route - miDirectionsRendererInstance.setRoute(directionsResult); - }); -} -``` - -Now you can click on each item in the search results list to get directions. - -### Change Transportation Mode[​](https://docs.mapsindoors.com/getting-started/web/directions#change-transportation-mode) - -In MapsIndoors, the transportation mode is referred to as travel mode. There are four travel modes; walking, bicycling, driving and transit (public transportation). The travel modes apply for outdoor navigation. Indoor navigation calculations are based on walking travel mode. - -To change between travel modes we first need to add a ` - - - - - - - - -
          - - -``` - -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 al + - MapsIndoors - + @@ -2602,13 +2264,13 @@ To change between travel modes we first need to add a ` @@ -2619,7 +2281,7 @@ To change between travel modes we first need to add a `` elements value: ```javascript -// main.js +// script.js const miMapElement = document.querySelector('mi-map-mapbox'); const miSearchElement = document.querySelector('mi-search'); @@ -2630,7 +2292,7 @@ let miDirectionsRendererInstance; miMapElement.addEventListener('mapsIndoorsReady', () => { miMapElement.getMapInstance().then((mapInstance) => { - mapInstance.setCenter({ lat: 38.8974905, lng: -77.0362723 }); // The White House + mapInstance.setCenter({ lat: 30.359285384, lng: -97.7412840716576 }); // MapsPeople - Austin Office }); miMapElement.getDirectionsServiceInstance().then((directionsServiceInstance) => miDirectionsServiceInstance = directionsServiceInstance); @@ -2658,7 +2320,7 @@ miSearchElement.addEventListener('results', (event) => { }); function getRoute(location) { - const originLocationCoordinate = { lat: 38.897389429704695, lng: -77.03740973527613, floor: 0 }; // Oval Office, The White House (Hardcoded coordinate and floor index) + const originLocationCoordinate = { lat: 30.360337, lng: -97.7421792, floor: 0 }; // Meeting room: Ocean's Eleven (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