Map Engine Setup

MapsIndoors is built on top of an external map engine, either Mapbox or Google Maps.

You'll need an Access Token for your chosen map engine with the relevant APIs enabled and a MapsIndoors API key to get started building your own app.

Option 1: Get your Mapbox Access Token​

You need to create and set up a Mapbox Access Token by following the steps in the link below:

Remember to enable relevant scopes on the Mapbox Access Token, such as:

MapsIndoors provides support for both Mapbox GL JS v2 and v3. Our commitment to staying at the forefront of mapping technologies ensure that you have the flexibility to choose the Mapbox version that best align with your requirements.

Mapbox v3

In order to access Mapbox v3 and its options, use mapView: 

const mapView = new mapsindoors.mapView.MapboxV3View({
    accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
    element: document.getElementById('map'),
    center: { lat: 38.8974905, lng: -77.0362723 },
    zoom: 17,
    maxZoom: 25,
    mapsIndoorsTransitionLevel: 17,
    showMapMarkers: false,
    lightPreset: 'dusk'
});

// Then the MapsIndoors SDK is initialized
const mi = new mapsindoors.MapsIndoors({
    mapView: mapView,
    floor: "1",
    labelOptions: {
        pixelOffset: { width: 0, height: 18 }
    }
});

For Mapbox v3, we exposed three new constructor parameters for Mapbox v3:

  • mapsIndoorsTransitionLevel: number- controls transition between Mapbox and MapsIndoors data. Defaults to 17. Setting it to 17 will make a transition between Mapbox and MapsIndoors data between zoom levels 17 to 18.

  • showMapMarkers: boolean - boolean parameter that dictates if Mapbox map markers such as POIs should be shown or not. By not setting this parameter, Mapbox map markers will be hidden as soon as MapsIndoors data is shown.

  • lightPreset: string - sets global light. Can be set to: day, dawn, dusk or night. Defaults to day.

The new Mapbox v3 Standard Style design provides the new design of the map and 3D buildings.

Mapbox' extruded buildings are not visible when MapsIndoors data is shown at the specified zoom level:

You can now choose between 4 different types of light: day, dawn, night or dusk.

You can read more about the latest Mapbox v3 Standard Style here.

Mapbox v2

In order to access Mapbox v2 and its options, use mapView and instantiate it as a new MapsIndoors object:

const mapView = new mapsindoors.mapView.MapboxView({
    accessToken: YOUR_MAPBOX_ACCESS_TOKEN
    element: document.getElementById('map'),
    center: { lat: 38.8974905, lng: -77.0362723 },
    zoom: 17,
    maxZoom: 25,
});

// Then the MapsIndoors SDK is initialized
const mi = new mapsindoors.MapsIndoors({
    mapView: mapView,
    floor: "1",
    labelOptions: {
        pixelOffset: { width: 0, height: 18 }
    }
});

After successful mapView load you should be able to use Mapbox v2:

Option 2: Get your Google Maps API Keys​

To make sure you can use the full feature set of MapsIndoors you'll need to enable these services.

Then you need to create your Google Maps API key by following the link below:

If you apply restrictions to your key, remember to include the Google services listed above.

Get your MapsIndoors API Key​

In order to include MapsIndoors in your app, you need a MapsIndoors API key. If you do not yet have access to your MapsIndoors API key, you can use the demo API key d876ff0e60bb430b8fabb145 to follow the guide.

If you have access to the MapsIndoors CMS, you'll find your MapsIndoors API key as described here.

Last updated