# Térképes lista (Map Listing)

> A Map Listing widget és blokk beállításai: jelölők, csoportosítás, felhasználói helyzet, felugró ablak és lekérdezések.

A **Map Listing** a bejegyzéseket egy térképen jeleníti meg jelölőkkel. Elementorban widget, a blokkszerkesztőben blokk, Bricksben elem; a beállítások nagyjából ugyanazok.

## Előkészítés

1. A **JetEngine → JetEngine → Modulok** fülön kapcsold be a **Térképes listák** modult, és kattints a **Mentés** gombra.
2. A **Térképek beállításai** fülön állítsd be a térképszolgáltatót; a további beállítások a kiválasztott szolgáltatótól függnek.
3. Kell egy egyéni bejegyzéstípus, amelyben van a címet tartalmazó **Térkép** típusú metamező, és minden bejegyzésnél töltsd ki.
4. Készíts listázási sablont, amely az elem megjelenését adja a felugró ablakban.

![A Térképek beállításai fül](./kepek/terkep-beallitasok.webp)

*A Térképek beállításai fül* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine)

A képen a térképszolgáltató és a geokódolás beállításai láthatók.

## Általános beállítások

| Beállítás | Mit csinál |
|---|---|
| **Listing** | A térképhez készített listázási sablon. |
| **Address Meta Field** | A címet tartalmazó metamező neve. |
| **Use Lat Lng Address Meta Field** | Ha a szélességi és hosszúsági érték metamezőben van tárolva, ez a kapcsoló megjeleníti a megadásukhoz szükséges mezőt. |
| **Map Height** | A térkép magassága. |
| **Posts number** | Egyszerre hány jelölő (bejegyzés) látszik. |
| **Automatically detect map center** | A térkép a jelölők alapján találja meg a középpontot. Kikapcsolva megjelenik a **Map Center** (kézi megadás vagy dinamikus címke) és a **Custom Zoom** (a betöltéskor használt nagyítás, ehhez a **Map Center** is kell). |
| **Max Zoom** / **Min Zoom** | Meddig lehet ráközelíteni, illetve eltávolítani. Ha például a nagyítás 5, a **Max Zoom** 8, háromszor lehet közelíteni; ha a **Min Zoom** 4, egyszer lehet távolítani. |
| **Mouse Wheel Zoom** | Nagyítás az egérgörgővel. Csak **Leaflet Maps** és **Mapbox** szolgáltatónál van, a Google Mapsnél nem működik. |
| **Centering Map when click on marker** | Jelölőre kattintva a térkép középre áll, a **Zoom Map** értékkel. |

Google Maps szolgáltatónál további beállítások is vannak: a **Zoom & Pan Control** legördülő lista az interakció módját adja, a kapcsolók pedig a **Zoom Controls**, **Fullscreen Control**, **Street View Controls** és **Map Type Controls** vezérlőket kapcsolják.

## Jelölők

### Jelölő típusa

- **Image/Icon**: a Médiatárból választott kép vagy ikon (Elementorban az ikonkönyvtárból is). Minden jelölő ugyanolyan lesz. A blokkszerkesztőben csak SVG vagy más fájl tölthető fel.
- **Text**: megjelenik a **Marker Label** lista: **Post Title** (a bejegyzés címe), **Meta Field** (a **Meta Field** listából vagy az **Or enter meta field key** mezőből), **Static Text** (minden jelölőn ugyanaz), **Custom Content Type Field** (tartalomtípus-mező; csak bekapcsolt egyedi tartalomtípus modullal). A **Callback** és a **Customize output** kapcsolóval formázhatod az értéket, a szöveg elé vagy mögé `%s` jelöléssel illeszthetsz szöveget.
- **Dynamic Image (from meta field)**: a jelölő képe elemenként változik, a metamezőből jön.
- **Custom Content Type Dynamic Image**: ugyanez tartalomtípus mezőiből.

A blokkszerkesztőben az **ICON COLOR SOURCE** is választható: **JetStyleManager** vagy **Original SVG colors**. Az utóbbit akkor válaszd, ha egyéni ikonod színeit nem akarod felülírni. Ez a mező csak aktív JetStyleManager mellett látszik.

### Különböző jelölők feltételekkel

A **Use different markers by conditions** kapcsolóval az eddigi beállítások az alapértelmezettek, és feltételektől függően más jelölő jelenik meg. Az **Add Item** gombbal veheted fel a szabályt:

- **Marker Type**: csak **Image** vagy **Icon**. Ikonnál az **Apply Icon Color to** mező adja meg a színezést: **Fill** (kitöltés), **Stroke** (körvonal), **Both** (mindkettő), **Keep SVG colors** (az SVG saját színei).
- **Dynamic Icon Color**: egyéni mezőből jövő szín, rövidkóddal vagy makróval.
- **Apply this marker if**: a feltétel. **Meta field is equal to value** (a megadott metamező értéke egyenlő a **Field Value** értékkel), **Post has term** (a bejegyzésnek van a megadott **Taxonomy slug** és **Term name, slug or ID** kifejezése), **Dynamic color not empty** (a **Dynamic Icon Color** nem üres).

### Csoportosítás

A **Marker clustering** kapcsoló sok jelölő esetén kényelmes csoportokba rendezi őket. Bekapcsolás után a **Cluster Max Zoom** és **Cluster Radius** is állítható.

## A felhasználó helyzete

A **User Location** szakaszban az **Enable User Location Marker** kapcsolóval a látogató helye is megjelenik. A **Marker Type** választható:

- **Text**: a **Marker Label** adja a feliratot.
- **Image**: az **Image** és az **Image Size**.
- **Icon**: az **Icon** és az **Image Size** (az ikon mérete).

## Felugró ablak

| Beállítás | Mit csinál |
|---|---|
| **Marker Popup Width** | Az ablak szélessége. |
| **Vertical Offset** | A jelölő és az ablak távolsága pixelben. |
| **Add popup preloader** | Betöltési animáció az ablakban. |
| **Add popup pin** | Háromszög alakú mutató az ablakon; csak Google Mapsnél. |
| **Open On** | Az ablak megnyitása: **Click** vagy **Hover**. |

## Lekérdezések

A **Custom Query** szakaszban a **Use Custom Query** kapcsolóval Lekérdezéskészítő-lekérdezést használhatsz. A következő szakaszok régiek, és az egyéni lekérdezés ajánlott helyettük:

- **Posts Query**: a bejegyzéstípus elemeinek szűrése feltételekkel (Elementorban és a blokkszerkesztőben).
- **Terms Query**: kifejezések szerinti tartalom (csak Elementor).
- **Users Query**: felhasználók szerinti tartalom (csak Elementor).
- **Content Types Query**: egyedi tartalomtípus lekérdezés; csak bekapcsolt **Egyedi tartalomtípusok** modulnál, és csak akkor érvényes, ha a **Listing** sablon forrása egyedi tartalomtípus. Beállításai: **Offset**, **Status**, **Order**, **Query**.

## Láthatóság és stílus

A **Widget Visibility** (blokkszerkesztőben **Block Visibility**) a térképet elrejti, ha üres a lekérdezés, vagy mindig mutatja. A jelölők stílusát Elementorban a **Style** fül adja; a blokkszerkesztőben a **Advanced** szakasz **CSS class** mezője használható, a JetStyleManager bővítménnyel pedig további stílusbeállítások érhetők el (a ecsetgombbal nyílnak). Végül kattints a **Közzététel** gombra.

## Térképes lista Bricksben

Előfeltétel az aktív Bricks téma és a JetEngine. A lépések:

1. A **Bricks → Beállítások** oldalon, a bejegyzéstípusok szakaszban kapcsold be az **Oldalak** és a **Listing Item** lehetőséget, majd mentsd a változásokat. Enélkül a Bricks nem szerkeszti ezeket.
2. A **JetEngine → JetEngine → Modulok** fülön kapcsold be a **Térképes listák** modult, és mentsd. A **Térképek beállításai** fülön állítsd be a választott szolgáltatót (lásd fent).
3. Hozz létre egyéni bejegyzéstípust **Térkép** típusú metamezővel (a **JetEngine → Bejegyzéstípusok** oldalon, a **Metamezők** részben). Metaboxszal ugyanilyen mező vehető fel a bejegyzésekhez, kifejezésekhez vagy felhasználókhoz is.
4. A **Térkép** mező **Value format** beállítása háromféle tárolást ad: szöveg (szélesség és hosszúság vesszővel elválasztva), tömb (szélesség és hosszúság), vagy a cím szövege. A **Map Height** a térkép magasságát adja, alapértelmezetten 300 px. Mentsd a bejegyzéstípust az **Update Post Type** gombbal, majd vegyél fel néhány bejegyzést kitöltött térképmezővel.
5. A **JetEngine → Listázások/komponensek** oldalon kattints az **Új elem hozzáadása** gombra. A **Listing source** legyen **Posts**, a **From post type** a térképes bejegyzéstípus, add meg a nevet, a **Listing view** pedig legyen **Bricks**, majd kattints a **Create Listing Item** gombra.
6. A Bricks vásznán adj hozzá egy szakaszt, és húzd be a dinamikus elemeket: **Dynamic Image** (például a kiemelt kép), **Dynamic Link** (a **Permalink** forrással, hogy a látogató az elem oldalára jusson), és két **Dynamic Field** (az egyik a címet, a másik a metamezős árat írja ki). A második mezőnél a **Customize field output** kapcsolóval szöveget fűzhetsz az érték elé és mögé: a `%s` az érték helye. Ha ugyanazt az értéket többször kell beilleszteni, `%1$s` formát használj. Mentsd a sablont.
7. Szerkeszd Bricksszel az oldalt, adj hozzá egy szakaszt, és húzd be a **Map Listing** elemet.

A **Map Listing** elem beállításai Bricksben:

| Beállítás | Mit csinál |
|---|---|
| **Listing** | A térképhez készített sablon. |
| **Address Meta Field** | A címet tartalmazó metamező neve. |
| **Use Lat Lng Address Meta Field** | Ha szélességi és hosszúsági értéket tároló mező is van, kapcsold be, és add meg a nevét. |
| **Map Height** | A térkép magassága. |
| **Posts number** | Hány jelölő látszik egyszerre (egy jelölő egy bejegyzés). |
| **Automatically detect map center** | A középpontot a jelölők alapján találja meg. Kikapcsolva a **Map center** (kézi vagy dinamikus megadás) és a **Custom zoom** (ehhez a **Map center** is kell) jelenik meg. |
| **Max Zoom** | A nagyítás alapszintje az automatikus középpontnál. |
| **Mouse Wheel Zoom** | Nagyítás az egérgörgővel. |

A jelölők típusa Bricksben **Image**, **Icon**, **Text** vagy **Dynamic Image**. A **Text** típusnál a **Marker Label** forrása **Post Title**, **Meta Field** (a **Meta Field** listából vagy az **Or enter meta field key** mezőből) vagy **Static Text**; a **Callback** az érték típusát adja. A **Dynamic Image** elemenként változó képet ad a megadott metamezőből. A **Use different markers by conditions** kapcsolóval feltételes jelölők, a **Marker Clustering** kapcsolóval csoportosítás állítható. A felugró ablak szélessége (**Marker popup width**), a **Vertical offset** és a **Add popup preloader** ugyanúgy működik, mint fent. A **Custom Query** szakaszban Lekérdezéskészítő-lekérdezést választhatsz, a **Widget Visibility** pedig a térképet elrejti, ha üres a lekérdezés.

A mentés után az oldalon a jelölőkre kattintva a bejegyzések felugró ablakban jelennek meg a térképmezőben megadott helyen.