Térképjelölők színe metamező szerint

A Map Listing jelölőinek színét bejegyzésenként, kifejezésenként, tartalomtípus-elemenként vagy felhasználónként másra állíthatod egy metamező értéke alapján. Így a térképen látszik, melyik elem milyen kategóriájú vagy állapotú. Elementorban, a blokkszerkesztőben és Bricksben egyaránt működik.

Előfeltétel: kész Map Listing (lásd a Térképes lista fejezetet), a Térképes listák modul bekapcsolva.

1. A színmező létrehozása

1. Nyisd meg a JetEngine → Bejegyzéstípusok oldalt, és szerkeszd azt a típust, amelynek elemei a térképen szerepelnek (a példában a „Túrák”).
2. Görgess a metamezőkhöz, és kattints az új metamező hozzáadására.
3. Add meg a Felirat és a Név/ID értéket (például icon_color), a Mező típusa pedig legyen Színválasztó vagy Szöveg.
4. Mentsd a bejegyzéstípust, majd szerkeszd a bejegyzéseket, és töltsd ki a színt.

Fontos: a szín csak akkor érvényes, ha HEX, RGB vagy HSL formátumú. A színnevek („red”, „green”, „goldenrod”) nem fogadhatók el.

2. Rövidkód vagy makró készítése

A dinamikus színhez rövidkód vagy makró kell.

Rövidkód: a JetEngine → JetEngine → Shortcode-generátor fülön a Shortcode listában válaszd a JetEngine Data, a Source legyen Meta Data, és válaszd ki a színmezőt. Másold ki az alul megjelenő rövidkódot.

Makró: a Makrógenerátor fülön a Macros listában válaszd a Current meta value lehetőséget, és a Meta field mezőbe írd be a színmező nevét. A kapott makró például %current_meta|icon_color%.

3. Beállítás Elementorban

1. Nyisd meg az oldalt Elementorral, ahol a Map Listing widget van.
2. A General fülön ellenőrizd, hogy a Listing és az Address Meta Field be van állítva.
3. Nyisd ki a Marker részt, és válassz Marker Type értéket (például Icon, és egy ikon az ikontárból). A példában a Marker Clustering kapcsoló ki van kapcsolva.
4. A Style részben a Marker style fülön állítsd be a jelölő megjelenését. Így fog kinézni a jelölő akkor, ha a metamezőnek nincs értéke.
5. Vissza a Marker részhez: kapcsold be a Use different markers by conditions kapcsolót, és kattints az + Add Item gombra.
6. Az elemben a Marker Type legyen Icon, és szükség esetén add meg az ikont.
7. Az Apply Icon Color to listában válaszd ki, mire vonatkozzon a szín:
   • Fill: az ikon kitöltését színezi.
   • Stroke: csak az ikon körvonalát színezi.
   • Both: a kitöltést és a körvonalat is.
   • Keep SVG colors: megtartja az SVG fájl eredeti színeit, és figyelmen kívül hagyja a beállított színt.
8. A Dynamic Icon Color mezőbe írd be az előbb elkészített makrót vagy rövidkódot.
9. Az Apply this marker if listában válaszd a Dynamic color not empty lehetőséget.
10. Mentsd (Publish).

A Dynamic Icon Color felülírja az Icon Color értékét, ezért elemenként vagy az egyiket, vagy a másikat állítsd be.

4. Beállítás a blokkszerkesztőben

A menet ugyanez. A Map Listing blokk General fülén ellenőrizd a LISTING és az ADDRESS META FIELD mezőt, a Marker részben válassz MARKER TYPE értéket (például Image/Icon a médiatárból). A JetStyleManager ingyenes bővítmény telepítése és aktiválása után a jobb felső sarokban megjelenik egy ecset ikon, amellyel a térkép stílusbeállításait nyithatod meg; a Marker fülön a jelölő alap kinézetét állíthatod.

Ezután kapcsold be a Use different markers by conditions kapcsolót, kattints az + Add new item gombra, szükség esetén add meg az Image/Icon értéket és az APPLY ICON COLOR TO értéket (ugyanazok a lehetőségek, mint fent). A DYNAMIC ICON COLOR mezőbe írd a makrót vagy rövidkódot, az APPLY THIS MARKER IF listában válaszd a Dynamic color not empty lehetőséget, és mentsd (Save). A DYNAMIC ICON COLOR itt is felülírja a színválasztót.

5. Beállítás Bricksben

1. Nyisd meg az oldalt a Bricks szerkesztőjében, ahol a Map Listing elem van.
2. A GENERAL fülön ellenőrizd a Listing és az Address Meta Field mezőt.
3. A MARKER fülön a Marker Type maradhat az alapértelmezett Icon. A Marker clustering kapcsolót a példában kikapcsoltuk.
4. A STYLE részben a MARKER fülön az ikon alap kinézete állítható (ha a mezőnek nincs értéke, ez látszik).
5. A MARKER fülön kapcsold be a Use different markers by conditions kapcsolót, és kattints az + ADD MARKER gombra.
6. Az elemben a Marker Type legyen Icon, állítsd be az ikont, ha kell.
7. A Dynamic Icon Color mezőbe írd be a makrót vagy rövidkódot. Itt is a Dynamic Icon Color veszi át az Icon color helyét.
8. Az Apply this marker if listában válaszd a Dynamic color not empty lehetőséget.
9. Mentsd.

A frontenden a jelölők színe ezután a metamező értékétől függ.