gpx.studio/website/src/lib/docs/ca/map-controls.mdx

---
title: Controls del mapa
---

<script>
    import { Plus, Minus, Diff, Compass, Search, LocateFixed, PersonStanding, Layers } from '@lucide/svelte';
    import DocsNote from '$lib/components/docs/DocsNote.svelte';
    import DocsLayers from '$lib/components/docs/DocsLayers.svelte';
</script>

# { title }

Els controls del mapa estan situats a la banda dreta de la interfície.
Aquests controls et permetran navegar pel mapa, apropar-te, allunyar-te i canviar entre diferents estils de mapa.

### <Diff size="16" class="inline-block" style="margin-bottom: 2px" /> Navegació en el mapa

Els controls de la part superior permeten apropar <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> i allunyar<Minus size="16" class="inline-block" style="margin-bottom: 2px" />, i canviar l'orientació i la inclinació del mapa <Compass size="16" class="inline-block" style="margin-bottom: 2px" />.

<DocsNote>

Per controlar l'orientació i inclinació del mapa, pots arrossegar el mapa mentre prems <kbd>Ctrl</kbd>.

</DocsNote>

### <Search size="16" class="inline-block" style="margin-bottom: 2px" /> Barra de cerca

Pots utilitzar la barra de cerca per buscar una direcció i navegar cap a ella sobre el mapa.

### <LocateFixed size="16" class="inline-block" style="margin-bottom: 2px" /> Botó d'ubicació

El botó d'ubicació centra el mapa en la ubicació actual.

<DocsNote>

Això només funciona si permets al teu navegador i a <b>gpx.studio</b> a accedir a la teva ubicació.

</DocsNote>

### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view

Aquest botó es pot utilitzar per activar el mode street view en el mapa.
Depenent de la font de street view triada en la [configuració](./menu/settings), s'accedirà de forma diferent a la imatgeria d'street view.

- <a href="https://www.mapillary.com/" target="_blank">Mapillary</a>: la cobertura de street view aparaixerà com a línies verdes sobre el mapa. Quan t'apropis prou, es mostraran les ubicacions exactes amb punts verds on estiguin disponibles la imatgeria de street view. En passar el cursor sobre un punt verd es mostrarà la imatge del carrer en aquella ubicació.
- <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>: clica en el mapa per obrir una nova pestanya amb la imatgeria de street view de la ubicació.

### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Capes de Mapa

El botó de capa de mapa permet canviar entre diferents mapes base i alternar capes sobreposades del mapa i categories de punts d'interès.

- Els **Mapes base** són mapes de fons que presenten les principals característiques geogràfiques del món.
  Depenent del teu propòsit, els mapes base tenen diferents estils i nivells de detall.
  Només es pot mostrar un mapa base alhora.
- Les **Capes sobreposades** són capes addicionals que es poden mostrar sobre el mapa base per proporcionar informació complementària.
- Els **Punts d'interès** es poden afegir al mapa per mostrar diferents categories de llocs, com botigues, restaurants o allotjaments.

<div class="flex flex-col items-center">
<DocsLayers />
<span class="text-sm text-center mt-2">

Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay on top of the <a href="https://www.maptiler.com/maps/outdoor-topo/" target="_blank">MapTiler Topo</a> basemap.

</span>
</div>

Una gran col·lecció de mapes i capes sobreposades globals i locals està disponible a **gpx.studio**, així com una selecció de categories de punts d'interès.
Poden activar-se en el [configuració de capes del mapa](./menu/settings).

En aquests ajustaments pots gestionar l'opacitat de les capes sobreposades.

For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://maplibre.org/maplibre-style-spec/" target="_blank">MapLibre style JSON</a> URLs.