Documentation for Web

Getting started - indoor navigation for Web

Trying the Showcase Web App

A showcase app is available on GitHub, free to use and adapt to your needs.
Showcase Web App

To try it out right away:

  • Make sure nodejs, npm and gulp is installed on your system
  • Using a terminal/shell in the project folder, run the following commands:
    • npm install -g browser-sync
    • gulp build
    • browser-sync start --server
  • If on Windows and prompted, allow server to use your PC network
  • Open your browser at http://localhost:3000/app (or whatever port browser-sync chooses per default)

Script Loading

Include the following scripts in your document. MapsIndoors depend on jQuery and Google Maps API v3, so if it’s not present on script load, MapsIndoors will not be able to initialize.

If you need to use a floor selector (most projects do), just add a css reference as in the sample. This will provide a basic CSS-layout for the floor selector.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script> <script type="text/javascript" src="https://app.mapsindoors.com/mapsindoors/js/sdk/MapsIndoors-1.1.1.js?solutionId=MY_MAPSINDOORS_SOLUTION_ID"></script> // Load css for default floor selector <link href="https://app.mapsindoors.com/mapsindoors/js/sdk/ui/FloorSelector.css" type="text/css" rel="stylesheet" />

Setting up a map

This is an example of setting up a MapsIndoors enabled Google map. First, as always when setting up Google Maps, create a div with defined height and width.

<div id="map" style="width:600px;height:600px"></div>


Then add the following script code somewhere on your HTML page.

var myGoogleMap, myMapsIndoors; var init = function () { // Setup google map myGoogleMap = new google.maps.Map(document.getElementById('map'), { center: { lat: 57.085809, lng: 9.9573899 }, zoom: 17 }); // Setup MapsIndoors myMapsIndoors= new mapsindoors.MapsIndoors({ map: myGoogleMap }); // Add a floor selector var div = document.createElement('div'); var floorSelector = new mapsindoors.FloorSelector(div, myMapsIndoors); myGoogleMap.controls[google.maps.ControlPosition.RIGHT_TOP].push(div); }; google.maps.event.addDomListener(window, 'load', init);

  


In the sample code above, replace MY_MAPSINDOORS_SOLUTION_ID with your MapsIndoors solution id. Your solution id is 24 character hex-string that gives access to your solution data. If you are not a customer or you have not received a solution id yet, you can use this demo solution id: 5583d36c2a91e00f1cc4ecb2

Using Display Rules

Icons will by default show for all types of locations on the map. In order to control whether or not to display icons, labels and choose on which zoom levels to display locations, you need to setup display rules for your locations on the map.

mapsIndoors.displayRules.set("info", {from:16, icon:"http://myiconhost.com/info.png" });


Please refer to our documentation on display rules for a thorough introduction.

Using Events

MapsIndoors uses the Google Maps built-in event handling system, so listening for event on various object is straight-forward. Here are some examples.

google.maps.event.addListener(myMapsIndoors, "ready", function (result) { console.log(result); }); google.maps.event.addListener(myMapsIndoors, 'building_changed', function () { console.log(this); }); google.maps.event.addListener(myMapsIndoors, 'floor_changed', function () { console.log(this); }); google.maps.event.addListener(myMapsIndoors, 'location_click', function () { console.log(this); }); google.maps.event.addListener(directionsRenderer, 'before_action_rendered', function () { console.log(arguments); }); google.maps.event.addListener(marker, 'click', function () { console.dir(this); });


The event names and their targets are as follows:

Event Name Target Object of Class Returns
"ready" MapsIndoors MapsIndoors object
"building_changed" MapsIndoors Current building object
"floor_changed" MapsIndoors Current floor index
"location_click" MapsIndoors Selected location
     
     
     

 

Create an Infobox

Most often you might want to display location content when a user clicks or taps on an icon. You can use the simple Infobox UI component for this. Add the infobox stylesheet as a starting point for the design.

<link href="https://app.mapsindoors.com/mapsindoors/js/sdk/ui/Infobox.css" rel="stylesheet" />


Provide the following html code in your document. For templating we use Markup.js.

<div id="infobox" class="mapsindoors infobox"> <a data-close>x</a> <table> <tr><td><i class="fa fa-map-marker"></i></td><td><h3>{{ if properties.roomid properties.roomid }} {{ properties.name }}</h3></td></tr> <tr><td><i class="fa fa-building-o"></i></td><td>Building {{ properties.building }}</td></tr> <tr><td><i class="fa fa-arrows-v"></i></td><td>Floor {{ properties.floor }}</td></tr> <tr><td><i class="fa fa-info"></i></td><td>{{ if properties.description properties.description }}</td></tr> </table> </div>


Here is an example on how to setup the component.

// Div containing an input search element var infoDiv = document.getElementById('infobox'); // Optionally insert the Infobox UI-component into google maps googleMap.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(infoDiv); // Instantiate infobox var infobox = new mapsindoors.Infobox(infoDiv); locationsService.getLocationDetails("SOME-MAPSINDOORS-ID").then(function (location) { // Show location content in infobox infobox.show(location); // if <a data-close>x</a> is present in your infobox element, user can close the infobox, or it can be closed programmatically setTimeout(function() { infobox.close(); }, 5000); });

  

Create a Search and Suggestions box

If you need to facilitate search functionality to your MapsIndoors solution, you can use the Suggestions UI component. Add the suggestions stylesheet as a starting point for the design.

<link href="https://app.mapsindoors.com/mapsindoors/js/sdk/ui/Suggestions.css" rel="stylesheet" />


Add the following html somewhere in your document.

<div id="search-box" class="mapsindoors search-container"> <input type="search" placeholder="Search rooms and facilites..." class="mapsindoors search"> <ul class="mapsindoors suggestions"></ul> </div>


Given the above code, here is a simple example on how to use the component.

// Div containing an input search element var searchDiv = document.getElementById('search-box'); // If needed, insert the div element as a map control googleMap.controls[google.maps.ControlPosition.TOP_LEFT].push(searchDiv); // Instantiates suggestions object var suggestions = new mapsindoors.Suggestions(searchDiv); // Listen for user interaction - returns the selected location google.maps.event.addListener(suggestions, 'location_changed', function (location) { console.dir(location); });

  

mapsindoors.DirectionsRendererer

mapsindoors.DirectionsRendererer

DirectionsRenderer()

Constructor. Takes directions render options as required parameter.

var directionsRenderer = new mapsindoors.DirectionsRenderer( { map: googleMap, // The Google map on which to render mapsindoors: mapsIndoors, // The MapsIndoors instance suppressMarkers: boolean, // Optional - If true, action/step point markers will not be rendered directions: directionsObject, // Optional - the actual directions object containing the directions data legIndex: number // Optional - the part of the route which should render (0, 1, 2, n), defaults to 0. Highest index is directionsObject.legs.length - 1. } );

  

setStyle( type:String, options:PolylineOptions )

Sets the directions rendering style. For twaeking style of route polylines we use the Google Maps v3 API PolylineOptions format. The methods first parameter refers to a style type that can be either the travel mode for outdoor routes or the type of way for indoor routes. The possible style types include:

  • default – The default style, will be used for all non-specified styles
  • driving – Style for driving travel mode
  • walking – Style for walking travel mode
  • transit – Style for transit travel mode
  • bicycling – Style for transit travel mode
  • footway – Style for regular indoor ways
  • steps – Style for steps/stairs
  • elevator – Style for elevators
  • escalator – Style for elevators
  • travellator – Style for travellators
  • residential – Style for roads at a venue
var directionsRenderer = new mapsindoors.DirectionsRenderer(); directionsRenderer.setStyle('default', { clickable: boolean // Indicates whether this Polyline handles mouse events. Defaults to true. icons: Array<IconSequence> // The icons to be rendered along the polyline. path: MVCArray<LatLng>|Array<LatLng|LatLngLiteral> // The ordered sequence of coordinates of the Polyline. This path may be specified using either a simple array of LatLngs, or an MVCArray of LatLngs. Note that if you pass a simple array, it will be converted to an MVCArray Inserting or removing LatLngs in the MVCArray will automatically update the polyline on the map. strokeColor: string // The stroke color. All CSS3 colors are supported except for extended named colors. strokeOpacity: number // The stroke opacity between 0.0 and 1.0. strokeWeight: number // The stroke width in pixels. visible: boolean // Whether this polyline is visible on the map. Defaults to true. zIndex: number // The rendering index in relation to other polylines } );

  

setDirections( result: DirectionsResult )

Renders the route result using the applied render options. Used in conjunction with a DirectionsService, this is an example of displaying a route on the map.

var googleMap = new google.maps.Map(...); var directionsService = new mapsindoors.DirectionsService(); var renderer = new mapsindoors.DirectionsRenderer({ map: googleMap }); directionsService.route( { origin: { lat: 55.687791059149376, lng: 12.571580452361996, floor: 0 }, destination: { lat: 55.687476568798, lng: 12.568619293609554, floor: 0 }, travelMode: "WALKING" avoidStairs: true } ).then(function (result) { renderer.setDirections(result); });

  

clear()

Clear the current route rendering.

mapsindoors.DirectionsService

mapsindoors.DirectionsService

DirectionsService()

Constructor. Instantiates a service that can be used for making route requests.

route( request:DirectionsRequest ) : Promise

Request routing from a point to another. The request object aligns to the Google Maps V3 API DirectionsRequest object specification, but with floor properties on origin and destination. Furthermore, avoidStairs boolean can be set to request routes for both disabled users and users without disabilities.

var directionsService = new mapsindoors.DirectionsService(); directionsService.route( { origin: {lat:57.5, lng: 12.9, floor: 0}, destination: {lat:57.5, lng: 12.9, floor: 0}, // MapsIndoors options avoidStairs: true, // Google Directions options travelMode: google.maps.TravelMode, transitOptions: {...}, avoidFerries: true, ... } ).then(function(routeResult) { // Result will contain possible routes or none if routing failed. });

  

mapsindoors.LocationsService

mapsindoors.LocationsService

LocationsService()

Constructor.

getCategories() : Promise

Get the unique categories and their translation used by published locations. Typically, this can be used to build a menu for list or map filtering of locations.

var locations = new mapsindoors.LocationsService(); locations.getCategories().then(function(categories) { // Returns localized category list with structure { office: "Office", ... } e.g. for english. }); 1 2 3 4 5 6 7 var locations = new mapsindoors.LocationsService(); locations.getCategories().then(function(categories) { // Returns localized category list with structure { office: "Office", ... } e.g. for english. });

  

getTypes() : Promise

A set of location types is defined for every MapsIndoors solution. The current list of types can be retrieved like this:

var locations = new mapsindoors.LocationService(); locations.getTypes().then(function(types) { // returns array of types with format { name:string, icon:string } });

  

getLocationDetails( id:string ) : Promise

Get the full details object of a single location. Pass the MapsIndoors id string present in any location object at location.id.

var locations = new mapsindoors.LocationsService(); // Get all locations locations.getLocations().then(function(data) { locations.getLocationDetails(data[0].id).then(function(detailedData) { // Returns a full-detail location object }); });

  

getLocations( query:LocationQuery ) : promise

Get locations from MapsIndoors using a query object (optional). With no query parameter, all published locations will be fetched.

var locations = new mapsindoors.LocationsService(); locations.getLocations( { q: "lounge", //Search for matches in location name or aliases building: "34", //Fetch from specific building, using the administrative id of the building venue: "VenueA", //Fetch from specific venue, using name of venue floor: 1, //Fetch from 1st floor take: 10, //Fetch only 10 locations skip: 10, //Skip first 10 in result near: {lat:57.5, lng: 12.9} //Sort by proximity to geographic point radius: 50, //Fetch only nearest within meters from near orderBy: "name" //Sort by name (possible values are Name, Floor, //Building, Venue, Type and RoomId) } ).then(function(data) { // returns an array of locations that matches the criteria });

  

mapsindoors.MapsIndoors

mapsindoors.MapsIndoors

MapsIndoors()

Constructor. Instantiate using a Google map.

var googleMap = new google.maps.Map(...); var mapsIndoors = new mapsindoors.MapsIndoors( { map: googleMap } );

  

setDisplayRule( type:string, displayRule:DisplayRule)

Display rules use the following structure:

{ from: zoom_level, // Optional - defaults to 0 to: zoom_level, // Optional - defaults to 21 icon: google.maps.icon|"url" // Optional - defaults to current location icon url (dynamically set) visible: boolean // Optional - defaults to true };


To add your own custom icons for locations (point-of-interest, rooms, etc.), setup display rule(s) and make it known to your MapsIndoors object.

var googleMap = new google.maps.Map(...); var mapsIndoors = new mapsindoors.MapsIndoors({map: googleMap}); mapsIndoors.setDisplayRule("info", {from:16, icon:"http://myiconhost.com/info.png" });


Display rules are based on POI/Location types. Every location has one type propertylocation.properties.type. A set of types is defined/used in the MapsIndoors CMS. The current list of types can be listed using the LocationService:

var locations = new mapsindoors.LocationService(); locations.getTypes().then(function(types) { // returns array of types with format { name:string, icon:string } });


Two of these types could be of name “Parking” and “Office”, which indicates that these types are used for parking lots and offices respectively. In most cases, you might want to display parking icons on zoom-levels above office icons. Based on this intention you could set these rules:

mapsIndoors.setDisplayRule("parking", { from:16 }); // Using default type icon mapsIndoors.setDisplayRule("office", { from:20 }); // Using default type icon

  

locate( locateObject:object )

Use the locate method to find and highlight different elements of the MapsIndoors content. An example is given below. Note: The example shows all options, but onlyone of building, venue, locationId and location is necessary.

var googleMap = new google.maps.Map(...); var mapsIndoors = new mapsindoors.MapsIndoors({map:googleMap}); mapsIndoors.locate( { building: "34" // Optional - Using the administrative id for building venue: "VenueA" // Optional - Using name for venue locationId: "id" // Optional - Mapsindoors location id string locations: { q: "lounge", // Optional - Search for matches in location name or aliases building: "34", // Optional - Fetch from specific building, using the administrative id of the building venue: "VenueA", // Optional - Fetch from specific venue, using name of venue floor: 1, // Optional - Fetch from 1st floor only take: 10, // Optional - Fetch only 10 locations skip: 10, // Optional - Skip first 10 in result near: {lat:57.5, lng: 12.9} // Optional - Sort by proximity to geographic point radius: 50 // Optional - Fetch only nearest within meters from near orderBy: "name" // Optional - Sort by name (possible values are Name, Floor // Building, Venue, Type and RoomId) }, fitBounds: true, // Optional - Suppress display of other // existing locations on the map fitBounds: true, // Optional - Center map around result displayRule: { // Optional - Set a display rule for the resulting content from:16, icon: "http://myiconhost.com/searchresult.png" } } );

  

setMap()

Set the Google map that needs to be MapsIndoors-enabled.

getStyles() : Promise

Get the venue styles available. Using the items from this array, you can set the style (cartography) for the current visible venue. Styles returned will have a format of {displayName:string, folder:string }. The example below illustrates how to use the styles result to manipulate the current venue style.

var googleMap = new google.maps.Map(...) var mapsIndoors = mapsindoors.MapsIndoors({map: googleMap}); mapsIndoors.getStyle().then(function(styles) { // First style will already be shown if (styles.length > 1) { mapsIndoors.setStyle(styles[1].folder); } })

  

reset()

Resets the map to the appearance defined by the provided display rules. Displayed floor, map center and zoom-level will remain untouched.

setFloor( floor:integer )

Sets the current visible floor. This will make visible the corresponding floorplans and the icons on top of it. If the floor index provided does not correlate to any building floor, then the “nearest” floor will be activated. E.g. providing setFloor(4) on a three story building (with floor-indexes 0, 1, 2) will make the topmost floorplan visible (with floor-index 2).

Although floors may have names (“G” for 0, “M1” for 1, “M2” for 2 etc.) you need to set the floor using the index-value.

setStyle( style:string )

Set the style with which the indoor map cartography will be displayed. Most venues will only have one style, in this case, setting the style will not be necessary.

getMap()

Returns the Google Maps object.

getFloor()

Returns current floor index number (integer), e.g. 0 for ground floor, -1 for basement.