From f15868c3ae1c30ca63b653ff114859d080281da4 Mon Sep 17 00:00:00 2001 From: Esben Nepper Date: Tue, 6 May 2025 13:03:55 +0200 Subject: [PATCH 01/33] Update MapsIndoors SDK version to 4.40.1 in tutorial documentation --- sdks-and-frameworks/web/tutorial/tutorial.md | 32 ++++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/sdks-and-frameworks/web/tutorial/tutorial.md b/sdks-and-frameworks/web/tutorial/tutorial.md index b00d3e4f..0decac97 100644 --- a/sdks-and-frameworks/web/tutorial/tutorial.md +++ b/sdks-and-frameworks/web/tutorial/tutorial.md @@ -52,7 +52,7 @@ Insert the MapsIndoors SDK script tag into ``, followed by the Google Maps MapsIndoors - + @@ -75,7 +75,7 @@ Add an empty `
` element to `` with the `id` attribute set to `"map"`: MapsIndoors - + @@ -266,7 +266,7 @@ Insert the MapsIndoors SDK script tag into ``, followed by the Mapbox `scr MapsIndoors - + @@ -290,7 +290,7 @@ Add an empty `
` element to `` with the `id` attribute set to "map": MapsIndoors - + @@ -376,9 +376,9 @@ Insert the MapsIndoors SDK script tag into ``, followed by the Mapbox `scr MapsIndoors - - - + + + @@ -400,9 +400,9 @@ Add an empty `
` element to `` with the `id` attribute set to "map": MapsIndoors - - - + + +
@@ -603,7 +603,7 @@ MapsIndoors Locations can be retrieved in the MapsIndoors namespace using the [` MapsIndoors - + @@ -667,7 +667,7 @@ To display a list of search results you can append each search result to a list MapsIndoors - + @@ -1015,7 +1015,7 @@ MapsIndoors Locations can be retrieved in the MapsIndoors namespace using the [` MapsIndoors - + @@ -1079,7 +1079,7 @@ To display a list of search results you can append each search result to a list MapsIndoors - + @@ -1653,7 +1653,7 @@ To change between travel modes we first need to add a `` element with al MapsIndoors - + From 52fdf3f23b31713cdf90368996ab2b9d2021b886 Mon Sep 17 00:00:00 2001 From: Esben Nepper Date: Tue, 6 May 2025 13:09:44 +0200 Subject: [PATCH 02/33] Add GitHub embed for initial setup index.html in tutorial --- sdks-and-frameworks/web/tutorial/tutorial.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/sdks-and-frameworks/web/tutorial/tutorial.md b/sdks-and-frameworks/web/tutorial/tutorial.md index 0decac97..5fbcb151 100644 --- a/sdks-and-frameworks/web/tutorial/tutorial.md +++ b/sdks-and-frameworks/web/tutorial/tutorial.md @@ -11,6 +11,8 @@ Throughout the Getting Started guide, you will modify and extend the same code t > 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: +{% github_embed "http://github.com/MapsPeople/mapsindoors-getting-started-for-web/blob/main/sdk/mapbox/1-initial-setup/index.html" %}{% endgithub_embed %} + ```html From ebeee183e4e510ae93b26b5a4e716c5fa1d6d06f Mon Sep 17 00:00:00 2001 From: Esben Nepper Date: Tue, 6 May 2025 13:22:14 +0200 Subject: [PATCH 03/33] Remove GitHub embed for initial setup in tutorial --- sdks-and-frameworks/web/tutorial/tutorial.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/sdks-and-frameworks/web/tutorial/tutorial.md b/sdks-and-frameworks/web/tutorial/tutorial.md index 5fbcb151..0decac97 100644 --- a/sdks-and-frameworks/web/tutorial/tutorial.md +++ b/sdks-and-frameworks/web/tutorial/tutorial.md @@ -11,8 +11,6 @@ Throughout the Getting Started guide, you will modify and extend the same code t > 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: -{% github_embed "http://github.com/MapsPeople/mapsindoors-getting-started-for-web/blob/main/sdk/mapbox/1-initial-setup/index.html" %}{% endgithub_embed %} - ```html From 8b81a7391e94e85d98a3cd5c6285637a300cb64d Mon Sep 17 00:00:00 2001 From: Esben Nepper Date: Tue, 6 May 2025 13:42:01 +0200 Subject: [PATCH 04/33] Update tutorial to reflect new MapsPeople Austin Office coordinates --- sdks-and-frameworks/web/tutorial/tutorial.md | 86 ++++++++++---------- 1 file changed, 43 insertions(+), 43 deletions(-) diff --git a/sdks-and-frameworks/web/tutorial/tutorial.md b/sdks-and-frameworks/web/tutorial/tutorial.md index 0decac97..7f523352 100644 --- a/sdks-and-frameworks/web/tutorial/tutorial.md +++ b/sdks-and-frameworks/web/tutorial/tutorial.md @@ -6,7 +6,7 @@ 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 `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: @@ -61,7 +61,7 @@ Insert the MapsIndoors SDK script tag into ``, followed by the Google Maps ``` -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`. +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: `02c329e6777d431a88480a09`. Add an empty `
` element to `` with the `id` attribute set to `"map"`: @@ -92,7 +92,7 @@ To load data and display it on the map, we need to create a new _instance_ of th 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, }; @@ -117,7 +117,7 @@ First, we add an empty `
` element programmatically. Then we create a new [` 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, }; @@ -204,7 +204,7 @@ 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 }); }) ``` @@ -309,7 +309,7 @@ To load data and display it on the map, we need to create a new _instance_ of th const mapViewOptions = { accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN', 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 }; @@ -335,7 +335,7 @@ First, we add an empty `
` element programmatically. Then we create a new [` const mapViewOptions = { accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN', 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 }; @@ -419,7 +419,7 @@ To load data and display it on the map, we need to create a new _instance_ of th const mapViewOptions = { accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN', 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, mapsIndoorsTransitionLevel: 17, @@ -448,7 +448,7 @@ First, we add an empty `
` element programmatically. Then we create a new [` const mapViewOptions = { accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN', 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, mapsIndoorsTransitionLevel: 17, @@ -532,7 +532,7 @@ First we get a reference to the `` element. Then we attach the [` 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 }); }); ``` @@ -625,7 +625,7 @@ MapsIndoors Locations can be retrieved in the MapsIndoors namespace using the [` 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, }; @@ -688,7 +688,7 @@ To display a list of search results you can append each search result to a list 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, }; @@ -721,7 +721,7 @@ function onSearch() { 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, }; @@ -765,7 +765,7 @@ To filter the map to only display the search results you can use the `filter` me 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, }; @@ -851,7 +851,7 @@ 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 }); }) @@ -912,7 +912,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 }); }) @@ -933,7 +933,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 }); }) @@ -965,7 +965,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 }); }) @@ -994,10 +994,10 @@ 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 ` @@ -571,7 +572,7 @@ To display a list of search results you can append each search result to a list -
+
@@ -920,7 +921,7 @@ MapsIndoors Locations can be retrieved in the MapsIndoors namespace using the [` -
+
@@ -984,7 +985,7 @@ To display a list of search results you can append each search result to a list -
+
@@ -2189,7 +2190,7 @@ To change between travel modes we first need to add a ``element tied tightly togeth ```html - + - MapsIndoors @@ -774,12 +766,11 @@ To display a list of search results you can append each search result to a list ```html - + - MapsIndoors @@ -908,12 +899,11 @@ MapsIndoors Locations can be retrieved in the MapsIndoors namespace using the [` ```html - + - MapsIndoors @@ -972,12 +962,11 @@ To display a list of search results you can append each search result to a list ```html - + - MapsIndoors @@ -1138,12 +1127,11 @@ Using the `` component you get an ``element tied tightly toget ```html - + - MapsIndoors @@ -1193,12 +1181,11 @@ To display a list of search results you can append each search result to a list ```html - + - MapsIndoors @@ -1847,12 +1834,11 @@ To change between travel modes we first need to add a `` element with al ```html - + - MapsIndoors @@ -2478,9 +2463,9 @@ To change between travel modes we first need to add a ``element tied tightly togeth - + @@ -776,12 +776,12 @@ To display a list of search results you can append each search result to a list - + - + @@ -1137,12 +1137,12 @@ Using the `` component you get an ``element tied tightly toget - - + @@ -1191,11 +1191,11 @@ To display a list of search results you can append each search result to a list - + - + - + @@ -1545,7 +1545,7 @@ To change between travel modes we first need to add a `` element with al @@ -1860,13 +1860,13 @@ To change between travel modes we first need to add a ` @@ -2473,7 +2473,7 @@ To change between travel modes we first need to add a `` element with al From b9eff7631f4db5340169c31443fff1951619dc32 Mon Sep 17 00:00:00 2001 From: Esben Nepper Date: Tue, 6 May 2025 15:56:15 +0200 Subject: [PATCH 11/33] Update map center coordinates and set MapsIndoors API key in tutorial --- sdks-and-frameworks/web/tutorial/tutorial.md | 37 ++++++++++++++------ 1 file changed, 26 insertions(+), 11 deletions(-) diff --git a/sdks-and-frameworks/web/tutorial/tutorial.md b/sdks-and-frameworks/web/tutorial/tutorial.md index 65d2a2ac..e8294c1e 100644 --- a/sdks-and-frameworks/web/tutorial/tutorial.md +++ b/sdks-and-frameworks/web/tutorial/tutorial.md @@ -313,13 +313,17 @@ To load data and display it on the map, we need to create a new _instance_ of th const mapViewOptions = { accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN', element: document.getElementById('map'), - center: { lat: 30.359285384, lng: -97.7412840716576 }, // MapsPeople - Austin Office + center: { lng: -97.74204591828197, lat: 30.36022358949809 }, // MapsPeople - Austin Office zoom: 17, maxZoom: 22, mapsIndoorsTransitionLevel: 17, lightPreset: 'dusk', showMapMarkers: false }; + +//Set the MapsIndoors API key +mapsindoors.MapsIndoors.setMapsIndoorsApiKey('02c329e6777d431a88480a09'); + const mapViewInstance = new mapsindoors.mapView.MapboxV3View(mapViewOptions); const mapsIndoorsInstance = new mapsindoors.MapsIndoors({ mapView: mapViewInstance, @@ -340,24 +344,35 @@ First, we add an empty `
` element programmatically. Then we create a new [` // main.js const mapViewOptions = { - accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN', - element: document.getElementById('map'), - center: { lat: 30.359285384, lng: -97.7412840716576 }, // MapsPeople - Austin Office - zoom: 17, - maxZoom: 22, - mapsIndoorsTransitionLevel: 17, - lightPreset: 'dusk', - showMapMarkers: false + accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN', + element: document.getElementById('map'), + center: { lng: -97.74204591828197, lat: 30.36022358949809 }, // MapsPeople - Austin Office + zoom: 17, + maxZoom: 22, + mapsIndoorsTransitionLevel: 17, + lightPreset: 'dusk', + showMapMarkers: false }; +//Set the MapsIndoors API key +mapsindoors.MapsIndoors.setMapsIndoorsApiKey('02c329e6777d431a88480a09'); + const mapViewInstance = new mapsindoors.mapView.MapboxV3View(mapViewOptions); -const mapsIndoorsInstance = new mapsindoors.MapsIndoors({ mapView: mapViewInstance }); +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" %} From d6ce76b251477036034f9358f2cc4e4fb7f93205 Mon Sep 17 00:00:00 2001 From: Esben Nepper Date: Tue, 6 May 2025 15:58:49 +0200 Subject: [PATCH 12/33] Adjust MapsIndoors transition level in map view options for improved performance --- sdks-and-frameworks/web/tutorial/tutorial.md | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/sdks-and-frameworks/web/tutorial/tutorial.md b/sdks-and-frameworks/web/tutorial/tutorial.md index e8294c1e..3af0e4f6 100644 --- a/sdks-and-frameworks/web/tutorial/tutorial.md +++ b/sdks-and-frameworks/web/tutorial/tutorial.md @@ -316,9 +316,7 @@ const mapViewOptions = { 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 @@ -349,9 +347,7 @@ const mapViewOptions = { 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 From 8663ea07f898fdb1962f5ceea68275f853baf084 Mon Sep 17 00:00:00 2001 From: Esben Nepper Date: Tue, 6 May 2025 16:01:27 +0200 Subject: [PATCH 13/33] Update tutorial to reference 'script.js' instead of 'main.js' for code examples --- sdks-and-frameworks/web/tutorial/tutorial.md | 76 ++++++++++---------- 1 file changed, 38 insertions(+), 38 deletions(-) diff --git a/sdks-and-frameworks/web/tutorial/tutorial.md b/sdks-and-frameworks/web/tutorial/tutorial.md index 3af0e4f6..81c9cd18 100644 --- a/sdks-and-frameworks/web/tutorial/tutorial.md +++ b/sdks-and-frameworks/web/tutorial/tutorial.md @@ -91,7 +91,7 @@ Add an empty `
` element to `` with the `id` attribute set to `"map"`: 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 +// script.js const mapViewOptions = { element: document.getElementById('map'), @@ -116,7 +116,7 @@ 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 +// script.js const mapViewOptions = { element: document.getElementById('map'), @@ -199,7 +199,7 @@ To center the map correctly, you need need the Google Maps _instance_ in your Ja 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'); @@ -308,7 +308,7 @@ Add an empty `
` element to `` with the `id` attribute set to "map": 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 +// script.js const mapViewOptions = { accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN', @@ -339,7 +339,7 @@ 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 +// script.js const mapViewOptions = { accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN', @@ -436,7 +436,7 @@ To center the map correctly, you need need the Mapbox _instance_ in your JavaScr 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) => { @@ -527,7 +527,7 @@ 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'), @@ -589,7 +589,7 @@ 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'), @@ -622,7 +622,7 @@ 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'), @@ -666,7 +666,7 @@ 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'), @@ -748,7 +748,7 @@ 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'); @@ -807,7 +807,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'); @@ -828,7 +828,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'); @@ -860,7 +860,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'); @@ -936,7 +936,7 @@ 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 = { accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN', @@ -998,7 +998,7 @@ 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 = { accessToken: "YOUR_MAPBOX_ACCESS_TOKEN", @@ -1032,7 +1032,7 @@ 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", @@ -1079,7 +1079,7 @@ 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 = { accessToken: "YOUR_MAPBOX_ACCESS_TOKEN", @@ -1164,7 +1164,7 @@ 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'); @@ -1219,7 +1219,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'); @@ -1240,7 +1240,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'); @@ -1272,7 +1272,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-mapbox"); const miSearchElement = document.querySelector('mi-search'); @@ -1332,7 +1332,7 @@ 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'), @@ -1400,7 +1400,7 @@ In the following example, this is what happens: 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'), @@ -1468,7 +1468,7 @@ 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'), @@ -1577,7 +1577,7 @@ To change between travel modes we first need to add a `` elements value: ```javascript -// main.js +// script.js const mapViewOptions = { element: document.getElementById('map'), @@ -1651,7 +1651,7 @@ You now have something like this: 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 +// script.js const miMapElement = document.querySelector('mi-map-googlemaps'); const miSearchElement = document.querySelector('mi-search'); @@ -1716,7 +1716,7 @@ In the following example, this is what happens: 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 miMapElement = document.querySelector('mi-map-googlemaps'); const miSearchElement = document.querySelector('mi-search'); @@ -1775,7 +1775,7 @@ function getRoute(location) { 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 +// script.js const miMapElement = document.querySelector('mi-map-googlemaps'); const miSearchElement = document.querySelector('mi-search'); @@ -1888,7 +1888,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'); @@ -1960,7 +1960,7 @@ First, initialize the [MapsIndoors Directions Service](https://app.mapsindoors.c 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 +// script.js const mapViewOptions = { accessToken: "YOUR_MAPBOX_ACCESS_TOKEN", @@ -2029,7 +2029,7 @@ In the following example, this is what happens: 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 = { accessToken: "YOUR_MAPBOX_ACCESS_TOKEN", @@ -2096,7 +2096,7 @@ function getRoute(location) { 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 +// script.js const mapViewOptions = { accessToken: "YOUR_MAPBOX_ACCESS_TOKEN", @@ -2207,7 +2207,7 @@ To change between travel modes we first need to add a `` elements value: ```javascript -// main.js +// script.js const mapViewOptions = { accessToken: "YOUR_MAPBOX_ACCESS_TOKEN", @@ -2283,7 +2283,7 @@ You now have something like this:\ 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 +// script.js const miMapElement = document.querySelector('mi-map-mapbox'); const miSearchElement = document.querySelector('mi-search'); @@ -2343,7 +2343,7 @@ In the following example, this is what happens: 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 miMapElement = document.querySelector("mi-map-mapbox"); const miSearchElement = document.querySelector('mi-search'); @@ -2402,7 +2402,7 @@ function getRoute(location) { 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 +// script.js const miMapElement = document.querySelector("mi-map-mapbox"); const miSearchElement = document.querySelector('mi-search'); @@ -2516,7 +2516,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'); From 83a044b1d7d94102fd1d3aa749cfaf79a234e37d Mon Sep 17 00:00:00 2001 From: Esben Nepper Date: Wed, 7 May 2025 09:29:40 +0200 Subject: [PATCH 14/33] Refactor tutorial HTML structure and remove redundant line breaks for clarity --- sdks-and-frameworks/web/tutorial/tutorial.md | 67 ++++++++++---------- 1 file changed, 33 insertions(+), 34 deletions(-) diff --git a/sdks-and-frameworks/web/tutorial/tutorial.md b/sdks-and-frameworks/web/tutorial/tutorial.md index 81c9cd18..2d628adb 100644 --- a/sdks-and-frameworks/web/tutorial/tutorial.md +++ b/sdks-and-frameworks/web/tutorial/tutorial.md @@ -1185,8 +1185,6 @@ 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. @@ -1394,7 +1392,7 @@ 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 +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 @@ -1543,36 +1541,37 @@ 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 + -
    -​ - - - - +
    ​ + + +
      + + ``` From e2067cf8b8ce5c427be2ce60da84cd67b4ce127a Mon Sep 17 00:00:00 2001 From: Esben Nepper Date: Wed, 7 May 2025 09:37:51 +0200 Subject: [PATCH 16/33] Update hardcoded origin location coordinates in getRoute function for accuracy --- sdks-and-frameworks/web/tutorial/tutorial.md | 26 ++++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/sdks-and-frameworks/web/tutorial/tutorial.md b/sdks-and-frameworks/web/tutorial/tutorial.md index a5b24437..261a4b09 100644 --- a/sdks-and-frameworks/web/tutorial/tutorial.md +++ b/sdks-and-frameworks/web/tutorial/tutorial.md @@ -1441,7 +1441,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 @@ -1513,7 +1513,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 @@ -1618,8 +1618,8 @@ 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) +function getRoute(location) {, + 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 @@ -1751,7 +1751,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 @@ -1814,7 +1814,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 @@ -1924,7 +1924,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 @@ -2072,7 +2072,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 @@ -2143,7 +2143,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 @@ -2250,7 +2250,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 @@ -2378,7 +2378,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 @@ -2441,7 +2441,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 @@ -2552,7 +2552,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 From b84fc34e3fd1a601367c28658b82dca908e05f2f Mon Sep 17 00:00:00 2001 From: Esben Nepper Date: Wed, 7 May 2025 09:38:41 +0200 Subject: [PATCH 17/33] Update tutorial to reference 'script.js' instead of 'main.js' for consistency --- sdks-and-frameworks/web/tutorial/tutorial.md | 52 ++++++++++---------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/sdks-and-frameworks/web/tutorial/tutorial.md b/sdks-and-frameworks/web/tutorial/tutorial.md index 261a4b09..d600e2eb 100644 --- a/sdks-and-frameworks/web/tutorial/tutorial.md +++ b/sdks-and-frameworks/web/tutorial/tutorial.md @@ -6,10 +6,10 @@ 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 @@ -82,13 +82,13 @@ Add an empty `
      ` element to `` with the `id` attribute set to `"map"`:
      - + ``` -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: ```javascript // script.js @@ -160,7 +160,7 @@ Insert script tag into ``: - + ``` @@ -187,7 +187,7 @@ After you added the script tag into ``, add the `` cust gm-api-key="YOUR_GOOGLE_MAPS_API_KEY" mi-api-key="YOUR_MAPSINDOORS_API_KEY"> - + ``` @@ -239,7 +239,7 @@ Using the `` element, you can add the [floorSelectorControlPo mi-api-key="YOUR_MAPSINDOORS_API_KEY" floor-selector-control-position="TOP_RIGHT"> - + ``` @@ -305,7 +305,7 @@ Add an empty `
      ` element to `` with the `id` attribute set to "map": ``` -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: +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: ```javascript // script.js @@ -401,7 +401,7 @@ Insert script tag into ``: - + ``` @@ -424,7 +424,7 @@ After you added the script tag into ``, add the `` custom e - + ``` @@ -470,7 +470,7 @@ Using the `` element, you can add the [floorSelectorControlPositi - + ``` @@ -514,7 +514,7 @@ MapsIndoors Locations can be retrieved in the MapsIndoors namespace using the [`
      - + @@ -577,7 +577,7 @@ To display a list of search results you can append each search result to a list
      - +
        @@ -739,7 +739,7 @@ Using the `` component you get a ``element tied tightly togeth mapsindoors="true" placeholder="Search"> - + ``` @@ -796,7 +796,7 @@ To display a list of search results you can append each search result to a list scroll-buttons-enabled="true" scroll-length="200"> - + ``` @@ -923,7 +923,7 @@ MapsIndoors Locations can be retrieved in the MapsIndoors namespace using the [`
        - + @@ -986,7 +986,7 @@ To display a list of search results you can append each search result to a list
        - +
          @@ -1155,7 +1155,7 @@ Using the `` component you get an ``element tied tightly toget           - + ``` @@ -1206,7 +1206,7 @@ To display a list of search results you can append each search result to a list - + ``` @@ -1387,7 +1387,7 @@ 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 @@ -1565,7 +1565,7 @@ To change between travel modes we first need to add a `
            - + @@ -1704,7 +1704,7 @@ 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 @@ -2017,7 +2017,7 @@ 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 @@ -2193,7 +2193,7 @@ To change between travel modes we first need to add a ` - +
              @@ -2331,7 +2331,7 @@ 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 From 06da18260355ce2e08097f68023f9681d42202f0 Mon Sep 17 00:00:00 2001 From: Esben Nepper Date: Wed, 7 May 2025 09:39:51 +0200 Subject: [PATCH 18/33] Remove unnecessary blank lines for improved readability in tutorial --- sdks-and-frameworks/web/tutorial/tutorial.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/sdks-and-frameworks/web/tutorial/tutorial.md b/sdks-and-frameworks/web/tutorial/tutorial.md index d600e2eb..d4208c8f 100644 --- a/sdks-and-frameworks/web/tutorial/tutorial.md +++ b/sdks-and-frameworks/web/tutorial/tutorial.md @@ -31,8 +31,6 @@ Throughout the Getting Started guide, you will modify and extend the same code t 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) From 3952a26daa0b153fb8b10fca550e03bb07ff5a77 Mon Sep 17 00:00:00 2001 From: Esben Nepper Date: Wed, 7 May 2025 09:47:34 +0200 Subject: [PATCH 19/33] Update MapsIndoors API key references for consistency and accuracy --- sdks-and-frameworks/web/tutorial/tutorial.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/sdks-and-frameworks/web/tutorial/tutorial.md b/sdks-and-frameworks/web/tutorial/tutorial.md index d4208c8f..1dfd3925 100644 --- a/sdks-and-frameworks/web/tutorial/tutorial.md +++ b/sdks-and-frameworks/web/tutorial/tutorial.md @@ -176,7 +176,7 @@ After you added the script tag into ``, add the `` cust MapsIndoors - + `, add the `` cust ``` -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. @@ -276,7 +276,7 @@ Insert the MapsIndoors SDK script tag into ``, followed by the Mapbox `scr ``` -> Remember to add your API keys to the links in your code. You can use the demo MapsIndoors API key: `d876ff0e60bb430b8fabb145`. +> Remember to add your API keys to the links in your code. You can use the demo MapsIndoors API key: `02c329e6777d431a88480a09`. Add an empty `
              ` element to `` with the `id` attribute set to "map": @@ -427,7 +427,7 @@ After you added the script tag into ``, add the `` custom e ``` -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. @@ -1852,7 +1852,7 @@ To change between travel modes we first need to add a `` element with al From 87a69e70a943adaa98951a5e04e8dbd3adeccfd1 Mon Sep 17 00:00:00 2001 From: Esben Nepper Date: Wed, 7 May 2025 09:57:01 +0200 Subject: [PATCH 20/33] Remove deprecated Mapbox manual section and clean up tutorial for improved clarity and focus on current features --- sdks-and-frameworks/web/tutorial/tutorial.md | 554 ------------------- 1 file changed, 554 deletions(-) diff --git a/sdks-and-frameworks/web/tutorial/tutorial.md b/sdks-and-frameworks/web/tutorial/tutorial.md index 1dfd3925..3fac014c 100644 --- a/sdks-and-frameworks/web/tutorial/tutorial.md +++ b/sdks-and-frameworks/web/tutorial/tutorial.md @@ -768,8 +768,6 @@ 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. @@ -897,235 +895,6 @@ Here's a JSFiddle demonstrating the result you should have by now: {% 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 -// script.js - -const mapViewOptions = { - accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN', - element: document.getElementById('map'), - center: { lat: 30.359285384, lng: -97.7412840716576 }, // MapsPeople - Austin Office - 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 -// script.js - -const mapViewOptions = { - accessToken: "YOUR_MAPBOX_ACCESS_TOKEN", - element: document.getElementById('map'), - center: { lat: 30.359285384, lng: -97.7412840716576 }, // MapsPeople - Austin Office - 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 -// script.js - -const mapViewOptions = { - accessToken: "YOUR_MAPBOX_ACCESS_TOKEN", - element: document.getElementById('map'), - center: { lat: 30.359285384, lng: -97.7412840716576 }, // MapsPeople - Austin Office - 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 -// script.js - -const mapViewOptions = { - accessToken: "YOUR_MAPBOX_ACCESS_TOKEN", - element: document.getElementById('map'), - center: { lat: 30.359285384, lng: -97.7412840716576 }, // MapsPeople - Austin Office - 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: - -[https://jsfiddle.net/mapspeople/r86903om/3/](https://jsfiddle.net/mapspeople/r86903om/3/) - -{% embed url="https://jsfiddle.net/mapspeople/r86903om/" %} -{% endtab %} - {% tab title="Mapbox - MI Components" %} ## Create a Simple Query Search @@ -1947,330 +1716,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 -// script.js -const mapViewOptions = { - accessToken: "YOUR_MAPBOX_ACCESS_TOKEN", - element: document.getElementById("map"), - center: { lat: 30.359285384, lng: -97.7412840716576 }, // MapsPeople - Austin Office - 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 `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 - - > 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 -// script.js - -const mapViewOptions = { - accessToken: "YOUR_MAPBOX_ACCESS_TOKEN", - element: document.getElementById('map'), - center: { lat: 30.359285384, lng: -97.7412840716576 }, // MapsPeople - Austin Office - 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: 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 - 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 -// script.js - -const mapViewOptions = { - accessToken: "YOUR_MAPBOX_ACCESS_TOKEN", - element: document.getElementById('map'), - center: { lat: 30.359285384, lng: -97.7412840716576 }, // MapsPeople - Austin Office - 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: 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 - 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 `` 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 +// script.js + +const mapViewOptions = { + 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, +}; + +//Set the MapsIndoors API key +mapsindoors.MapsIndoors.setMapsIndoorsApiKey('02c329e6777d431a88480a09'); + +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 () { }, +}); + + 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 +// script.js + +const mapViewOptions = { + 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, +}; + +//Set the MapsIndoors API key +mapsindoors.MapsIndoors.setMapsIndoorsApiKey('02c329e6777d431a88480a09'); + +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 () { }, +}); + +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 +// script.js + +const mapViewOptions = { + 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, +}; + +//Set the MapsIndoors API key +mapsindoors.MapsIndoors.setMapsIndoorsApiKey('02c329e6777d431a88480a09'); + +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 () { }, +}); + +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 +// script.js + +const mapViewOptions = { + accessToken: "YOUR_MAPBOX_ACCESS_TOKEN", + element: document.getElementById('map'), + center: { lat: 30.359285384, lng: -97.7412840716576 }, // MapsPeople - Austin Office + 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: + +[https://jsfiddle.net/mapspeople/r86903om/3/](https://jsfiddle.net/mapspeople/r86903om/3/) +{% embed url="https://jsfiddle.net/mapspeople/r86903om/" %} {% endtab %} {% tab title="Mapbox - MI Components" %} From 6d914220d225e7d7f50c7b1247165c12343fdab7 Mon Sep 17 00:00:00 2001 From: Esben Nepper Date: Wed, 7 May 2025 10:10:38 +0200 Subject: [PATCH 22/33] Update MapsIndoors integration to use MapboxV3View and set API key --- sdks-and-frameworks/web/tutorial/tutorial.md | 29 ++++++++++++++------ 1 file changed, 21 insertions(+), 8 deletions(-) diff --git a/sdks-and-frameworks/web/tutorial/tutorial.md b/sdks-and-frameworks/web/tutorial/tutorial.md index 1f76aade..70005122 100644 --- a/sdks-and-frameworks/web/tutorial/tutorial.md +++ b/sdks-and-frameworks/web/tutorial/tutorial.md @@ -1117,20 +1117,33 @@ To filter the map to only display the search results you can use the `filter` me // script.js const mapViewOptions = { - accessToken: "YOUR_MAPBOX_ACCESS_TOKEN", - element: document.getElementById('map'), - center: { lat: 30.359285384, lng: -97.7412840716576 }, // MapsPeople - Austin Office - 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('02c329e6777d431a88480a09'); + +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'); From f654426ba276ee039a07d3d7f38ce0a4d3c98314 Mon Sep 17 00:00:00 2001 From: Esben Nepper Date: Wed, 7 May 2025 12:33:34 +0200 Subject: [PATCH 23/33] Enhance search functionality to clear results and highlight locations on the map based on user input --- sdks-and-frameworks/web/tutorial/tutorial.md | 90 ++++++++++++-------- 1 file changed, 54 insertions(+), 36 deletions(-) diff --git a/sdks-and-frameworks/web/tutorial/tutorial.md b/sdks-and-frameworks/web/tutorial/tutorial.md index 70005122..389a3c2f 100644 --- a/sdks-and-frameworks/web/tutorial/tutorial.md +++ b/sdks-and-frameworks/web/tutorial/tutorial.md @@ -1086,32 +1086,40 @@ mapboxInstance.addControl({ }); 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 // script.js @@ -1146,34 +1154,44 @@ mapboxInstance.addControl({ }); 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" %} From b0a210c215ced88bdf6d89ce16ace73b15762804 Mon Sep 17 00:00:00 2001 From: Esben Nepper Date: Wed, 7 May 2025 12:38:39 +0200 Subject: [PATCH 24/33] Fix case sensitivity in highlight method call for search functionality --- sdks-and-frameworks/web/tutorial/tutorial.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sdks-and-frameworks/web/tutorial/tutorial.md b/sdks-and-frameworks/web/tutorial/tutorial.md index 389a3c2f..a16a6930 100644 --- a/sdks-and-frameworks/web/tutorial/tutorial.md +++ b/sdks-and-frameworks/web/tutorial/tutorial.md @@ -1163,7 +1163,7 @@ function onSearch() { // Reset search results list searchResultsElement.innerHTML = null; // Clear map - mapsIndoorsInstance.Highlight(); + mapsIndoorsInstance.highlight(); return; } From 5a33376be96aaea48d80009fa3e6ffe825546077 Mon Sep 17 00:00:00 2001 From: Esben Nepper Date: Wed, 7 May 2025 12:39:05 +0200 Subject: [PATCH 25/33] Update Mapbox integration to version 3.10.0 and remove API key from script source --- sdks-and-frameworks/web/tutorial/tutorial.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/sdks-and-frameworks/web/tutorial/tutorial.md b/sdks-and-frameworks/web/tutorial/tutorial.md index a16a6930..55cd71bb 100644 --- a/sdks-and-frameworks/web/tutorial/tutorial.md +++ b/sdks-and-frameworks/web/tutorial/tutorial.md @@ -989,9 +989,9 @@ To display a list of search results you can append each search result to a list MapsIndoors - - - + + +
                        From 81f22b8a581fdf5cb58924665cfffa925f8c9bea Mon Sep 17 00:00:00 2001 From: Esben Nepper Date: Wed, 7 May 2025 13:08:24 +0200 Subject: [PATCH 26/33] Update MapsIndoors component script tags to use the latest version and ensure module type is specified --- sdks-and-frameworks/web/tutorial/tutorial.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/sdks-and-frameworks/web/tutorial/tutorial.md b/sdks-and-frameworks/web/tutorial/tutorial.md index 55cd71bb..d63ea518 100644 --- a/sdks-and-frameworks/web/tutorial/tutorial.md +++ b/sdks-and-frameworks/web/tutorial/tutorial.md @@ -155,7 +155,7 @@ Insert script tag into ``: MapsIndoors - + @@ -176,7 +176,7 @@ After you added the script tag into ``, add the `` cust MapsIndoors - + ` element, you can add the [floorSelectorControlPo MapsIndoors - + `: MapsIndoors - + @@ -417,7 +417,7 @@ After you added the script tag into ``, add the `` custom e MapsIndoors - + @@ -462,7 +462,7 @@ Using the `` element, you can add the [floorSelectorControlPositi MapsIndoors - + @@ -780,7 +780,7 @@ To display a list of search results you can append each search result to a list MapsIndoors - + @@ -1263,7 +1263,7 @@ To display a list of search results you can append each search result to a list MapsIndoors - + @@ -1915,7 +1915,7 @@ To change between travel modes we first need to add a `` element with al @@ -2227,7 +2244,7 @@ To change between travel modes we first need to add a ``element tied tightly togeth - + - + From c4eecba4ca01c27c2a3522c6cc83fb7ea298126c Mon Sep 17 00:00:00 2001 From: Esben Nepper Date: Wed, 7 May 2025 16:00:08 +0200 Subject: [PATCH 31/33] Add tutorial for setting up the development environment --- .../web/tutorial/1-set-up-your-environment.md | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 sdks-and-frameworks/web/tutorial/1-set-up-your-environment.md 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..63161314 --- /dev/null +++ b/sdks-and-frameworks/web/tutorial/1-set-up-your-environment.md @@ -0,0 +1,30 @@ +# 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 `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. From f5e0b721d5933530e52f88b06235397dd0b2af1e Mon Sep 17 00:00:00 2001 From: Esben Nepper Date: Wed, 7 May 2025 16:01:59 +0200 Subject: [PATCH 32/33] Remove unnecessary link and ID from the "Set Up Your Environment" section header --- sdks-and-frameworks/web/tutorial/1-set-up-your-environment.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 63161314..6c468955 100644 --- a/sdks-and-frameworks/web/tutorial/1-set-up-your-environment.md +++ b/sdks-and-frameworks/web/tutorial/1-set-up-your-environment.md @@ -1,4 +1,4 @@ -# Step 1. Set Up Your Environment[​](https://docs.mapsindoors.com/getting-started/web/new-project#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. From 700fbcd150ca37dd1e8086efcbd25de2891e70cf Mon Sep 17 00:00:00 2001 From: Esben Nepper Date: Wed, 7 May 2025 16:08:39 +0200 Subject: [PATCH 33/33] Add front matter to "Set Up Your Environment" tutorial --- sdks-and-frameworks/web/tutorial/1-set-up-your-environment.md | 4 ++++ 1 file changed, 4 insertions(+) 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 index 6c468955..c5013f58 100644 --- a/sdks-and-frameworks/web/tutorial/1-set-up-your-environment.md +++ b/sdks-and-frameworks/web/tutorial/1-set-up-your-environment.md @@ -1,3 +1,7 @@ +--- +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/).