# Térkép (Leaflet) elem

> A Leaflet alapú Térkép elem: csempeképrétegek, jelölők és a térkép viselkedésének beállításai a Google nélkül.

A **Térkép (Leaflet)** elem interaktív térképet jelenít meg a Leaflet könyvtárral. Alapértelmezetten az OpenStreetMap csempéit használja. A [Google-térképpel](https://hub.hellowp.io/hu/plugins/bricks-child/elemek-terkep-google/) ellentétben nem használja a Google Maps JavaScript API-t, ezért akkor érdemes választani, ha OSM-típusú vagy saját csempeforrást szeretnél Google nélkül.

![A Térkép (Leaflet) elem beállításai a szerkesztő bal oldali paneljén](./kepek/elemek-3-map-leaflet.webp)

*A Térkép (Leaflet) elem beállításai a szerkesztő bal oldali paneljén* (https://minta-bolt.hu/elemek/?bricks=run)

A képen a három csoport látszik: **Rétegek**, **Jelölők** és **Térkép**.

Az elem a szerkesztőben nem húzható át (hogy ne ütközzön a térképen végzett mozdulatokkal).

## Rétegek

A **Rétegek** ismétlőben adod meg a csempeképek forrását. Egy réteg beállításai:

| Beállítás | Mit csinál |
| --- | --- |
| Név | A réteg neve, például `OpenStreetMap`. |
| URL | A csempék URL-sablonja `{z}`, `{x}`, `{y}` helyőrzőkkel. |
| Legkisebb nagyítás, Legnagyobb nagyítás | A réteg nagyítási tartománya. |
| Hibacsempe URL | A hiányzó csempék helyett megjelenő kép címe. |
| Forrásmegjelölés | A térkép sarkában megjelenő szerzői jogi szöveg. |

Az alapértelmezett sor az OpenStreetMap szabványos csempe-URL-jét használja.

Az URL-t a Bricks úgy adja át a Leafletnek, hogy az a csempeszolgáltatód által támogatott helyőrzőket cseréli ki. A legtöbb szolgáltatónak három helyőrző kell:

- `{z}`: a nagyítási szint,
- `{x}` és `{y}`: a csempe koordinátái.

Néhány szolgáltató `{s}` helyőrzőt is használ az aldomainekhez (a, b, c, …). Ezt csak akkor tedd az URL-be, ha a szolgáltatód URL-je megköveteli. A forrásmegjelölés a legtöbb szolgáltatónál kötelező.

Több réteget is felvehetsz, és a látogatók a frontenden váltogathatnak köztük. Például:

- **Utcatérkép:** OpenStreetMap-csempék,
- **Domborzati térkép:** OpenTopoMap-csempék,
- **Műholdkép:** Esri vagy más szolgáltató csempéi.

A rétegek **Név** mezője a rétegválasztóban megjelenő felirat (például „Utcatérkép”, „Domborzati”).

## Jelölők

A jelölőkkel kiemelheted a térkép fontos pontjait. A **Jelölő (alapértelmezett)** ikon az olyan jelölőknek szól, amelyeknek nincs saját ikonjuk. A **Jelölők** ismétlőben veszel fel jelölőket:

| Beállítás | Mit csinál |
| --- | --- |
| Koordináták | `szélesség, hosszúság` vesszővel elválasztva. Dinamikus adat is használható. |
| Címke | Csak a szerkesztőben segít megkülönböztetni a jelölőket. |
| Ikon | Egyedi jelölőkép; megadásakor a magasság és a szélesség (px) is állítható. |
| Felugró szöveg | A jelölőhöz tartozó popup tartalma szövegszerkesztővel. |

### Jelölő (alapértelmezett)

Azokra a jelölőkre vonatkozó alapértékek, amelyeknek nincs egyedi ikonjuk: **Ikon**, **Ikon: Magasság**, **Ikon: Szélesség** (px).

## Térkép

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| Magasság | A térkép tárolójának magassága. Módosításakor a térkép újratöltődik. | 300px |
| Térkép középpontja | `szélesség, hosszúság`. | Üres |
| Nagyítási szint (kezdő) | A kezdő nagyítás. | Nincs |
| Nagyítási szint (min.), (max.) | A legkisebb és legnagyobb nagyítás. | Nincs |
| Nagyítás: léptetés, Nagyítás: delta | A nagyítás lépésköze. | Nincs |
| Nagyítás: dupla kattintás | Engedélyezve, Engedélyezve (középre) vagy Letiltva. | Nincs |
| Nagyítás: görgetés | Ugyanezek a lehetőségek az egérgörgőre. | Nincs |
| Dobozos nagyítás | Nagyítás téglalap kijelölésével. | Nincs |
| Nagyítás vezérlő | Nagyítás gombok megjelenítése. | Nincs |
| Forrásmegjelölés vezérlő | A forrásmegjelölés megjelenítése. | Nincs |
| Popup bezárása kattintásra | A térképre kattintva a felugró szöveg bezáródik. | Nincs |
| Húzás | A térkép húzással mozgatható. | Nincs |
| Átméretezés követése | A térkép igazodik a tároló méretváltozásához. | Nincs |

A legfontosabb beállítások a térkép magassága, a középpontja (szélesség és hosszúság) és a kezdő nagyítási szint: ezek határozzák meg, milyen a térkép és hová fókuszál az első betöltéskor. A többi beállítás a nagyítás viselkedése, a térképen végezhető műveletek (húzás, kattintás) és a megjelenítés (forrásmegjelölés, átméretezés) köré csoportosul. Mindegyik a Leaflet saját térképbeállításait követi.