Leaflet Map Module

🎩 Important Info

Using the Leaflet Map Module, you can easily show OpenStreetMap on your site without having to pay for Google Map API.

Use Google Map API for accurate geolocation for Latitude and Longitude. Just like the built-in Divi Map module, you can search addresses to convert addresses into geographic coordinates (like latitude 37.423021 and longitude -122.083739), which you can use to place markers on a map or position the map.

Otherwise, you can use custom Latitude and Longitude which you can use to place markers on a map or position the map if Google Map API is not available.

Google Map JavaScript will never load on the Frontend.

📥 Module Usage

🧸 Content Options

Adding Marker Items

Click on + Add new Item to add your first Marker on the Map. Clicking + Add new Item will open a completely new list of design settings (including Content, Design, Advanced) for your new Map Marker.

See below for individual Marker Item settings ↓

After you add your first Marker, you will see a gray bar appear with the title of your Icon List shown as a label. The gray bar also has three buttons that allow you to edit, duplicate, or delete the Icon List.

Map

There is where you'll be able to set the location for your Map. If you've added Google Map API, you can simply enter the place name and click on the Find button and It will automatically locate the address.

And if you don't have Map API, you can add Custom Latitude and Longitude. This website will help you find these values for your address: https://www.latlong.net/convert-address-to-lat-long.html

Map Settings

Map Tiles

Here you'll be able to select Different Map Tiles/Styles for Map.

Show Zoom Control

Enable this option to show Zoom Controls on the Map.

Use Scroll Wheel Zoom

Enable this option If you'd like to zoom in/out on the map using the Mouse Scroll Wheel.

Use Double Click Zoom

Enable this option If you'd like to zoom in on the map by double-clicking.

Center Map

This will automatically center the map based on multiple pins. Let's say you have one pin located in the west, and one in the east. turning on the center map will calculate both pins and center map without having to manually adjust the main map.

Popup Settings

Trigger Popup

You can change the Marker Popup trigger method from here. You can set it to either "Hover" or "Click".

Popup Max Width

Change the Popup max-width from here If you want to increase or decrease popup width.

Close Popup on Map Click

Enable this option to close Popup on Map click. Helpful If you've added many markers and when you click on one marker the popup on the other marker will disappear. It will also disappear the popup If you click on the Map area.

Open All Popup

If you'd like to have all Popups "Open", then enable this option.

Auto Close Popup

This option is a bit similar to "Close Popup on Map Click". But with this the popup will only hide If you want to see another one. It will not hide the Popup on Map click.

Marker Clustering Settings

The marker clustering Option helps you manage multiple markers at different zoom levels.

Use Marker Clustering

Enable this option If you'd like to enable the Marker Clustering option.

Maximum Cluster Radius

The maximum radius that a cluster will cover from the central marker (in pixels). Default 80. Decreasing will make more, smaller clusters. You can also use a function that accepts the current map zoom and returns the maximum cluster radius in pixels.

🎨 Design Options

In the Design options, you'll be able to make different stylings to the Module, Popup and Popup content, etc.

Popup Styles

Popup Background Color

You can change the Popup background color from here.

And else you can play around with Popup Border Radius, Box Shadow and border etc.

Popup Title

Here you'll be able to style the Popup Title just like any text you style in Divi.

Bottom Padding

Here you can adjust the Title Bottom Padding to where it looks good to you.

Popup Content

This is where you'll be able to style the Popup Content/Description the way you like.

Sizing

This is where you'll be able to change the Map Width and Height to where it looks good to you.

And else, you can play around with adding Border, Border Radius & Box Shadow to the Map.

Marker Cluster

This is where you'll be able to style the Cluster. You'll be able to change Cluster Background color for 3 different cluster properties (Small, Medium, Large). You can even change the Border color and play around with Typography.

🔗 Advanced Options

Use the advanced options to give your Leaflet module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

📌 Leaflet Pin/Item Settings

Text

This is where you'll be able to add your content for Popup that shows on Marker click. You can add Title and Description.

Map

You need to add the exact address of your location so that the Marker can point out the user where It's exactly on the map. You can use Custom Latitude and Longitude here as well.

Pin

If you want to show a Custom Pin/Marker Icon you can do so here. Enable the "Use Custom Marker Icon/Image" option and It will give you the ability to upload your custom Icon/Image. You also get the facility to add custom width and height to the image.

Link

If you want to redirect the user to a different URL on Marker/Pin click, then you can add a link to the Marker here and It will do the job.