---
title: Sterowanie mapą
---

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

Elementy sterujące mapą znajdują się po prawej stronie interfejsu.
Za pomocą tych elementów sterujących można poruszać się po mapie, powiększać i pomniejszać widok oraz przełączać się między różnymi stylami mapy.

### <Diff size="16" class="inline-block" style="margin-bottom: 2px" /> Nawigacja mapą

Sterowanie na górze pozwala powiększać <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> i pomniejszać <Minus size="16" class="inline-block" style="margin-bottom: 2px" />, zmieniać orientacje oraz pochylenie mapy<Compass size="16" class="inline-block" style="margin-bottom: 2px" />.

<DocsNote>

Aby kontrolować orientację i pochylenie mapy, możesz również przeciągnąć mapę przytrzymując <kbd>Ctrl</kbd>.

</DocsNote>

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

Możesz użyć paska wyszukiwania, aby wyszukać adres i przejść do niego na mapie.

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

Przycisk lokalizacji wyśrodkuje mapę na bieżącej lokalizacji.

<DocsNote>

Działa tylko wtedy, gdy zezwoliłeś przeglądarce i <b>gpx.studio</b> na dostęp do Twojej lokalizacji.

</DocsNote>

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

Ten przycisk może być użyty do włączenia trybu street view na mapie.
Depending on the street view source chosen in the [settings](./menu/settings), street view imagery can be accessed differently.

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

- **Basemaps** are background maps that present the main geographic features of the world.
  Depending on their purpose, basemaps have different styles and levels of detail.
  Only one basemap can be displayed at a time.
- **Overlays** are additional layers that can be displayed on top of the basemap to provide complementary 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 topographic 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.
