Install Mapxus Map

Installation

@mapxus/mapxus-map depends on specific versions of maplibre-gl and @mapxus/mapxus-auth (API Doc). Make sure to use the compatible versions when installing.

Import in Browser

<!-- dependent maplibre-gl -->
<script src="https://unpkg.com/maplibre-gl@5.2.0/dist/maplibre-gl.js"></script>
<link
  href="https://unpkg.com/maplibre-gl@5.2.0/dist/maplibre-gl.css"
  rel="stylesheet"
/>
<!-- mapxus auth -->
<script src="https://web-sdk.mapxus.com/prod/mapxus-auth-0.1.2.js"></script>
<!-- mapxus map -->
<script src="https://web-sdk.mapxus.com/prod/mapxus-map-10.1.0.js"></script>
<link
  href="https://web-sdk.mapxus.com/prod/mapxus-map-10.2.1.css"
  rel="stylesheet"
/>

Tips: If you import by script tag, you can get the version info above or in Mapxus map js sample web.

Using npm, pnpm, or yarn

$ npm install maplibre-gl@5.2.0 @mapxus/mapxus-auth@0.1.2 @mapxus/mapxus-map@10.2.1 --save
or
$ pnpm add maplibre-gl@5.2.0 @mapxus/mapxus-auth@0.1.2 @mapxus/mapxus-map@10.2.1
or
$ yarn add maplibre-gl@5.2.0 @mapxus/mapxus-auth@0.1.2 @mapxus/mapxus-map@10.2.1

import "maplibre-gl/dist/maplibre-gl.css";
import "@mapxus/mapxus-map/style";
import maplibregl from "maplibre-gl";
import { registerWithApiKey } from "@mapxus/mapxus-auth";
import * as MapxusMap from "@mapxus/mapxus-map";

Usage

Before using the map, you must have a pair of appId and secret. Please contact us to apply for if you haven't had one yet.

<!doctype html>
<html>
  <head>
    <title>Init Map By Building ID</title>
    <meta charset="utf-8" />
    <link
      href="https://unpkg.com/maplibre-gl@5.2.0/dist/maplibre-gl.css"
      rel="stylesheet"
    />
    <link
      href="https://web-sdk.mapxus.com/prod/mapxus-map-10.2.1.css"
      rel="stylesheet"
    />
    <style>
      html,
      body,
      #map {
        height: 100%;
      }

      body {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>

    <!-- SDK scripts -->
    <script src="https://unpkg.com/maplibre-gl@5.2.0/dist/maplibre-gl.js"></script>
    <script src="https://web-sdk.mapxus.com/prod/mapxus-auth-0.1.2.js"></script>
    <script src="https://web-sdk.mapxus.com/prod/mapxus-map-10.2.1.js"></script>

    <script>
      const { maplibregl, MapxusAuth, MapxusMap } = window;
      // register mapxus auth
      MapxusAuth.registerWithApiKey("your_appId", "your_secret");

      // create map view
      const maplibreMap = new maplibregl.Map({
        container: "map",
        zoom: 17,
      });
      // init mapxus map
      const map = new MapxusMap.Map({
        map: maplibreMap,
        buildingId: "tsuenwanplaza_hk_369d01",
      });
      // mapxus map loaded listener
      map.renderComplete(function () {});
    </script>
  </body>
</html>

Let’s try to build your first Mapxus Map

#Install Mapxus Map

#Installation

#Import in Browser

#Using npm, pnpm, or yarn

#Usage

Install Mapxus Map

Installation

Import in Browser

Using npm, pnpm, or yarn

Usage