Share layer between maps

Display multiple maps that share the same layer.

Inspector

Info

Giro3D version

THREE.js version

OpenLayers version

View

Type

FOV

Automatic plane computation

Far plane

Near plane

Max far plane

Min near plane

Width (pixels)

Height (pixels)

Position

Target

DrawTool

color

Processing

Frame duration (ms)

Picking duration (µs)

Request queue

Memory

Cache

Enable cache

Default TTL (seconds)

Capacity (MB)

Capacity (entries)

Entries

Memory usage (approx)

Fetcher

Pending requests

Memory tracker

Entities

index.js

import { MapControls } from "three/examples/jsm/controls/MapControls.js";

import Extent from "@giro3d/giro3d/core/geographic/Extent.js";
import Instance from "@giro3d/giro3d/core/Instance.js";
import ColorLayer from "@giro3d/giro3d/core/layer/ColorLayer.js";
import Map from "@giro3d/giro3d/entities/Map.js";
import Inspector from "@giro3d/giro3d/gui/Inspector.js";
import StadiaMaps from "ol/source/StadiaMaps.js";
import TiledImageSource from "@giro3d/giro3d/sources/TiledImageSource.js";

const extent = new Extent(
  "EPSG:3857",
  -20037508.342789244,
  20037508.342789244,
  -20037508.342789244,
  20037508.342789244,
);

const instance = new Instance({
  target: "view",
  crs: extent.crs,
  backgroundColor: 0x0a3b59,
});

// Adds an TMS imagery layer
const layer = new ColorLayer({
  name: "osm",
  source: new TiledImageSource({
    source: new StadiaMaps({ layer: "stamen_watercolor", wrapX: false }),
  }),
});

let index = 0;
const promises = [];
for (const ex of extent.split(8, 8)) {
  const mapExtent = ex.withRelativeMargin(-0.05);
  // Creates a map that will contain the layer
  const map = new Map({ extent: mapExtent });
  map.name = `${index++}`;

  instance.add(map);

  const promise = map.addLayer(layer).catch((e) => console.error(e));
  promises.push(promise);
}

Promise.allSettled(promises).then(() => {
  instance.view.camera.position.set(0, 0, 25000000);

  const controls = new MapControls(instance.view.camera, instance.domElement);
  instance.view.setControls(controls);

  Inspector.attach("inspector", instance);
});

index.html

<!doctype html>
<html lang="en">
  <head>
    <title>Share layer between maps</title>
    <meta charset="UTF-8" />
    <meta name="name" content="share_layers_between_maps" />
    <meta
      name="description"
      content="Display multiple maps that share the same layer."
    />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="icon" href="https://giro3d.org/images/favicon.svg" />
    <link
      href="https://giro3d.org/assets/bootstrap-custom.css"
      rel="stylesheet"
    />
    <script src="https://giro3d.org/assets/bootstrap.bundle.min.js"></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://giro3d.org/latest/examples/css/example.css"
    />
  </head>

  <body>
    <div id="view" class="m-0 p-0 w-100 h-100"></div>
    <div
      id="inspector"
      class="position-absolute top-0 start-0 mh-100 overflow-auto"
    ></div>

    <script type="module" src="index.js"></script>
    <script>
      /* activate popovers */
      const popoverTriggerList = [].slice.call(
        document.querySelectorAll('[data-bs-toggle="popover"]'),
      );
      popoverTriggerList.map(
        // bootstrap is used as script in the template, disable warning about undef
        // eslint-disable-next-line no-undef
        (popoverTriggerEl) =>
          new bootstrap.Popover(popoverTriggerEl, {
            trigger: "hover",
            placement: "left",
            content: document.getElementById(
              popoverTriggerEl.getAttribute("data-bs-content"),
            ).innerHTML,
            html: true,
          }),
      );
    </script>
  </body>
</html>

package.json

{
    "name": "share_layers_between_maps",
    "dependencies": {
        "@giro3d/giro3d": "0.42.5"
    },
    "devDependencies": {
        "vite": "^3.2.3"
    },
    "scripts": {
        "start": "vite",
        "build": "vite build"
    }
}