Sample Code

Displaying Indoor Maps with MapKit JS

Use the Indoor Mapping Data Format (IMDF) to show an indoor map with custom overlays and points of interest in your browser.

Download

Overview

This sample uses the importGeoJSON method from MapKit JS to import data in Indoor Mapping Data Format (IMDF), and render an indoor map in your browser. The sample app demonstrates decoding, rendering, and styling of a small subset of the IMDF feature types and properties.

Use these examples to create your own indoor map with a style that is consistent with your app’s design. You will need to handle feature categories that are specific to your venue, and configure the map style using your own colors, icons, and level picker.

Configure Your Sample Code Project

To run this sample code, you need to:

  • Run a web server to serve the assets in the root directory of the project.

  • Generate a MapKit JS token and copy it into the jwtoken file. For more information, see Creating and Using Tokens with MapKit JS.

See Also

Geographical Features

importGeoJSON

Converts imported GeoJSON data to MapKit JS items.

GeoJSONDelegate

A delegate object that controls a GeoJSON import in order to override default behavior and provide custom style.

ItemCollection

A tree structure containing annotations, overlays, and nested item collection objects.