diff --git a/.gitbook/assets/Routing-directions.png b/.gitbook/assets/Routing-directions.png new file mode 100644 index 0000000..a84a48c Binary files /dev/null and b/.gitbook/assets/Routing-directions.png differ diff --git a/.gitbook/assets/Screenshot 2023-10-20 at 12.43.03 PM.png b/.gitbook/assets/Screenshot 2023-10-20 at 12.43.03 PM.png new file mode 100644 index 0000000..d60cbda Binary files /dev/null and b/.gitbook/assets/Screenshot 2023-10-20 at 12.43.03 PM.png differ diff --git a/.gitbook/assets/Screenshot 2023-10-20 at 12.43.15 PM.png b/.gitbook/assets/Screenshot 2023-10-20 at 12.43.15 PM.png new file mode 100644 index 0000000..5959ebe Binary files /dev/null and b/.gitbook/assets/Screenshot 2023-10-20 at 12.43.15 PM.png differ diff --git a/.gitbook/assets/Screenshot 2023-10-20 at 12.43.38 PM.png b/.gitbook/assets/Screenshot 2023-10-20 at 12.43.38 PM.png new file mode 100644 index 0000000..a1f4dd6 Binary files /dev/null and b/.gitbook/assets/Screenshot 2023-10-20 at 12.43.38 PM.png differ diff --git a/.gitbook/assets/desk_to_room_optimizer.gif b/.gitbook/assets/desk_to_room_optimizer.gif new file mode 100644 index 0000000..53e5892 Binary files /dev/null and b/.gitbook/assets/desk_to_room_optimizer.gif differ diff --git a/.gitbook/assets/externalIdDisplayRule (1).gif b/.gitbook/assets/externalIdDisplayRule (1).gif new file mode 100644 index 0000000..09cfc6a Binary files /dev/null and b/.gitbook/assets/externalIdDisplayRule (1).gif differ diff --git a/.gitbook/assets/externalIdDisplayRule.gif b/.gitbook/assets/externalIdDisplayRule.gif new file mode 100644 index 0000000..09cfc6a Binary files /dev/null and b/.gitbook/assets/externalIdDisplayRule.gif differ diff --git a/.gitbook/assets/externalIdsDisplayRules.gif b/.gitbook/assets/externalIdsDisplayRules.gif new file mode 100644 index 0000000..cd1710a Binary files /dev/null and b/.gitbook/assets/externalIdsDisplayRules.gif differ diff --git a/.gitbook/assets/image (1).png b/.gitbook/assets/image (1).png new file mode 100644 index 0000000..cbdaabc Binary files /dev/null and b/.gitbook/assets/image (1).png differ diff --git a/.gitbook/assets/image (2).png b/.gitbook/assets/image (2).png new file mode 100644 index 0000000..e72bfe0 Binary files /dev/null and b/.gitbook/assets/image (2).png differ diff --git a/.gitbook/assets/image (3).png b/.gitbook/assets/image (3).png new file mode 100644 index 0000000..30b4c5c Binary files /dev/null and b/.gitbook/assets/image (3).png differ diff --git a/.gitbook/assets/image (4).png b/.gitbook/assets/image (4).png new file mode 100644 index 0000000..99bcf4c Binary files /dev/null and b/.gitbook/assets/image (4).png differ diff --git a/.gitbook/assets/image (5).png b/.gitbook/assets/image (5).png new file mode 100644 index 0000000..6826c15 Binary files /dev/null and b/.gitbook/assets/image (5).png differ diff --git a/SUMMARY.md b/SUMMARY.md index 8d35ad3..8daab63 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -7,6 +7,7 @@ * [Web](sdks-and-frameworks/web/README.md) * [Getting Started](sdks-and-frameworks/web/getting-started/README.md) * [Map Engine Setup](sdks-and-frameworks/web/getting-started/prerequisites.md) + * [Create a Search Experience](sdks-and-frameworks/web/getting-started/create-a-search-experience.md) * [Tutorial](sdks-and-frameworks/web/getting-started/tutorial.md) * [Map Visualization](sdks-and-frameworks/web/map-visualization/README.md) * [Display Rules in Practice](sdks-and-frameworks/web/map-visualization/display-rules-in-practice.md) @@ -14,7 +15,7 @@ * [Switching Solutions](sdks-and-frameworks/web/map-visualization/switching-solutions.md) * [Remove Labels from Buildings and Venues](sdks-and-frameworks/web/remove-labels-from-buildings-and-venues.md) * [Change Building Outline](sdks-and-frameworks/web/change-building-outline-color.md) - * [Turn Off Collisions Based on Zoom Level](sdks-and-frameworks/web/displaying-objects/turn-off-collisions-based-on-zoom-level.md) + * [Managing Collisions Based on Zoom Level](sdks-and-frameworks/web/map-visualization/managing-collisions-based-on-zoom-level.md) * [3D Maps](key-features/3d-maps/README.md) * [Managing your 3D Maps](sdks-and-frameworks/web/map-visualization/3d-maps/managing-your-3d-maps.md) * [Wayfinding](sdks-and-frameworks/web/directions-and-routing/README.md) @@ -23,8 +24,10 @@ * [Directions Renderer](sdks-and-frameworks/web/wayfinding/directions-renderer.md) * [User's Location as Point of Origin](sdks-and-frameworks/web/directions-and-routing/directions-renderer/users-location-as-point-of-origin.md) * [Search](sdks-and-frameworks/web/search/README.md) - * [Basic Searching](sdks-and-frameworks/web/basic-searching.md) - * [External IDs](sdks-and-frameworks/web/other-guides/external-ids.md) + * [Search Operations](sdks-and-frameworks/web/search/search-operations.md) + * [Searching](sdks-and-frameworks/web/search/searching.md) + * [Using External ID, Geospatial Joins](sdks-and-frameworks/web/other-guides/external-ids.md) + * [Utilizing MapsIndoors Web Components and Other Searches](sdks-and-frameworks/web/search/utilizing-mapsindoors-web-components-and-other-searches.md) * [Map Management](sdks-and-frameworks/web/map-management/README.md) * [Data Visualization](sdks-and-frameworks/web/data-visualization/README.md) * [Booking](sdks-and-frameworks/web/booking/README.md) diff --git a/sdks-and-frameworks/integration-api/README.md b/sdks-and-frameworks/integration-api/README.md index 33dcdc4..258d1a5 100644 --- a/sdks-and-frameworks/integration-api/README.md +++ b/sdks-and-frameworks/integration-api/README.md @@ -1,17 +1,5 @@ # Integration API -**Documentation reflects the latest version:** - -You can find documentation on legacy versions here: - -{% content-ref url="../../other-docs/legacy-docs/" %} -[legacy-docs](../../other-docs/legacy-docs/) -{% endcontent-ref %} - -*** - -### Introduction and Getting Started[​](https://docs.mapsindoors.com/api#introduction-and-getting-started) - The MapsIndoors Integration API offers an alternative to changing your Mapsindoors data via the [CMS](https://cms.mapsindoors.com/). From this API you can get, add, change and delete either directly via third party tools like [Postman](https://www.postman.com/) or via the provided Swagger frontend. You can access data through the Integration API using a range of endpoints. The endpoints are described in the Swagger interface definition: [https://integration.mapsindoors.com/doc](https://integration.mapsindoors.com/doc/index.html) diff --git a/sdks-and-frameworks/web/basic-searching.md b/sdks-and-frameworks/web/basic-searching.md deleted file mode 100644 index 93944a1..0000000 --- a/sdks-and-frameworks/web/basic-searching.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -layout: - title: - visible: true - description: - visible: true - tableOfContents: - visible: true - outline: - visible: true - pagination: - visible: false ---- - -# Basic Searching - -Searching through your MapsIndoors data is an key part of a great user experience with your maps. Users can look for places to go, or filter what is shown on the map. - -Searches work on all MapsIndoors geodata. It is up to you to create a search experience that fits your use case. To help you in this, there is a range of filters you can apply to the search queries to get the best results. E.g. you can filter by Categories, search only a specific part of the map or search near a Location. - -All three return a list of Locations from your solution matching the parameters they are given. The results are ranked upon the three following factors: - -* If a "near" parameter is set, how close is the origin point to the result? -* How well does the search input text match the text of the result (using the "Levenshtein distance" algorithm)? -* Which kind of geodata is the result (e.g. Buildings are ranked over POIs)? - -This means that the first item in the search result list will be the one best matching the three factors. - -See the full list of parameters: - -| Parameter | Description | -| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------- | -| take | Max number of Locations to get | -| Skip | Skip the first number of entries | -| categories | A list of Categories to limit the search to | -| Parents | A list of Building or Venue IDs to limit the search to | -| Types | A list of Types to limit the search to | -| Bounds | Limits the result of Locations to a bounding area | -| Floor | Limits the result of Locations to be on a specific Floor | -| Near | Sorts the list of Locations on which Location is nearest the point given | -| Depth | The Depth property makes it possible to get "x" amount of descendants to the given parent. The default for this is 1 (eg. Building > Floor) | - -#### Example of Creating a Search Query[​](https://docs.mapsindoors.com/searching#example-of-creating-a-search-query) - -See the full list of parameters in the [reference guide](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.services.LocationsService.html#.getLocations): - -```javascript -const searchParameters = { - q: 'Office', - near: { lat: 38.897579747054046, lng: -77.03658652944773 }, // // Blue Room, The White House - take: 1 -} - -mapsindoors.services.LocationsService.getLocations(searchParameters).then(locations => { - console.log(locations); -}); -``` - -## Display Search Results on the Map[​](https://docs.mapsindoors.com/searching#display-search-results-on-the-map) - -When displaying the search results, it is helpful to filter the map to only show matching Locations. Matching Buildings and Venues will still be shown on the map, as they give context to the user, even if they aren't selectable on the map. - -#### Example of Filtering the Map to Display Searched Locations on the Map - -```javascript -const searchParameters = { - q: 'Office', - near: { lat: 38.897579747054046, lng: -77.03658652944773 }, // // Blue Room, The White House - take: 1 -} - -mapsindoors.services.LocationsService.getLocations(searchParameters).then(locations => { - mapsIndoorsInstance.filter(locations.map(location => location.id), false); -}); -``` - -### Clearing the Map of Your Filter[​](https://docs.mapsindoors.com/searching#clearing-the-map-of-your-filter) - -After displaying the search results on your map you can then clear the filter so that all Locations show up on the map again. - -#### Example of Clearing Your Map Filter to Show All Locations Again - -```javascript -mapsIndoorsInstance.filter(null); -``` - -#### Display Locations as List[​](https://docs.mapsindoors.com/searching#display-locations-as-list) - -You can also search for Locations, and have them presented to you as a list, instead of just displaying them on the map. - -The full code example is shown in the JSFiddle below which will be examined below. - -#### Search[​](https://docs.mapsindoors.com/searching#search) - -The `mapsindoors.services.LocationsService` class exposes the `getLocations` function that enables you to search for Locations. - -It will return a promise that gets resolved when the query has executed. - -See [mapsindoors.services.LocationsService](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.services.LocationsService.html) for more information. - -```javascript -searchElement.addEventListener('input', debounce((e) => { - const value = e.target.value; - if (value > '') { - mapsindoors.services.LocationsService.getLocations({ q: value, includeOutsidePOI: true }) - .then(displayResults) - .then(filterMap); - } else { - clearResults(); - clearFilter(); - } -}, 500)); -``` - -The `debounce` method is there to ensure that the service is not being called in rapid succession. This method delays the execution of the function by 500ms, unless `debounce` is called again within 500ms, in which case the timer is reset. - -See this article ["What is debouncing" by Jamis Charles](https://medium.com/@jamischarles/what-is-debouncing-2505c0648ff1) for a more detailed description of the `debounce` concept. - -When the function executes, we check whether the input is empty or not. A request object is created if the input is not empty. - -The `getLocations` function expects either no input, in which case it returns all Locations, or an Object (please refer to the official documentation for an exhaustive list of properties). In this case, the constant `value` is passed to the `q` property and the `includeOutsidePOI` property is set to `true`. When the Promise resolves, the response is passed to the `displayResults` helper function. - -If the input is empty, we clear the result list and reset the map filter by calling the helper functions `clearResults` and `clearFilter`. - -#### Checking for Results[​](https://docs.mapsindoors.com/searching#checking-for-results) - -We need to clear the previous results, and check if any Locations were returned. If so, we loop through them and add them to the result list. - -```javascript -function displayResults(locations) { - clearResults(); - - if (locations.length > 0) { - for (const location of locations) { - searchResults.innerHTML += `
  • ${location.properties.name}
    • `; - } - } else { - searchResults.innerHTML = '
  • No results matched the query.
    • '; - } - - return locations; -} -``` - -If no Locations are returned, a message is shown to the user stating "No results matched the query.". Otherwise, we pass the Locations on to the next helper function called `filterMap`. - -```javascript -function filterMap(locations) { - mapsIndoors.filter(locations.map(location => location.id), false); - return locations; -} -``` - -The purpose of the `filterMap` function is to create a list of `location id`s used to filter the Locations on the map. - -The second parameter tells MapsIndoors not to change the viewport of the map. - -For more information, see `MapsIndoors.filter` in the [reference documentation](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/MapsIndoors.html#filter). diff --git a/sdks-and-frameworks/web/data-visualization/README.md b/sdks-and-frameworks/web/data-visualization/README.md index d07c20b..842d0b6 100644 --- a/sdks-and-frameworks/web/data-visualization/README.md +++ b/sdks-and-frameworks/web/data-visualization/README.md @@ -1,2 +1,15 @@ # Data Visualization +Data visualization in the form of displaying external dynamic data within your indoor map is crucial for enhancing the map's utility, relevance, real-time applicability and not least for customizing it to fit your specific use cases. \ + + +MapsIndoor’s data visualization functionality is built to ensure a unified, up-to-date, and contextually relevant mapping experience for users. \ + + +By altering your map data visualization dynamically, you will create a use-case-specific digital twin that only shows information that is relevant for solving your users’ needs.\ + + +Integrate everything from live data sensors, calendar booking systems, ERP systems, and more to MapsIndoors.\ + + +Follow our guides to customise your maps with the data integrations you need. diff --git a/sdks-and-frameworks/web/directions-and-routing/README.md b/sdks-and-frameworks/web/directions-and-routing/README.md index b981fa3..9b3b9b9 100644 --- a/sdks-and-frameworks/web/directions-and-routing/README.md +++ b/sdks-and-frameworks/web/directions-and-routing/README.md @@ -14,4 +14,31 @@ layout: # Wayfinding -## +Wayfinding is a critical component of your indoor map solution enabling efficient route calculations and optimal navigation within indoor spaces.\ + + +MapsIndoors’ wayfinding functionality is a comprehensive solution that seamlessly integrates local and global maps, considers various travel modes, utilizes entry points for smooth transitions, and breaks down routes into logical legs and steps, ultimately enhancing navigation and user satisfaction.\ + + +Key elements to dig into when enabling wayfinding in your MapsIndoors solution are: + +**Outdoor to indoor navigation**\ +Turn-by-turn directions visualized on the map with estimated travel time and detailed descriptions. + +**Venue to Venue wayfinding** + +When you're getting routes between two of your own MapsIndoors venues and may require using public routes from Google Maps or Mapbox to get there. + +**Dynamic routes**\ +Automated route updates based on obstacles like furniture and changing floor plan layout. + +**Personalized routes**\ +User profiles allow for personalized guidance, based on what the user is allowed to see and where they are allowed to navigate. Getting the right people to the right destinations. + +**Accessible wayfinding**\ +Allow users with disabilities to effortlessly navigate your building by avoiding stairs and using elevators and ramps for navigation. + +\ + + +All the guidance is here for you. Happy wayfinding! diff --git a/sdks-and-frameworks/web/directions-and-routing/directions-service.md b/sdks-and-frameworks/web/directions-and-routing/directions-service.md index 91004c8..1099bb7 100644 --- a/sdks-and-frameworks/web/directions-and-routing/directions-service.md +++ b/sdks-and-frameworks/web/directions-and-routing/directions-service.md @@ -26,38 +26,36 @@ This guide will show you how to implement directions, render routes, and interac * Would you like to show directions on the map? * How will the end user let the map know it's time to update with the next part of their journey? -
    - -
    - +

    Creating and combining the interfaces and the map view.

    +

    Determining the scope and simplicity of your end user experience should be a big focus when implementing the MapsIndoors SDK

    From an implementation standpoint, there are two functional things that need to be taken care of. 1. Setting up and requesting directions -

    Getting directions via the SDK

    +
    -2. [Handling and rendering directions responses](../wayfinding/directions-renderer.md) +1. [Handling and rendering directions responses](../wayfinding/directions-renderer.md) -

    What you can do once you have the response.

    +
    The first step in getting directions is initializaing the directions service instance. By passing the externalDirectionsProvider, the MapsIndoors SDK will handle merging responses from the base map, e.g. outdoor directions that will charge billable requests if you request from somewhere else other than MapsIndoors data (e.g. an end users house, to somewhere indoors.) -**Implementation** +## **Implementation** The class `DirectionsService` is used to request routes from one point to another. The minimal required input is an `origin` and a `destination`. -Mapbox (required parameter of the DirectionsService instance) +**Mapbox** (required parameter of the DirectionsService instance) ```javascript const externalDirectionsProvider = new mapsindoors.directions.MapboxProvider(); const miDirectionsServiceInstance = new mapsindoors.services.DirectionsService(externalDirectionsProvider); ``` -Google (not required for legacy reasons, but recommended to pass an externalDirectionsProvider as a parameter) +**Google** (not required for legacy reasons, but recommended to pass an externalDirectionsProvider as a parameter) ```javascript const externalDirectionsProvider = new mapsindoors.directions.GoogleMapsProvider(); diff --git a/sdks-and-frameworks/web/directions-and-routing/directions.md b/sdks-and-frameworks/web/directions-and-routing/directions.md index 19849d9..dfa91ab 100644 --- a/sdks-and-frameworks/web/directions-and-routing/directions.md +++ b/sdks-and-frameworks/web/directions-and-routing/directions.md @@ -4,7 +4,7 @@ As a key element in the MapsIndoors platform, we offer APIs for efficiently calculating and displaying the most optimal routes from anywhere in the world to any Location in MapsIndoors. In the case of travelling inside a Venue, this calculation can be done on a local map provided by MapsIndoors. In the case of travelling between Venues or from outdoors to indoors, MapsIndoors provides a seamless journey outline from a specified Origin through automatically selected Entry Points at the edge of your Venues to the specified destination. See illustration below: -

    MJE: GRAFIC NEEDS AND UPDATE - AND PARKING SHOULD BE REMOVED. DOTS MUST STILL ILLUSTRATE LEG DIVISION AS DESCRIBED IN THE ARTICLE.

    +
    In order to provide a route between Venues, MapsIndoors integrates with external and global map engines (Mapbox and Google Maps). diff --git a/sdks-and-frameworks/web/getting-started/create-a-search-experience.md b/sdks-and-frameworks/web/getting-started/create-a-search-experience.md new file mode 100644 index 0000000..78a63b3 --- /dev/null +++ b/sdks-and-frameworks/web/getting-started/create-a-search-experience.md @@ -0,0 +1,828 @@ +# Create a Search Experience + +In this step, you'll create a simple search and display the search results in a list. You'll also learn how to filter the data displayed on the map. + +{% tabs %} +{% tab title="Google Maps - Manually" %} +## Create a Simple Query Search + +MapsIndoors Locations can be retrieved in the MapsIndoors namespace using the [`LocationsService.getLocations()` method](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.services.LocationsService.html#.getLocations) but first you need to add a `` and ` + + +``` + +* Create the `onSearch` method. +* Get a reference to the search `` element. +* Define a new object with the search parameter `q` and the value of `searchInputElement`. +* Call the `getLocations` method and log out the results to the console. + +```javascript +// main.js + +const mapViewOptions = { + element: document.getElementById('map'), + center: { lat: 38.8974905, lng: -77.0362723 }, // The White House + zoom: 17, + maxZoom: 22, +}; +const mapViewInstance = new mapsindoors.mapView.GoogleMapsView(mapViewOptions); +const mapsIndoorsInstance = new mapsindoors.MapsIndoors({ mapView: mapViewInstance }); +const googleMapsInstance = mapViewInstance.getMap(); + +// Floor Selector +const floorSelectorElement = document.createElement('div'); +new mapsindoors.FloorSelector(floorSelectorElement, mapsIndoorsInstance); +googleMapsInstance.controls[google.maps.ControlPosition.RIGHT_TOP].push(floorSelectorElement); + + function onSearch() { + const searchInputElement = document.querySelector('input'); + + const searchParameters = { q: searchInputElement.value }; + mapsindoors.services.LocationsService.getLocations(searchParameters).then(locations => { + console.log(locations); + }); + } +``` + +See all available search parameters in the [reference documentation](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.services.LocationsService.html#.getLocations). + +### Display a List of Search Results + +To display a list of search results you can append each search result to a list element. + +* Add the `