Deep Linking
The Mappedin Shareable 3D Map supports deep linking to open a map at a specific location or a set of directions. A deep link can be constructed manually using the URL parameters described in this guide. A URL copied while using a Mappedin map can also be saved for later use. For example a user could interact with a Mappedin map to display directions and copy the URL from their browser for later use.
Refer to the Iframe Messaging Guide for more information on how to implement deep linking with a map embedded in an iframe.
Base URL
The base URL for any map link begins with: https://app.mappedin.com/map/<mapId>
<mapId> Refers to the Id of the map to be displayed.
Example: https://app.mappedin.com/map/66686f1af06f04000b18b8fa
Link to a Floor
By default the lowest above ground floor is shown, which is usually the ground floor. To link to a different floor use the floor parameter and pass in the floorId.
https://app.mappedin.com/map/<mapId>?floor=<floorId>
Example: https://app.mappedin.com/map/66686f1af06f04000b18b8fa?floor=m_cbad244ceb3c4275
Link to a Location
To link to a specific location, such as an Annotation, Point of Interest, Room or Space, use the location parameter and pass it the location Id or name.
https://app.mappedin.com/map/<mapId>?location=<locationId | locationName>
Example using Location Id: https://app.mappedin.com/map/66686f1af06f04000b18b8fa?location=s_c550a911f7112193
Example using Location Name: https://app.mappedin.com/map/66686f1af06f04000b18b8fa?location=Washroom
You Are Here
A specific coordinate can be selected as “You are here”. This will show a special marker on the map, and allow users to see and to navigate using this coordinate at all times.
Right click on the map to view a pop up that shows the latitude and longitude of the location clicked.
To generate a deep link with a “You are here” coordinate, specify the you-are-here query parameter in the form of you-are-here=<latitude>%2C<longitude>%2C<floorId>.
https://app.mappedin.com/map/66686f1af06f04000b18b8fa?floor=m_bfb78ebc356d2ed0&you-are-here=43.64652178%2C-79.38645187%2Cm_bfb78ebc356d2ed0
Wayfinding Without a Departure Location
A location on the map can be linked as the destination for wayfinding. The user can then select a departure point and generate directions. When using a desktop browser, the user is prompted to drop a pin to set their departure location. When using a mobile browser the user is prompted to select another location.
To link to a destination, add /directions to the base URL in combination with the location query parameter.
https://app.mappedin.com/map/<mapId>/directions?location=<locationId | locationName>
Example: https://app.mappedin.com/map/66686f1af06f04000b18b8fa/directions?location=s_c550a911f7112193
Wayfinding with a Departure Location
To build a link with directions from a specific location to another location, add /directions to the base URL and set the departure and location to a location Id or location name.
https://app.mappedin.com/map/<mapId>/directions?location=<locationId | locationName>&departure=<locationId | locationName>
Wayfinding using Coordinates
To create a link for wayfinding from an arbitrary coordinate on the map, add /directions to the base URL and specify the coordinate as the departure and set location to a location Id or location name.
Right click on the map to view a pop up that shows the latitude and longitude of the location clicked.
https://app.mappedin.com/map/<mapId>/directions?location=<locationId | locationName>&departure=<latitude>%2C<longitude>%2C<floorId>
Disable Outdoors
The outdoor map can be disabled, which results in only the indoor map being shown. Use outdoors=false to disable it. It is not required to set outdoors to true because outdoor map is shown by default.
https://app.mappedin.com/map/660c0c097c0c4fe5b4cc484b?floor=m_e101ad27d86783ed&outdoors=false
Example: https://app.mappedin.com/map/660c0c097c0c4fe5b4cc484b?floor=m_e101ad27d86783ed&outdoors=false
Using QR Codes
A QR code can be created that providers users with something they can scan on their smartphone that opens Mappedin Viewer in their browser using any of the deep links described above.
The CodeSandbox below demonstrates how to use the Mappedin JS to generate a QR code that when scanned, opens Mappedin Viewer with the directions show in the example.