Map Widget quickstart guide

Introduction #

Our Map Widget allow you to show indoor maps of your buildings on your website or digital kiosk! It is a fully interactive web widget that will allow you to:

  • Show the indoor cartography of the buildings you’ve created in Situm Dashboard: floorplans, Points of Interest, etc.
  • Search and locate Points of interest, showing them in a list or filtering them by name.
  • Get route indications from different points of a building
  • Share maps via QR

Usage with iframe #

This widget can be easily integrated in your web app using the html tag <iframe/> and customizing it by its attributes. It will be needed an apikey and several of the features can be managed from the url given on the src attribute of the iframe.

In order to show this widget, just copy & paste this code into your website’s code:

  style="width:100%; height:600px"

This code will show you something like this:

If you don’t use email and api key parameters you will see this very embed iframe example above.

Api key #

As we do not handle users on this widget we manage the access through emails and api keys. The email must be registered at out platform Situm Dashboard and the api key can be created in our Dashboard too, just by accessing to our Map Viewer integration ( When you visit the Map Viewer on our Dashboard you will see a toast with the full iframe and the api key already inside it.

In the picture below we show you how to get this in Situm Dashboard. First you need to click on the “Map Viewer” button placed at the end of the sidebar, then you can see the toast with a button that copies to your clipboard the iframe, already with the email and api key of the user.

Map viewer on Situm Dashbaord

This is not the only way to get a valid api key, you can check more information about it in Situm api keys documentation. You can use any type of api keys but to use this widget, nevertheless we recommend using ‘read-only’ type api keys.

Integration Options – Query params #

Some of the features of the Map Viewer are kept in the url as query params. This are:

emailIndicates the user’s email
apikeyIndicates the api key explained before (related to email). Use this endpoint to get your api keys.
buildingidIndicates the selected building identifier. Use this endpoint to get your buildings ids.
flooridIndicates the selected floor identifier. Use this endpoint to get your floors ids.
poiidIndicates the selected POI identifier. Use this endpoint to get your POIs ids.
navigation_toIndicates the destiny POI identifier in a route.
navigation_fromIndicates the origin POI identifier in a route.
lngSets the language of the UI. Supported values: en and es.

All identifiers will match with the ones used on Situm Dashboard App.

Example of a multiple Query Params url:

During the usage of the Map Viewer the url will be dynamically updated with the query params depending on the action done by the user. This is a way to keep the state and share it with others or open it at the same point on the user’s phone.

Examples #

To understand better all these query parameters now here we have some visual examples of its usage. As we use the user interface by changing between buildings, floors and POIs, tracing routes, … the url will be modified according to the action done.

email & apikey #

These two parameters are used together, they allow you to use your account and access to your organization’s available buildings.<your_email_here>&apikey=<your_api_key_here>

buildingid & floorid #

These two parameters are used together, they trigger the display of the map in the specified floor that belongs to the specified building.

Building and floor visualization

poiid #

This parameter centers the view on the specified POI and shows the available information at the superior left corner. It usually goes with buildingid and floorid, but if you have permission to view a certain POI and you pass this param without building and floor identifiers these two missing params will autocomplete.

POI visualization

navigation_to #

Once a POI is selected you can ask directions to get to it from a certain position, to do this first it is needed to pick a destination. The destination is specified on the navigation_to query param.

Route destination selected

navigation_from #

When the destination is selected, only the origin is missing to finish the route calculation. To do this we have navigation_from, which specifies the POI where you are expected to be and you are starting to walk towards the destination.

In the User Interface, once both origin and destination are selected, you need to click ‘Calculate Route’ button to start the journey.

Route origin selected

lng #

Use lng query param to force User Interface to be on a specific locale.

UI translated to Spanish

Subscribe to our newsletter


Data controller: SITUM TECHNOLOGIES, S.L.
Contact: Data controller:
Responsible for protection:
Purpose and legal basis: To manage the sending of SITUM newsletters only with consent.
Legitimation: Express consent of the interested party.
Recipients: The data will not be passed on to third parties with the exception of legal obligations.
Retention period: As long as the interested party remains subscribed to the newsletter (a link to unsubscribe will be available in each newsletter sent by Situm).
Rights: The interested party may at any time revoke their consent, as well as exercise their rights of opposition, access, conservation, rectification, limitation, deletion of data and not be subject to a decision based only on automated data processing, by writing to SITUM at the addresses indicated.
Additional Information: You can consult additional and detailed information on Data Protection in our privacy policy.

Please, download your copy here

Thank you for downloading our whitepaper. Please do not hesitate to contact us if you would like to know more about how our solutions can help your business. Download whitepaper

Close window