@panoramax/web-viewer/docs/tutorials/map_style.md

Panoramax web viewer for geolocated pictures

# 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 `mapstyle` parameter on viewer setup. It should follow the [MapLibre Style specification](https://maplibre.org/maplibre-style-spec/) and be passed as an object, or an URL to such style:

```html
<pnx-viewer
  endpoint="https://api.panoramax.xyz/api"
  mapstyle="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:

```html
<pnx-viewer
  endpoint="https://api.panoramax.xyz/api"
  mapstyle='{
    "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:

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