Change map background style

All components can be configured to use a different map background than the default one. By default, an OpenStreetMap France classic style if offered. Changing the style is done by passing a map-style parameter on viewer setup. It should follow the MapLibre Style specification and be passed as an object, or an URL to such style:

<pnx-viewer
  endpoint="https://api.panoramax.xyz/api"
  map-style="https://my.tiles.provider/basic.json"
/>

Note that we also support PMTiles (for a simpler tile hosting), so your style file can contain vector source defined like this:

<pnx-viewer
  endpoint="https://api.panoramax.xyz/api"
  map-style='{
    "sources": {
      "protomaps": {
          "type": "vector",
          "url": "pmtiles://https://example.com/example.pmtiles",
      }
    }
    ...
  }'
/>

And you can also customize the map attribution, especially if your style JSON doesn't contain any by default, for example:

<pnx-viewer
  endpoint="https://api.panoramax.xyz/api"
  map-style="https://my.tiles.provider/basic.json"
  map-options='{
    "attributionControl": { "customAttribution": "&copy; IGN" }
  }'
/>

Aerial imagery

If you'd like to offer aerial imagery along classic map style, check out Adding aerial imagery documentation.

Complementary backgrounds

If you'd like to have many more basemaps, it's possible using map-options.basemaps parameters. In there, you can add as many basemaps as wanted. You can defined them using either MapLibre Style object or an URL to a style JSON or direct TMS endpoint definition.

Here's a full example of possible definitions:

<pnx-viewer
  id="viewer"
  class="fullpage"
  map-options='{
    basemaps: {
      "JSON Style URL": "https://tile-vect.openstreetmap.fr/styles/topo/style.json",
      "TMS URL": "https://a.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png",
      "TMS URL with maxzoom": "https://a.tile.openstreetmap.fr/osmfr/{z:19}/{x}/{y}.png",
      maplibrestyle: {
        sources: {
            "osmbzh": {
                "type": "raster",
                "tiles": ["https://tile.openstreetmap.bzh/br/{z}/{x}/{y}.png"],
                "tileSize": 256,
                "minzoom": 0,
                "maxzoom": 19,
                "attribution": "&copy; <a href=\"...\">Custom attribution</a>",
            }
        },
        "layers": [
            {
                "id": "osmbzh",
                "type": "raster",
                "source": "osmbzh",
                "metadata": {"name": "Custom title to display"}
            }
        ]
      }
    }
  }'
></pnx-viewer>