NewThe Supreme Bundle: every Divi Supreme plugin, 31% less than buying separately.See what’s inside →

Divi 5 Ready

Sign in

Get Supreme Bundle

Leaflet Map Module Demo

Create Beautiful Looking Interactive Leaflet Maps in Divi with Supreme Maps. Use Google Map API for accurate geolocation otherwise you can use Lat and Long.

Join Pro TodayDownload Free

Browse Amazing Features

Extensive Control Settings

Create custom map layouts as unique as your design. Offer interactive zoom-controls onscreen or by click or scroll. Use overlays and animations that complement your site.

[supreme_leaflet_map address="Office 306, TECOM Zone - DIC Building @4 - Al Kawkab St - Al Sufouh - Dubai Internet City - Dubai - United Arab Emirates" address_lat="25.0929152" address_lng="55.159053" scroll_wheel_zoom="on" double_click_zoom="off" _builder_version="4.23.1" _module_preset="default" border_radii="on|10px|10px|10px|10px" global_colors_info="{}"][supreme_leaflet_map_item _builder_version="4.16" _module_preset="default" global_colors_info="{}"][/supreme_leaflet_map_item][/supreme_leaflet_map]

Customizable Marker Popups

Display helpful details, text, even media when a user hovers or clicks on a marker. Show hours, phone numbers, services...any information you like. Or automatically show all the popups when the map loads and let the user close them when they wish.

[supreme_leaflet_map address="Office 306, TECOM Zone - DIC Building @4 - Al Kawkab St - Al Sufouh - Dubai Internet City - Dubai - United Arab Emirates" address_lat="25.0929152" address_lng="55.159053" double_click_zoom="off" popup_max_width="265" title_bottom_padding="0px" _builder_version="4.16" _module_preset="default" popup_title_font="|800|||||||" popup_title_letter_spacing="0.3px" popup_content_font_size="12px" popup_content_line_height="1.7em" border_radii="on|10px|10px|10px|10px" border_radii_popup_wrapper="on|4px|4px|4px|4px" box_shadow_style_popup_wrapper="preset1" box_shadow_vertical_popup_wrapper="6px" box_shadow_blur_popup_wrapper="39px" locked="off" global_colors_info="{}"][supreme_leaflet_map_item title="Google Headquarters - UAE" pin_address="Office 306, TECOM Zone - DIC Building @4 - Al Kawkab St - Al Sufouh - Dubai Internet City - Dubai - United Arab Emirates" pin_address_lat="25.0929152" pin_address_lng="55.159053" _builder_version="4.16" _module_preset="default" global_colors_info="{}"]

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

[/supreme_leaflet_map_item][supreme_leaflet_map_item title="Masoo Naqvi Mosque - UAE" pin_address="Lailak 3rd St - Emirates Hills - Dubai - United Arab Emirates" pin_address_lat="25.0686847" pin_address_lng="55.1737915" _builder_version="4.16" _module_preset="default" global_colors_info="{}"]

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

[/supreme_leaflet_map_item][/supreme_leaflet_map]

Custom Marker Graphics

Extend your design theme with any images or icons you choose. You can use a different graphic for each markers, or use them for classification to quickly indicate the type of marker.

[supreme_leaflet_map address="Office 306, TECOM Zone - DIC Building @4 - Al Kawkab St - Al Sufouh - Dubai Internet City - Dubai - United Arab Emirates" address_lat="25.0929152" address_lng="55.159053" double_click_zoom="off" popup_max_width="265" popup_background_color="#222151" title_bottom_padding="0px" _builder_version="4.16" _module_preset="default" popup_title_font="|800|||||||" popup_title_text_color="#FFFFFF" popup_title_letter_spacing="0.3px" popup_content_text_color="#FFFFFF" popup_content_font_size="12px" popup_content_line_height="1.7em" border_radii="on|10px|10px|10px|10px" border_radii_popup_wrapper="on|4px|4px|4px|4px" box_shadow_style_popup_wrapper="preset1" box_shadow_vertical_popup_wrapper="6px" box_shadow_blur_popup_wrapper="39px" box_shadow_style="preset1" box_shadow_vertical="10px" box_shadow_blur="32px" box_shadow_color="rgba(0,0,0,0.15)" locked="off" global_colors_info="{}"][supreme_leaflet_map_item title="Google Headquarters - UAE" pin_address="Office 306, TECOM Zone - DIC Building @4 - Al Kawkab St - Al Sufouh - Dubai Internet City - Dubai - United Arab Emirates" pin_address_lat="25.0929152" pin_address_lng="55.159053" use_marker_custom="on" marker_icon_src="https://divisupreme.b-cdn.net/wp-content/uploads/2021/09/marker-2.png" marker_height="40" marker_width="34" _builder_version="4.16" _module_preset="default" global_colors_info="{}"]

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

[/supreme_leaflet_map_item][supreme_leaflet_map_item title="Masoo Naqvi Mosque - UAE" pin_address="Lailak 3rd St - Emirates Hills - Dubai - United Arab Emirates" pin_address_lat="25.0686847" pin_address_lng="55.1737915" use_marker_custom="on" marker_icon_src="https://divisupreme.b-cdn.net/wp-content/uploads/2020/06/logo_square-256x256-1.png" marker_height="30" marker_width="30" _builder_version="4.16" _module_preset="default" global_colors_info="{}"]

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

[/supreme_leaflet_map_item][/supreme_leaflet_map]

Marker Links

Use interactive hyperlinked markers to provide additional information. Link to another section of your page, another page of your website or an external site.

[supreme_leaflet_map address="Office 306, TECOM Zone - DIC Building @4 - Al Kawkab St - Al Sufouh - Dubai Internet City - Dubai - United Arab Emirates" address_lat="25.0929152" address_lng="55.159053" double_click_zoom="off" popup_max_width="265" title_bottom_padding="0px" _builder_version="4.23.1" _module_preset="default" popup_title_font="|800|||||||" popup_title_letter_spacing="0.3px" popup_content_font_size="12px" popup_content_line_height="1.7em" border_radii="on|10px|10px|10px|10px" border_radii_popup_wrapper="on|4px|4px|4px|4px" box_shadow_style_popup_wrapper="preset1" box_shadow_vertical_popup_wrapper="6px" box_shadow_blur_popup_wrapper="39px" locked="off" global_colors_info="{}"][supreme_leaflet_map_item title="Google Headquarters - UAE" pin_address="Office 306, TECOM Zone - DIC Building @4 - Al Kawkab St - Al Sufouh - Dubai Internet City - Dubai - United Arab Emirates" pin_address_lat="25.0929152" pin_address_lng="55.159053" _builder_version="4.16" _module_preset="default" link_option_url="https://divisupreme.com" link_option_url_new_window="on" global_colors_info="{}"]

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

[/supreme_leaflet_map_item][supreme_leaflet_map_item title="Masoo Naqvi Mosque - UAE" pin_address="Lailak 3rd St - Emirates Hills - Dubai - United Arab Emirates" pin_address_lat="25.0686847" pin_address_lng="55.1737915" _builder_version="4.16" _module_preset="default" link_option_url="https://suprememodules.com" link_option_url_new_window="on" global_colors_info="{}"]

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

[/supreme_leaflet_map_item][supreme_leaflet_map_item pin_address="Level 54 - برج الماس - أبراج بحيرات الجميرا - دبي - United Arab Emirates" pin_address_lat="25.0689836" pin_address_lng="55.1412048" _builder_version="4.16" _module_preset="default" link_option_url="https://divisupreme.com/features" link_option_url_new_window="on" global_colors_info="{}"][/supreme_leaflet_map_item][/supreme_leaflet_map]

Show Popup on Hover/Click

Display helpful details, text, even media when a user hovers or clicks on a marker. Show hours, phone numbers, services…any information you like. Extend and enhance your site design with a wide range of styling options: text/background colors, borders, rounded corners, size controls, closing method…if you can imagine it you can design it.

[supreme_leaflet_map address="Office 306, TECOM Zone - DIC Building @4 - Al Kawkab St - Al Sufouh - Dubai Internet City - Dubai - United Arab Emirates" address_lat="25.0929152" address_lng="55.159053" double_click_zoom="off" popup_trigger="hover" popup_max_width="265" close_popup_on_click="on" title_bottom_padding="0px" _builder_version="4.16" _module_preset="default" popup_title_font="|800|||||||" popup_title_letter_spacing="0.3px" popup_content_font_size="12px" popup_content_line_height="1.7em" border_radii="on|10px|10px|10px|10px" border_radii_popup_wrapper="on|4px|4px|4px|4px" box_shadow_style_popup_wrapper="preset1" box_shadow_vertical_popup_wrapper="6px" box_shadow_blur_popup_wrapper="39px" locked="off" global_colors_info="{}"][supreme_leaflet_map_item title="Google Headquarters - UAE" pin_address="Office 306, TECOM Zone - DIC Building @4 - Al Kawkab St - Al Sufouh - Dubai Internet City - Dubai - United Arab Emirates" pin_address_lat="25.0929152" pin_address_lng="55.159053" _builder_version="4.16" _module_preset="default" link_option_url_new_window="on" global_colors_info="{}"]

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

[/supreme_leaflet_map_item][supreme_leaflet_map_item title="Masoo Naqvi Mosque - UAE" pin_address="Lailak 3rd St - Emirates Hills - Dubai - United Arab Emirates" pin_address_lat="25.0686847" pin_address_lng="55.1737915" _builder_version="4.16" _module_preset="default" link_option_url_new_window="on" global_colors_info="{}"]

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

[/supreme_leaflet_map_item][supreme_leaflet_map_item title="Almas Tower" pin_address="Level 54 - برج الماس - أبراج بحيرات الجميرا - دبي - United Arab Emirates" pin_address_lat="25.0689836" pin_address_lng="55.1412048" _builder_version="4.16" _module_preset="default" link_option_url="https://divisupreme.com/feautres" link_option_url_new_window="on" global_colors_info="{}"]

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

[/supreme_leaflet_map_item][supreme_leaflet_map_item title="Arabian Oryx House - UAE" pin_address="35WC+7XQ - Barsha Heights - Dubai - United Arab Emirates" pin_address_lat="25.0957167" pin_address_lng="55.1724748" _builder_version="4.16" _module_preset="default" link_option_url="https://divisupreme.com/feautres" link_option_url_new_window="on" global_colors_info="{}"]

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

[/supreme_leaflet_map_item][/supreme_leaflet_map]

Unlimited Markers

Create tailor-made maps which show multiple locations or related businesses. Customize maps to your users’ needs, highlighting landmarks or points of interest, or show major routes or areas.

[supreme_leaflet_map address="Office 306, TECOM Zone - DIC Building @4 - Al Kawkab St - Al Sufouh - Dubai Internet City - Dubai - United Arab Emirates" address_lat="25.0929152" address_lng="55.159053" double_click_zoom="off" popup_max_width="265" close_popup_on_click="on" title_bottom_padding="0px" _builder_version="4.16" _module_preset="default" popup_title_font="|800|||||||" popup_title_letter_spacing="0.3px" popup_content_font_size="12px" popup_content_line_height="1.7em" border_radii="on|10px|10px|10px|10px" border_radii_popup_wrapper="on|4px|4px|4px|4px" box_shadow_style_popup_wrapper="preset1" box_shadow_vertical_popup_wrapper="6px" box_shadow_blur_popup_wrapper="39px" locked="off" global_colors_info="{}"][supreme_leaflet_map_item title="Google Headquarters - UAE" pin_address="Office 306, TECOM Zone - DIC Building @4 - Al Kawkab St - Al Sufouh - Dubai Internet City - Dubai - United Arab Emirates" pin_address_lat="25.0929152" pin_address_lng="55.159053" _builder_version="4.16" _module_preset="default" link_option_url_new_window="on" global_colors_info="{}"]

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

[/supreme_leaflet_map_item][supreme_leaflet_map_item title="Masoo Naqvi Mosque - UAE" pin_address="Lailak 3rd St - Emirates Hills - Dubai - United Arab Emirates" pin_address_lat="25.0686847" pin_address_lng="55.1737915" _builder_version="4.16" _module_preset="default" link_option_url_new_window="on" global_colors_info="{}"]

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

[/supreme_leaflet_map_item][supreme_leaflet_map_item title="Almas Tower" pin_address="Level 54 - برج الماس - أبراج بحيرات الجميرا - دبي - United Arab Emirates" pin_address_lat="25.0689836" pin_address_lng="55.1412048" _builder_version="4.16" _module_preset="default" link_option_url_new_window="on" global_colors_info="{}"]

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

[/supreme_leaflet_map_item][supreme_leaflet_map_item title="Arabian Oryx House - UAE" pin_address="35WC+7XQ - Barsha Heights - Dubai - United Arab Emirates" pin_address_lat="25.0957167" pin_address_lng="55.1724748" _builder_version="4.16" _module_preset="default" link_option_url_new_window="on" global_colors_info="{}"]

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

[/supreme_leaflet_map_item][/supreme_leaflet_map]

Always Show the Popup

Automatically show all the popups when the map loads and let the user close them when they wish.

[supreme_leaflet_map address="Office 306, TECOM Zone - DIC Building @4 - Al Kawkab St - Al Sufouh - Dubai Internet City - Dubai - United Arab Emirates" address_lat="25.0929152" address_lng="55.159053" double_click_zoom="off" popup_max_width="220" open_all_popup="on" popup_background_color="#222151" title_bottom_padding="0px" _builder_version="4.16" _module_preset="default" popup_title_font="Advent Pro|700|||||||" popup_title_text_color="#FFFFFF" popup_title_letter_spacing="0.3px" popup_content_font="Advent Pro|700|||||||" popup_content_text_color="#FFFFFF" popup_content_font_size="12px" popup_content_line_height="1.7em" border_radii="on|5px|5px|5px|5px" border_width_all="5px" border_color_all="#FFFFFF" border_radii_popup_wrapper="on|5px|5px|5px|5px" box_shadow_style_popup_wrapper="preset1" box_shadow_vertical_popup_wrapper="6px" box_shadow_blur_popup_wrapper="39px" box_shadow_style="preset1" box_shadow_vertical="10px" box_shadow_blur="32px" box_shadow_color="rgba(0,0,0,0.15)" locked="off" global_colors_info="{}"][supreme_leaflet_map_item title="DIC Building 9" pin_address="DIC Building @9 - Al Sufouh - Dubai Internet City - Dubai - United Arab Emirates" pin_address_lat="25.0956855" pin_address_lng="55.1616428" _builder_version="4.16" _module_preset="default" link_option_url_new_window="on" global_colors_info="{}"]

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

[/supreme_leaflet_map_item][supreme_leaflet_map_item title="Almas Tower" pin_address="Level 54 - برج الماس - أبراج بحيرات الجميرا - دبي - United Arab Emirates" pin_address_lat="25.0689836" pin_address_lng="55.1412048" _builder_version="4.16" _module_preset="default" link_option_url_new_window="on" global_colors_info="{}"]

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

[/supreme_leaflet_map_item][/supreme_leaflet_map]

Markers/Pins Clustering

The marker clustering is very useful if you have too many markers. The marker clustering utility helps you manage multiple markers at different zoom levels. To be precise, the ‘markers’ are actually ‘items’ at this point, and only become ‘Markers’ when they’re rendered.

[supreme_leaflet_map address="Office 306, TECOM Zone - DIC Building @4 - Al Kawkab St - Al Sufouh - Dubai Internet City - Dubai - United Arab Emirates" address_lat="25.0929152" address_lng="55.159053" double_click_zoom="off" popup_trigger="hover" popup_max_width="265" close_popup_on_click="on" title_bottom_padding="0px" marker_cluster="on" max_cluster_radius="95" marker_cluster_small="#EB0CE2" marker_cluster_small_border="rgba(235,12,226,0.37)" marker_cluster_medium="#EB0CE2" marker_cluster_medium_border="rgba(235,12,226,0.37)" marker_cluster_large="#EB0CE2" marker_cluster_large_border="rgba(235,12,226,0.37)" _builder_version="4.16" _module_preset="default" popup_title_font="|800|||||||" popup_title_letter_spacing="0.3px" popup_content_font_size="12px" popup_content_line_height="1.7em" marker_cluster_font="Nunito Sans|800|||||||" marker_cluster_text_color="#FFFFFF" marker_cluster_font_size="17px" border_radii="on|10px|10px|10px|10px" border_radii_popup_wrapper="on|4px|4px|4px|4px" box_shadow_style_popup_wrapper="preset1" box_shadow_vertical_popup_wrapper="6px" box_shadow_blur_popup_wrapper="39px" locked="off" global_colors_info="{}"][supreme_leaflet_map_item title="Google Headquarters - UAE" pin_address="Office 306, TECOM Zone - DIC Building @4 - Al Kawkab St - Al Sufouh - Dubai Internet City - Dubai - United Arab Emirates" pin_address_lat="25.0929152" pin_address_lng="55.159053" _builder_version="4.16" _module_preset="default" link_option_url_new_window="on" global_colors_info="{}"]

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

[/supreme_leaflet_map_item][supreme_leaflet_map_item title="Masoo Naqvi Mosque - UAE" pin_address="Lailak 3rd St - Emirates Hills - Dubai - United Arab Emirates" pin_address_lat="25.0686847" pin_address_lng="55.1737915" _builder_version="4.16" _module_preset="default" link_option_url_new_window="on" global_colors_info="{}"]

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

[/supreme_leaflet_map_item][supreme_leaflet_map_item title="Almas Tower" pin_address="Level 54 - برج الماس - أبراج بحيرات الجميرا - دبي - United Arab Emirates" pin_address_lat="25.0689836" pin_address_lng="55.1412048" _builder_version="4.16" _module_preset="default" link_option_url="https://divisupreme.com/feautres" link_option_url_new_window="on" global_colors_info="{}"]

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

[/supreme_leaflet_map_item][supreme_leaflet_map_item title="Arabian Oryx House - UAE" pin_address="35WC+7XQ - Barsha Heights - Dubai - United Arab Emirates" pin_address_lat="25.0957167" pin_address_lng="55.1724748" _builder_version="4.16" _module_preset="default" link_option_url="https://divisupreme.com/feautres" link_option_url_new_window="on" global_colors_info="{}"]

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

[/supreme_leaflet_map_item][/supreme_leaflet_map]

No Bloat!

Just High Performance

Despite its robust code, Divi Supreme Maps is lightweight and fast, with JavaScript added only when required. And Google Map JavaScript will never load on the frontend.

Pro Tip

For accurate geolocation, enter map or marker locations as geographic coordinates (latitude & longitude). Not sure what coordinates to use? Try an online converter or let the Google Map API convert it for you.

Need help?

Go to Documentation
Divi Supreme