Térképes lista (Map Listing)

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.

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.