maplibre-gl-panoramax

Panoramax street-level imagery on the map

Maintained by Clement Igonet

A MapLibre GL JS plugin for Panoramax, the open, federated street-level imagery platform: coverage layers with filters, picture lookup and sequence navigation, and orientation corrections sent back to the source instance.

Live demo

maplibre-gl-panoramax running on MapLibre GL JS in your browser

Loading the map…

Demo code

import { addPanoramaxLayers, onPictureClick, getPicture } from "maplibre-gl-panoramax";
import type { PluginDemo } from "../types";

export default {
  center: [2.3635, 48.8674], // Place de la République, Paris
  zoom: 17,
  run({ map, maplibregl }) {
    // Panoramax street-level imagery coverage: sequence lines, and a dot per photo from zoom 17.
    addPanoramaxLayers(map);

    // Click a dot to see that photo.
    onPictureClick(map, async (id: string) => {
      const picture = await getPicture(id);
      if (!picture?.assets.thumb) return;
      new maplibregl.Popup({ maxWidth: "320px" })
        .setLngLat(map.getCenter())
        .setHTML(`<img src="${picture.assets.thumb}" alt="Panoramax photo" style="width: 100%">`)
        .addTo(map);
    });
  },
} satisfies PluginDemo;