<!--
{
  "documentType" : "article",
  "framework" : "MapKitJS",
  "identifier" : "/documentation/MapKitJS/displaying-indoor-maps-with-mapkit-js",
  "metadataVersion" : "0.1.0",
  "role" : "sampleCode",
  "title" : "Displaying Indoor Maps with MapKit JS"
}
-->

# 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.

## Overview

This sample uses the [`importGeoJSON()`](/documentation/MapKitJS/mapkit/importGeoJSON) method from MapKit JS to import data in [Indoor Mapping Data Format (IMDF)](https://register.apple.com/resources/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 can handle feature categories specific to your venue, and configure the map style using your own colors, icons, and level picker.

> Note: This sample code project is associated with WWDC 2019 session [241: Adding Indoor Maps to your App and Website](https://developer.apple.com/wwdc19/241).

### Configure Your Sample Code Project

To run this sample code:

- Run a web server to serve the assets in a directory for the project.
- Host the directory `Dinoseum`, and its content, at the root of your web server.
- Generate a MapKit JS token and copy it into the `jwtoken` file within the `Dinoseum` directory. For more information, see <doc://com.apple.documentation/documentation/AppleMapsServerAPI/creating-and-using-tokens-with-maps-server-api>.

---

Copyright &copy; 2026 Apple Inc. All rights reserved. | [Terms of Use](https://www.apple.com/legal/internet-services/terms/site.html) | [Privacy Policy](https://www.apple.com/privacy/privacy-policy)