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

---
title: Map controls
---

<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 }

The map controls are located on the right side of the interface.
These controls allow you to navigate the map, zoom in and out, and switch between different map styles.

### <Diff size="16" class="inline-block" style="margin-bottom: 2px" /> Map navigation

The controls at the top allow you to zoom in <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> and out <Minus size="16" class="inline-block" style="margin-bottom: 2px" />, and to change the orientation and tilt of the map <Compass size="16" class="inline-block" style="margin-bottom: 2px" />.

<DocsNote>

To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.

</DocsNote>

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

You can use the search bar to look for an address and navigate to it on the map.

### <LocateFixed size="16" class="inline-block" style="margin-bottom: 2px" /> Locate button

Lokaliseringsknappen centrerar kartan till din aktuella plats.

<DocsNote>

Detta fungerar bara om du tillåter din webbläsare och <b>gpx.studio</b> att ha tillgång till din plats.

</DocsNote>

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

Denna knapp kan användas för att välja street view på kartan.
Beroende på street view källa som valts i [Inställningar](./menu/settings), kan street view bilder nås på olika sätt.

- <a href="https://www.mapillary.com/" target="_blank">Mapillary</a>: the street view coverage will appear as green lines on the map. When zoomed in enough, green dots will show the exact locations where street view imagery is available. Hovering over a green dot will show the street view image at that location.
- <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>: click on the map to open a new tab with the street view imagery at that location.

### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers

The map layers button allows you to switch between different basemaps, and toggle map overlays and categories of points of interest.

- **Baskartor** är bakgrundskartor som presenterar de huvudsakliga egenskaperna i denna värld.
  Depending on their purpose, basemaps have different styles and levels of detail.
  Bara en baskarta åt gången kan visas.
- **Överlägg** ät ytterligare lager som kan visas på baskartan och ge kompletterande information.
- **Points of interest** can be added to the map to show different categories of places, such as shops, restaurants, or accommodations.

<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>

A large collection of global and local basemaps and overlays is available in **gpx.studio**, as well as a selection of point-of-interest categories.
They can be enabled in the [map layer settings dialog](./menu/settings).

In these settings, you can also manage the opacity of the overlays.

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.