# Map Engine Setup

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`:

```javascript
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.

<figure><img src="https://2554025873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYZLXDaaclvaSK6Q7eigW%2Fuploads%2Fgit-blob-63c8fa2265cbf0a200111e94ca5136204459e366%2FScreenshot%202023-11-14%20at%2013.15.21.png?alt=media" alt=""><figcaption><p>Mapbox v3 Map layout</p></figcaption></figure>

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

<figure><img src="https://2554025873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYZLXDaaclvaSK6Q7eigW%2Fuploads%2Fgit-blob-f8cd436f94cb1a5495f60d876b23bfac278940e9%2FScreenshot%202023-11-14%20at%2013.16.34.png?alt=media" alt=""><figcaption><p>MapsIndoors solution</p></figcaption></figure>

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

<figure><img src="https://2554025873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYZLXDaaclvaSK6Q7eigW%2Fuploads%2Fgit-blob-935f7c94205f0edcdd00de847b7941452be12807%2FScreenshot%202023-11-14%20at%2013.22.52.png?alt=media" alt=""><figcaption><p>Mapbox v3 'dusk' light</p></figcaption></figure>

You can read more about the latest Mapbox v3 Standard Style [here](https://www.mapbox.com/blog/standard-core-style).

## Mapbox V2

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

```javascript
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:

<figure><img src="https://2554025873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYZLXDaaclvaSK6Q7eigW%2Fuploads%2Fgit-blob-88bef5a22fa596d61f05658651d6b057b36bcb9a%2Fimage.png?alt=media" alt=""><figcaption><p>Solution using Mapbox v2</p></figcaption></figure>

[<br>](https://docs.mapsindoors.com/getting-started/web/)
