Web v4 - Getting Started - Show a Map - Manually - MapBox

This snippet shows how to load a Mapbox map with MapsIndoors.

by MapsPeople

HTML

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MapsIndoors</title>
  <script src="https://app.mapsindoors.com/mapsindoors/js/sdk/4.21.4/mapsindoors-4.21.4.js.gz?apikey=d876ff0e60bb430b8fabb145"></script>
  <script src='https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.js'></script>
  <link href='https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
+ <div id="map" style="width: 600px; height: 600px;"></div>
  <script src="main.js"></script>
</body>
</html>

JavaScript

// main.js

const mapViewOptions = {
  accessToken: 'pk.eyJ1IjoibWFwc3Blb3BsZSIsImEiOiJjbHV0cWo2MGUwMDA2MmtyeXV0cmZpcXQ4In0.iOwpJY4KqHVQoxA1UPEvgQ',
  element: document.getElementById('map'),
  center: { lat: 38.8974905, lng: -77.0362723 }, // The White House
  zoom: 17,
  maxZoom: 22,
};

const mapViewInstance = new mapsindoors.mapView.MapboxView(mapViewOptions);
const mapsIndoorsInstance = new mapsindoors.MapsIndoors({ mapView: mapViewInstance });
const mapboxInstance = mapViewInstance.getMap();

// Floor Selector
const floorSelectorElement = document.createElement('div');
new mapsindoors.FloorSelector(floorSelectorElement, mapsIndoorsInstance);
mapboxInstance.addControl({ onAdd: function () { return floorSelectorElement }, onRemove: function () { } });