# OpenStreetMap és Dinamikus OpenStreetMap widget

> Térkép megjelenítése API-kulcs nélkül az OpenStreetMap adataival: az egyszerű és a több jelölős, köröket is tudó widget beállításai.

Az OpenStreetMap-widgetekhez nem kell API-kulcs, ezért a Google Maps widgetek ingyenes alternatívái. Két widget van: az egyszerű **OpenStreetMap** és a több lehetőséget adó **Dinamikus OpenStreetMap**.

## OpenStreetMap widget

![Az OpenStreetMap widget beállításai](./kepek/terkepek-openstreetmap-beallitasok.webp)

*Az OpenStreetMap widget beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=55&action=elementor)

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| Hely | A megjelenítendő cím. Dinamikus címkével is megadható. | |
| Zoom | A térkép nagyítása, 1 és 20 között. | 14 |
| Nagyítás görgetőkerékkel | Az egérgörgővel lehet nagyítani. Kapcsold ki, ha nem szeretnéd, hogy az oldal görgetésekor véletlenül nagyítson a térkép. | Igen |
| Magasság | A térkép magassága px vagy vh egységben, reszponzív. | 500 px |

A **Stílus** fülön CSS-szűrőket és rámutatási (hover) átmeneteket állíthatsz be.

## Dinamikus OpenStreetMap widget

Több jelölőt, egyéni ikont, információs ablakot és köröket is támogat, címmel és koordinátával egyaránt.

![A Dinamikus OpenStreetMap widget Térkép szakasza](./kepek/terkepek-dinamikus-osm-beallitasok.webp)

*A Dinamikus OpenStreetMap widget Térkép szakasza* (https://minta-bolt.hu/wp-admin/post.php?post=55&action=elementor)

### Adattípus és térképtípus

- **Adattípus**: **Cím** (szöveges címek) vagy **Szélesség és hosszúság** (kézzel megadott koordináták). Mindkettőnél a lista minden elemének külön jelölőképe és opcionális információs ablaka lehet. A tételeket a **Címek listája** alatt az **Elem hozzáadása** gombbal veheted fel.
- **Térképtípus**: **Osm** (az alap OpenStreetMap csempék), **Népszerű** (humanitárius OpenStreetMap) és **Ciklus** (kerékpárutakra fókuszáló térkép).

### Vezérlés

![A Vezérlés szakasz](./kepek/terkepek-dinamikus-osm-vezerles.webp)

*A Vezérlés szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=55&action=elementor)

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| Zoom | A kezdeti nagyítás. | 14 |
| Nagyításvezérlő | Nagyítógombok a térképen. | Igen |
| Téglalap-kijelöléses nagyítás | A Shift lenyomva tartása közben egérhúzással kijelölt téglalapra nagyít. | Igen |
| Dupla kattintásos nagyítás | Dupla kattintásra nagyít. | Igen |
| Húzás a térképen | A térkép húzással mozgatható. | Igen |
| Nagyítás görgetőkerékkel | Az egérgörgővel lehet nagyítani. Kapcsold ki, ha nem szeretnéd, hogy az oldal görgetésekor véletlenül nagyítson. | Igen |
| Rétegpanel | Rétegválasztó panelt mutat. | Igen |
| Térkép méretarányadatai | Méretarány-sávot mutat metrikus és/vagy angolszász egységekben. | Nem |
| Klaszterezés | Az egymáshoz közeli jelölőket csoportba vonja. | Nem |

### Körök

![A Körök szakasz](./kepek/terkepek-dinamikus-osm-korok.webp)

*A Körök szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=55&action=elementor)

A **Körök** kapcsolóval a jelölők körül kör alakú réteget jeleníthetsz meg. A kör sugarát méterben adhatod meg.

### Stílus

A **Stílus** fülön beállíthatod a térkép magasságát, a CSS-szűrőket, a rámutatási átmeneteket, az információs ablak megjelenését (háttér, betűtípus, szövegszín) és a körök stílusát (szín, átlátszóság, vonalvastagság).