Display a Simple Map

You can initialize a map located outdoor or indoor by using different parameters. Important: When the map zoom < 14, the indoor source will not be loaded. If you initialize the map with the option venueId/buildingId/floorId/poiId under zoom 14, it cannot select the building. In this case, you should remove the indoor indicated option then call map.selectBuildingById()[or map.selectFloorById() or map.selectVenueById()] in map.renderComplete() callback to select the building manually. Prepare the map container:

<style>
  body {
    margin: 0;
    padding: 0;
  }
  html,
  body,
  #map {
    height: 100%;
  }
</style>
<body>
  <div id="map"></div>
</body>

Outdoor Map

<script>
  // register access with apiKey
  MapxusAuth.registerWithApiKey("your_appId", "your_secret");
  // init maplibre-gl map
  const maplibreMap = new maplibregl.Map({
    container: "map",
    zoom: 16,
    center: [114.174637, 22.319099],
  });
  // init mapxus map
  const map = new MapxusMap.Map({
    map: maplibreMap,
  });
</script>

Indoor Map

<script>
  MapxusAuth.registerWithApiKey("your_appId", "your_secret");
  // init maplibre-gl map
  const maplibreMap = new maplibregl.Map({
    container: "map",
    zoom: 17,
  });
  // init mapxus map
  const map = new MapxusMap.Map({
    map: maplibreMap,
    // Specify one of venueId/buildingId/floorId/poiId to locate.
    // If all are provided, poiId(poiId > floorId > buildingId > venueId > sharedFloorId) will be used.
    venueId: "venueId",
    // buildingId: 'buildingId',
    // floorId: 'floorId',
    // poiId: 'poiId'
    // sharedFloorId: 'sharedFloorId'
  });
</script>

Sample web page:

#Display a Simple Map

#Outdoor Map

#Indoor Map

Display a Simple Map

Outdoor Map

Indoor Map