{"id":47784,"date":"2025-04-18T10:39:44","date_gmt":"2025-04-18T10:39:44","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=47784"},"modified":"2025-04-18T10:39:46","modified_gmt":"2025-04-18T10:39:46","slug":"how-to-set-icon-color-dynamically-in-maps-listing","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-set-icon-color-dynamically-in-maps-listing\/","title":{"rendered":"How to Set Icon Color Dynamically in Maps Listing"},"content":{"rendered":"\n

Displaying dynamic, visually informative maps can significantly enhance the user experience, especially when map markers adapt based on your content.\u00a0<\/p>\n\n\n\n

With JetEngine<\/em>\u2019s Map Listing<\/strong> widget\/block\/element, you can customize marker icon colors dynamically, assigning a different color to each post, term, CCT<\/strong><\/a> item, user, etc. via the custom fields<\/strong><\/a>.<\/p>\n\n\n

<\/svg><\/div>
Things to know<\/div>

For this tutorial, we use the Travengo <\/strong>dynamic template<\/a>.<\/p><\/div><\/div>\n\n\n\n

Backend Preparation<\/h2>\n\n\n\n
\n

Create a \u201cColorpicker\u201d meta field<\/h3>\n\n\n\n

In our case, we display posts on the map from the \u201cTours\u201d Custom Post Type<\/strong><\/a>, so we need to add a meta field for the icon color into the CPT<\/strong> source.<\/p>\n\n\n\n

We open the WordPress Dashboard > JetEngine > Post Types <\/em><\/strong>tab and click to edit the \u201cTours\u201d CPT<\/strong>. Here, we scroll the page down to the Meta Fields<\/strong> section and hit the \u201cNew Meta Field<\/strong>\u201d button.<\/p>\n\n\n\n

Fill in the Label <\/strong>and Name\/ID <\/strong>and select the \u201cColorpicker<\/a>\u201d or \u201cText<\/a>\u201d Field type<\/strong>. Set other meta field settings if needed and save the changes.<\/p>\n\n\n\n

\"colorpicker<\/a><\/div>\n\n\n\n

Then, we edit the custom posts and fill in the meta fields.<\/p>\n\n\n

<\/svg><\/div>
Things to know<\/div>

A color is considered valid only if it is specified in HEX, RGB, or HSL format. Color names like \"red,\" \"green,\" or \"goldenrod\" are not accepted as valid inputs.<\/p><\/div><\/div>\n\n\n\n

\"filling<\/a><\/div>\n\n\n\n

Generate a shortcode\/macro<\/h3>\n\n\n\n

To apply dynamic icon colors to the Map Listing<\/strong>, you need to generate a shortcode or macro.<\/p>\n\n\n\n

Proceed to the WordPress Dashboard > JetEngine > JetEngine > <\/em><\/strong>Shortcode Generator<\/em><\/strong><\/a> <\/em><\/strong>to generate a shortcode.<\/p>\n\n\n\n

Select \u201cJetEngine Data\u201d in the Shortcode<\/strong> dropdown, \u201cMeta Data\u201d as Source<\/strong>, and the required Meta Field<\/strong>. Adjust other settings if needed and copy the shortcode from the bar at the bottom of the page ( in our case).<\/p>\n\n\n\n

\"shortcode<\/a><\/div>\n\n\n\n

If you want to create a macro, open the Macros Generator <\/strong>tab.<\/p>\n\n\n\n

Choose \u201cCurrent meta value\u201d in the Macros<\/strong> dropdown and enter the \u201cColopicker\u201d meta field name into the Meta field<\/strong>. After that, you can copy the macro (%current_meta|icon_color% as an example).<\/p>\n\n\n\n

\"current<\/a><\/div>\n<\/div><\/div>\n\n\n\n

Dynamic Icon Color in Elementor<\/h2>\n\n\n\n

Open a page with the Elementor editor that contains the Map<\/strong> Listing<\/strong> widget.<\/p>\n\n\n\n

In the General<\/strong><\/a> <\/strong>settings tab, ensure that the Listing <\/strong>and Address Meta Field <\/strong>are configured.<\/p>\n\n\n\n

\"map<\/a><\/div>\n\n\n\n

Then, unroll the Marker <\/strong>tab and select any Marker Type<\/strong><\/a> (e.g., we pick \u201cIcon\u201d and set the \u201cMap marker alt\u201d Icon<\/strong> from the Icon Library<\/strong>). For our case, we also disabled the Marker Clustering <\/strong>toggle.<\/p>\n\n\n\n

\"map<\/a><\/div>\n\n\n\n

Now, you can open the Style <\/strong>section and modify the marker appearance in the Marker <\/strong>style tab. That\u2019s how the marker will look on the map if the post meta field has no value.<\/p>\n\n\n\n

\"map<\/a><\/div>\n\n\n\n

To apply dynamic colors, go back to the Marker<\/strong> settings tab of the Content<\/strong> section, enable the Use different markers by conditions <\/strong>toggle, <\/strong>and press the \u201c+ Add Item<\/strong>\u201d button.<\/p>\n\n\n\n

In the Item<\/strong> repeater, select the \u201cIcon\u201d Marker Type<\/strong>.<\/p>\n\n\n\n

If needed, set the Icon<\/strong> and pick an option from the Apply Icon Color to <\/strong>dropdown:<\/p>\n\n\n\n