# Beeview Map SDK examples

> SDK version: **2.1.1**
>
> Live examples are served by the local demo server under `demo/examples/`. See [demo/SETUP.md](../demo/SETUP.md) for local setup instructions.

---

## Table of contents

1. [SDK environment check](#sec-1)
2. [Authentication](#sec-2)
3. [Initialize Viewer](#sec-3)
   - [Destroy Viewer (SPA / teardown)](#sec-3-destroy)
4. [Load indoor imagery (`searchImageByFloorId`)](#sec-4)
5. [Listen for node and bearing changes](#sec-5)
6. [Move to a node or coordinates](#sec-6)
7. [Markers](#sec-7)
  - [SimpleMarker](#71-simplemarker)
  - [ArrowMarker](#72-arrowmarker)
  - [CircleMarker](#73-circlemarker)
  - [DotMarker](#74-dotmarker)
  - [RibbonMarker](#75-ribbonmarker)
8. [Popup](#sec-8)
9. [Visual navigation (RibbonMarker + route)](#sec-9)
10. [Integrate with MapxusMap](#sec-10)

---

<a id="sec-1"></a>
## 1. SDK environment check

Before creating a `Viewer`, check whether the browser supports WebGL (or a fallback render path).

**Applies to:** 2.1.1

### CDN

```html
<script src="https://web-sdk.mapxus.co.jp/prod/mapxus-visual-2.1.1.js"></script>
<link href="https://web-sdk.mapxus.co.jp/prod/mapxus-visual-2.1.1.css" rel="stylesheet" />
```

```js
// Prefer: full WebGL path
const supported = MapxusVisual.isSupported();

// Fallback path (no WebGL)
const fallbackSupported = MapxusVisual.isFallbackSupported();

if (supported) {
    console.log("Full WebGL mode is available");
} else if (fallbackSupported) {
    console.log("Fallback rendering is available (no WebGL)");
} else {
    console.error("This environment does not support the Beeview SDK");
}
```

### npm

```bash
npm install @mapxus/mapxus-visual
```

```js
import { isSupported, isFallbackSupported } from "@mapxus/mapxus-visual";
import "@mapxus/mapxus-visual/dist/mapxus-visual.css";

const supported = isSupported();
const fallbackSupported = isFallbackSupported();
```

---

<a id="sec-2"></a>
## 2. Authentication

Register credentials with Mapxus Auth **before** creating a `Viewer` or issuing data requests.

**Applies to:** 2.1.1

> **Credentials:** Create `demo/.env` from the template in [demo/SETUP.md](../demo/SETUP.md). Set `MAPXUS_ACTIVE_ENV` for the default environment and provide `MAPXUS_AUTH_APP_ID_<ENV>` / `MAPXUS_AUTH_SECRET_<ENV>` per environment. The local demo server injects the active environment credentials at runtime, so no secrets are committed to the repository.

### CDN

```html
<!-- Dependency: 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" />

<!-- Auth SDK -->
<script src="https://web-sdk.mapxus.co.jp/prod/mapxus-auth-0.1.1.js"></script>

<!-- Beeview Map SDK -->
<script src="https://web-sdk.mapxus.co.jp/prod/mapxus-visual-2.1.1.js"></script>
<link href="https://web-sdk.mapxus.co.jp/prod/mapxus-visual-2.1.1.css" rel="stylesheet" />

<!-- Local demo auth bootstrap -->
<script src="../scripts/mapxus_auth_bootstrap.js"></script>
```

```js
const visualEnv =
    window.MAPXUS_ACTIVE_VISUAL_ENV ||
    window.MAPXUS_ACTIVE_ENV ||
    "jp-prod";

// mapxus_auth_bootstrap.js reads ?env= / #env=, injects the active
// credentials from demo/.env, and registers MapxusAuth before Viewer init.
```

### npm

```js
import MapxusAuth from "@mapxus/mapxus-auth";

MapxusAuth.registerWithApiKey("YOUR_APP_ID", "YOUR_SECRET");
```

---

<a id="sec-3"></a>
## 3. Initialize Viewer

`Viewer` is the main entry point: it renders indoor street-view into a DOM container.

**Applies to:** 2.1.1

### HTML container

```html
<div id="beeview" style="width: 100%; height: 400px;"></div>
```

### CDN

```js
const beeview = new MapxusVisual.Viewer({
    // ── Required ─────────────────────────────────────────────────────
    container: "beeview",           // DOM element id (required)

    // ── Optional: initial image ────────────────────────────────────
    imageId: undefined,             // Initial image node key (optional, string)

    // ── Optional: image quality ─────────────────────────────────────
    baseImageSize: undefined,       // Base image size, ImageSize enum, e.g. MapxusVisual.ImageSize.Size640
    basePanoramaSize: undefined,    // Panorama size, e.g. MapxusVisual.ImageSize.Size1024
    maxImageSize: undefined,        // Max loaded size, e.g. MapxusVisual.ImageSize.Size2048

    // ── Optional: render mode ──────────────────────────────────────
    renderMode: undefined,          // RenderMode.Letterbox (default) or RenderMode.Fill

    // ── Optional: sprite ───────────────────────────────────────────
    sprite: undefined,              // Custom sprite sheet URL (optional, string)

    // ── Optional: auth-related (often filled by MapxusAuth) ─────────
    bundleId: undefined,            // Bundle id (optional, string)
    packageName: undefined,         // Package name (optional, string)
    sha1: undefined,                // SHA1 (optional, string)

    // ── Optional: subcomponents ────────────────────────────────────
    component: {
        marker: true,               // Marker component (add markers)
        popup: true,                // Popup component
        direction: false,           // Direction arrows
        navigation: true,           // Navigation (keyboard / mouse)
        sequence: true,             // Sequence navigation
        keyboard: true,             // Keyboard navigation
        mouse: true,                // Mouse interaction
        bearing: true,              // Compass / bearing UI
        cache: true,                // Image prefetch cache
        cover: true,                // Cover overlay on startup
        loading: true,              // Loading indicator
        background: true,           // Background layer
        image: true,                // Image layer
        imagePlane: true,           // Image plane rendering
        debug: false,               // Debug overlay (default false)
        route: false,               // Route component
        tag: false,                 // Tag component
        slider: false,              // Slider component
        path: false,                // Path dots
    },
});

// Disable path-node preload (0 = no white-dot prefetch, fewer requests)
beeview.setPathPreloadOptions({ count: 0 });

// Or: preload count + search radius in meters
// beeview.setPathPreloadOptions({ count: 9, distance: 20 });
```

### npm

```js
import { Viewer, ImageSize, RenderMode } from "@mapxus/mapxus-visual";
import "@mapxus/mapxus-visual/dist/mapxus-visual.css";

const beeview = new Viewer({
    container: "beeview",
    component: {
        marker: true,
        popup: true,
        navigation: true,
    },
});
```

<a id="sec-3-destroy"></a>
### Destroy Viewer (SPA / teardown)

Call `destroy()` when the viewer leaves the page (route change, modal close, component unmount). It releases WebGL, removes SDK-injected DOM, unsubscribes internal streams, and detaches input listeners. **Do not** call other methods on the same instance after `destroy()`.

The shared Mapxus auth HTTP session is **not** cleared by default (safe when multiple viewers or other SDKs may still run). Pass `{ clearSharedHttpSession: true }` only when this viewer is the sole consumer and you intend to reset global auth state.

```js
beeview.destroy();

// Single-viewer page only — also tears down shared HTTPSession via Context.clear()
// beeview.destroy({ clearSharedHttpSession: true });
```

React (`useEffect` cleanup):

```tsx
useEffect(() => {
    const v = new Viewer({ container: "beeview", /* ... */ });
    return () => {
        v.destroy();
    };
}, [/* deps */]);
```

Vue 3:

```js
import { onUnmounted } from "vue";

onUnmounted(() => {
    beeview.destroy();
});
```

---

<a id="sec-4"></a>
## 4. Load indoor imagery

`searchImageByFloorId` returns all image nodes for a floor—useful to plot clickable street-view entry points on a 2D map.

**Applies to:** 2.1.1

```js
const floorId = "9b7e40e7862d4b1cb174ad4661b175e1"; // target floor id

// Returns Promise<IQueryBuilding[]>
beeview.searchImageByFloorId(floorId).then((queryBuildings) => {
    queryBuildings.forEach((queryBuilding) => {
        const { key, images, floor, building } = queryBuilding;

        // `images` are all nodes in that sequence
        images.forEach((node) => {
            console.log("Node coordinates:", node.l.lat, node.l.lon);
            console.log("Node key:", node.key);
            console.log("Floor code:", node.floor?.code);
        });
    });
});

// Optional snapshotKey filters to a specific snapshot
const snapshotKey = "some-snapshot-key";
beeview.searchImageByFloorId(floorId, snapshotKey).then((data) => {
    console.log("Images with snapshot filter:", data);
});
```

---

<a id="sec-5"></a>
## 5. Listen for node and bearing changes

Use the event API to react when the user moves through the panorama or rotates the view—typical for syncing a 2D basemap.

**Applies to:** 2.1.1

```js
// Fires when the user navigates to another image node
beeview.on(MapxusVisual.Viewer.nodechanged, function (node) {
    // `node` is a Node with full location metadata
    const { lat, lon } = node.originalLatLon; // image lat/lon
    const key = node.key;                     // unique image key

    // Sync 2D map: pan to current street-view position
    maplibreMap.panTo([lon, lat]);

    console.log("Current node key:", key, "coordinates:", lat, lon);
});

// Fires when bearing changes (user drags to rotate)
beeview.on(MapxusVisual.Viewer.bearingchanged, function (bearing) {
    // bearing is degrees 0–360; 0 = north
    console.log("Current bearing (deg):", bearing);

    // Example: rotate a 2D map icon to match
    // mapIcon.setRotation(bearing);
});
```

---

<a id="sec-6"></a>
## 6. Move to a node or coordinates

Two patterns: jump by image key, or snap to the nearest node from lat/lon + floor id.

**Applies to:** 2.1.1

### Move by image key

```js
const imageKey = "abc123xyz"; // target image key
const snapshotKey = undefined; // optional snapshot key; omit for default

// Returns Promise<Node>
beeview.moveToKey(imageKey, snapshotKey).then(function (node) {
    console.log("Moved to node:", node.key);
    // Optional initial bearing: normalized 0.0–1.0 maps to 0–360°
    beeview.setBearing(0.5);
});

// Call resize after toggling visibility so the canvas matches the container
beeview.resize();
```

### Move near lat/lon + floor

```js
const lat = 22.3706;
const lon = 114.1083;
const floorId = "9b7e40e7862d4b1cb174ad4661b175e1";
const maxDistance = 5; // search radius in meters

// Returns Promise<Node | null>
beeview.moveCloseTo(lat, lon, floorId, maxDistance).then((node) => {
    if (!node || !node.latLon) {
        console.warn("No image node found within the search radius");
        return;
    }
    console.log("Snapped to node:", node.key, "at:", node.latLon);
});
```

---

<a id="sec-7"></a>
## 7. Markers

Use `MarkerComponent` to add 3D markers in street-view space. Enable `component.marker` on the `Viewer`.

**Applies to:** 2.1.1

```js
// Marker component (requires component.marker: true on the Viewer)
const markerComponent = beeview.getComponent("marker");
```

### 7.1 SimpleMarker

Interactive “ice cream” marker; the ball can receive clicks when `interactive: true`.

```js
const simpleMarker = new MapxusVisual.SimpleMarker(
    "marker-simple-01",          // Unique marker id (string, required)
    { lat: 22.3706, lon: 114.1083 }, // Geo position (ILatLon, required)
    {
        // ── Appearance (all optional; defaults shown for reference) ──
        color: 0xff0000,         // Cone color: hex number or CSS string (default: white)
        opacity: 0.8,            // Overall opacity 0.0–1.0 (default: 1.0)
        radius: 1.0,             // Cone + ball scale (default: 1.0)
        ballColor: 0x4a90d9,     // Ball color (default: same as color)
        ballOpacity: 1.0,        // Ball opacity (default: 1.0)
        interactive: true,       // Ball receives clicks (default: false)
    },
);

markerComponent.add([simpleMarker]);

markerComponent.on("markerclick", (event) => {
    console.log("Marker clicked:", event.marker.id);
});

markerComponent.remove(["marker-simple-01"]);
```

### 7.2 ArrowMarker

Non-interactive arrow marker for direction and path nodes.

```js
const arrowMarker = new MapxusVisual.ArrowMarker(
    "marker-arrow-01",
    { lat: 22.3706, lon: 114.1083 },
    {
        interactive: false,      // ArrowMarker is always non-interactive; field ignored (default false)
        color: 0x4a90d9,         // Arrow color (default: white)
        opacity: 1.0,            // Opacity 0.0–1.0 (default: 1.0)
        radius: 1.0,             // Size scale (default: 1.0)
    },
);

markerComponent.add([arrowMarker]);
```

### 7.3 CircleMarker

Non-interactive flat circle on the ground plane.

```js
const circleMarker = new MapxusVisual.CircleMarker(
    "marker-circle-01",
    { lat: 22.3706, lon: 114.1083 },
    {
        color: 0x52c41a,         // Fill color (default: white)
        opacity: 0.9,            // Opacity 0.0–1.0 (default: 1.0)
        radius: 1.2,             // Radius scale (default: 1.0)
    },
);

markerComponent.add([circleMarker]);
```

### 7.4 DotMarker

Non-interactive double-ring dot—good for “you are here”.

```js
const dotMarker = new MapxusVisual.DotMarker(
    "marker-dot-01",
    { lat: 22.3706, lon: 114.1083 },
    {
        offsetFactor: 0.0,       // Depth offset factor (default 0; positive pulls forward)
        outerColor: 0xfaad14,    // Outer ring color (default: white)
    },
);

markerComponent.add([dotMarker]);
```

### 7.5 RibbonMarker

Non-interactive ribbon along a polyline on the ground: gradient transparency toward the far end and animated chevrons—use for visual route guidance.

```js
const startLatLon = { lat: 22.3706, lon: 114.1083 };

// Waypoints: length >= 1; last point is the ribbon tip
const waypoints = [
    { lat: 22.3708, lon: 114.1085 },
    { lat: 22.3710, lon: 114.1087 },
    { lat: 22.3712, lon: 114.1090 },
];

const ribbonMarker = new MapxusVisual.RibbonMarker(
    "ribbon-nav-01",     // Unique id (string, required)
    startLatLon,         // Start ILatLon (required)
    waypoints,           // Waypoints ILatLon | ILatLon[] (required)
    {
        color: 0x4a90d9,         // Ribbon fill (default blue)
        chevronColor: 0xffffff,  // Chevron color (default white)
        opacity: 0.75,           // Overall opacity; stronger near camera (default 0.75)
        width: 1.2,              // Width in scene units (default 1.0)
        maxLength: 20,           // Max length in meters; clamp beyond (default unlimited)

        animated: true,          // Animate chevrons (default true)
        animationSpeed: 0.2,     // Scroll speed; higher = faster (default 0.2)
    },
);

markerComponent.add([ribbonMarker]);

function updateRibbon(currentLatLon, remainingPathCoords) {
    if (markerComponent.has("ribbon-nav-01")) {
        markerComponent.remove(["ribbon-nav-01"]);
    }
    if (!remainingPathCoords || remainingPathCoords.length < 2) return;

    // Route API often returns [lng, lat] pairs
    const newWaypoints = remainingPathCoords.slice(1).map(
        ([lng, lat]) => ({ lat, lon: lng })
    );

    const updated = new MapxusVisual.RibbonMarker(
        "ribbon-nav-01",
        { lat: currentLatLon.lat, lon: currentLatLon.lon },
        newWaypoints,
        {
            color: 0x4a90d9,
            chevronColor: 0xffffff,
            opacity: 0.75,
            width: 1.2,
            maxLength: 20,
            animated: true,
            animationSpeed: 0.2,
        },
    );
    markerComponent.add([updated]);
}
```

---

<a id="sec-8"></a>
## 8. Popup

`Popup` shows HTML anchored to a point in street view. Enable `component.popup: true`.

**Applies to:** 2.1.1

```js
const popupComponent = beeview.getComponent("popup");

const popup = new MapxusVisual.Popup({
    capturePointer: true,        // Capture pointer events so HTML is interactive (default true)

    clean: false,                // “Clean” style: no default chrome (default false)
    opacity: 1.0,                // Overall opacity 0.0–1.0 (default 1.0)

    position: MapxusVisual.Alignment.Bottom,
    // Anchor relative to target: Alignment enum
    // Bottom / BottomLeft / BottomRight / Center / Left / Right / Top / TopLeft / TopRight
    // Default Bottom (popup grows upward from anchor)

    float: MapxusVisual.Alignment.Center,
    // Content float when larger than anchor (Alignment), default Center

    offset: 10,
    // Offset: number (pixels, all sides) or IPopupOffset per alignment, e.g.
    // { bottom: [0,-10], bottomLeft: [10,-10], ... }
});

popup.setBasicPoint([0.5, 0.5]); // or normalized screen coords

popup.setHTML("<div style='padding:8px;'><b>Gate A</b><br/>Level 1</div>");

popupComponent.add([popup]);

popupComponent.remove([popup]);
```

---

<a id="sec-9"></a>
## 9. Visual navigation (RibbonMarker + route)

Fetch a walking route, then draw a `RibbonMarker` ribbon in street view. Core flow from `demo/examples/arrow_ribbon_nav.html`.

**Applies to:** 2.1.1

> **Demo note:** In `demo/examples/arrow_ribbon_nav.html`, the local demo server resolves Auth credentials from `demo/.env`, serves env-specific Auth / Map SDK packages from `/vendor/*`, and the page picks the active environment from `?env=` or `#env=` via `mapxus_auth_bootstrap.js`. The HTML/JS below uses fixed CDN URLs only as a simplified SDK usage illustration. CDN script URLs in this file are synced by `npm run docs:generate` from the current git branch and `package.json` devDependencies.

```html
<!-- Load order example; full demo: arrowRibbonNav.html in repo -->
<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" />
<script src="https://web-sdk.mapxus.co.jp/prod/mapxus-auth-0.1.1.js"></script>
<script src="https://web-sdk.mapxus.co.jp/prod/mapxus-map-10.1.0.js"></script>
<link href="https://web-sdk.mapxus.co.jp/prod/mapxus-map-10.1.0.css" rel="stylesheet" />
<script src="https://web-sdk.mapxus.co.jp/prod/mapxus-visual-2.1.1.js"></script>
<link href="https://web-sdk.mapxus.co.jp/prod/mapxus-visual-2.1.1.css" rel="stylesheet" />
```

```js
const visualEnv =
    window.MAPXUS_ACTIVE_VISUAL_ENV ||
    window.MAPXUS_ACTIVE_ENV ||
    "jp-prod";

const beeview = new MapxusVisual.Viewer({
    __bvVisualEnv: visualEnv,
    container: "beeview",
    component: {
        marker: true,   // Required for RibbonMarker
        direction: true, // Optional: next-node direction arrows
    },
});
beeview.setPathPreloadOptions({ count: 0 }); // fewer background requests

const RIBBON_ID = "ribbon-arrow-nav";

function updateRibbonMarker(currentLatLon, pathCoords) {
    const mc = beeview.getComponent("marker");

    if (mc.has(RIBBON_ID)) {
        mc.remove([RIBBON_ID]);
    }
    if (!pathCoords || pathCoords.length < 2) return;

    const waypoints = pathCoords.slice(1).map(([lng, lat]) => ({ lat, lon: lng }));

    const ribbon = new MapxusVisual.RibbonMarker(
        RIBBON_ID,
        { lat: currentLatLon.lat, lon: currentLatLon.lon },
        waypoints,
        {
            color: 0x4a90d9,
            chevronColor: 0xffffff,
            opacity: 0.75,
            width: 1.2,
            maxLength: 20,
            animated: true,
            animationSpeed: 0.2,
        },
    );
    mc.add([ribbon]);
}

let currentPathCoords = null;

beeview.on(MapxusVisual.Viewer.nodechanged, (node) => {
    if (currentPathCoords) {
        updateRibbonMarker(node.originalLatLon, currentPathCoords);
    }
});

async function startNavigation(fromPoint, toPoint, floorId) {
    const routeService = new MapxusMap.RouteService();

    const res = await routeService.search({
        points: [
            { lat: fromPoint.lat, lon: fromPoint.lon, floorId: fromPoint.floorId },
            { lat: toPoint.lat, lon: toPoint.lon, floorId: toPoint.floorId },
        ],
        vehicle: "foot",   // optional: wheelchair / escalator / emergency
        locale: "en",
    });

    const path = res.result.paths[0];
    const coordinates = path.points.coordinates; // [[lng, lat], ...]

    currentPathCoords = coordinates;

    beeview.moveCloseTo(fromPoint.lat, fromPoint.lon, floorId, 5).then((node) => {
        if (!node || !node.latLon) return;
        updateRibbonMarker(node.latLon, coordinates);

        const directionComponent = beeview.getComponent("direction");
        const lastCoord = coordinates[coordinates.length - 1];
        directionComponent.setCustomPoints([{ lngLat: lastCoord }]);
    });
}
```

---

<a id="sec-10"></a>
## 10. Integrate with MapxusMap

Embed Beeview in a MapxusMap indoor map: tap a map node to open matching street view; pan the map when the user moves in the viewer. Pattern from `demo/examples/integrate_mapxus_map.html`.

**Applies to:** 2.1.1

```html
<!-- Layout: large map + small picture-in-picture street view -->
<div id="map" style="width: 100%; height: 100vh;"></div>
<div id="beeview" class="min" style="
    width: 320px; height: 240px;
    position: absolute; bottom: 20px; left: 20px;
    border-radius: 6px; z-index: 99;
    display: none
"></div>
```

```js
const visualEnv =
    window.MAPXUS_ACTIVE_VISUAL_ENV ||
    window.MAPXUS_ACTIVE_ENV ||
    "jp-prod";

const maplibreMap = new maplibregl.Map({
    container: "map",
    zoom: 19,
});

const map = new MapxusMap.Map({
    map: maplibreMap,
    floorId: "9b7e40e7862d4b1cb174ad4661b175e1", // initial floor
});

const beeview = new MapxusVisual.Viewer({
    __bvVisualEnv: visualEnv,
    container: "beeview",
    component: {
        marker: false,
        navigation: true, // click white dots to walk
    },
});
beeview.setPathPreloadOptions({ count: 9, distance: 20 }); // preload 9 nodes within 20 m

map.renderComplete(function () {
    const buildingId = "vivocity_foshan_d3fmv9";
    const floorId    = "9b7e40e7862d4b1cb174ad4661b175e1";
    const floorCode  = "1";

    beeview.searchImageByFloorId(floorId).then((queryBuildings) => {
        const allImages = queryBuildings.flatMap((qb) => qb.images);

        maplibreMap.addSource("visual-points", {
            type: "geojson",
            data: {
                type: "FeatureCollection",
                features: allImages.map((img) => ({
                    type: "Feature",
                    geometry: { type: "Point", coordinates: [img.l.lon, img.l.lat] },
                    properties: { key: img.key, floorCode: img.floor?.code },
                })),
            },
        });
        maplibreMap.addLayer({
            id: "visual-point-layer",
            type: "circle",
            source: "visual-points",
            paint: {
                "circle-color": "rgb(53, 175, 109)",
                "circle-opacity": 0.6,
            },
            filter: ["==", "floorCode", floorCode],
        });

        maplibreMap.on("click", "visual-point-layer", (event) => {
            const key = event.features[0].properties.key;
            document.getElementById("beeview").style.display = "block";

            beeview.moveToKey(key).then((node) => {
                console.log("Opened street-view node:", node.key);
            });
            beeview.resize();
        });
    });

    map.onMapChangeListener(function ({ building, floor }) {
        const newFloorCode = floor?.code;
        if (newFloorCode && maplibreMap.getLayer("visual-point-layer")) {
            maplibreMap.setFilter("visual-point-layer", ["==", "floorCode", newFloorCode]);
        }
    });
});

beeview.on(MapxusVisual.Viewer.nodechanged, function (node) {
    const { lat, lon } = node.originalLatLon;
    maplibreMap.panTo([lon, lat]);
});

function toggleViewSize() {
    const $beeview = document.getElementById("beeview");
    const rect = document.body.getBoundingClientRect();
    const isMin = $beeview.style.width === "320px";

    if (isMin) {
        $beeview.style.width = rect.width + "px";
        $beeview.style.height = rect.height + "px";
    } else {
        $beeview.style.width = "320px";
        $beeview.style.height = "240px";
    }
    maplibreMap.resize();
    beeview.resize();
}
```
