Coverage map synced with external component

Let's say you want to list all sequences of an user. You can display a standalone map which can be synced with your custom list. Create your Coverage Map web component:

<pnx-coverage-map
  id="coverage"
  class="fullpage"
  endpoint="https://api.panoramax.xyz/api"
/>

Then, access it through JavaScript for further interaction:

// Retrieve component from DOM
var coverage = document.getElementById("coverage");

// Wait for map initial load
coverage.addEventListener("ready", () => {
    // Change visible map area
    coverage.map.fitBounds([0, 0, 180, 90]);

    // Listen to sequence hovered on map
    // You can alternatively use: coverage.addEventListener("map:sequence-hover", ...)
    coverage.map.on("sequence-hover", e => {
        console.log("Hovered sequence", e.seqId);
    });

    // Listen to user clicks on map
    coverage.addEventListener("select", e => {
        console.log("Selected sequence", e.detail.seqId, "picture", e.detail.picId);
    });

    // You can also programatically change selection on map
    coverage.select(
        "c463d190-06b0-47fb-98a8-b4a775a39ad6", // A sequence ID
        "bdea1eb4-4496-46da-a4d5-b22b16e75fa8"  // A picture ID (can be null if unknown)
    );
}, {once: true});

All available interaction are listed in Coverage Map reference.