Leaflet Map Module
Last updated
Last updated
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.
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.
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
Here you'll be able to select Different Map Tiles/Styles for Map.
Enable this option to show Zoom Controls on the Map.
Enable this option If you'd like to zoom in/out on the map using the Mouse Scroll Wheel.
Enable this option If you'd like to zoom in on the map by double-clicking.
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.
You can change the Marker Popup trigger method from here. You can set it to either "Hover" or "Click".
Change the Popup max-width from here If you want to increase or decrease popup width.
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.
If you'd like to have all Popups "Open", then enable this option.
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.
The marker clustering Option helps you manage multiple markers at different zoom levels.
Enable this option If you'd like to enable the Marker Clustering option.
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.
In the Design options, you'll be able to make different stylings to the Module, Popup and Popup content, etc.
You can change the Popup background color from here.
And else you can play around with Popup Border Radius, Box Shadow and border etc.
Here you'll be able to style the Popup Title just like any text you style in Divi.
Here you can adjust the Title Bottom Padding to where it looks good to you.
This is where you'll be able to style the Popup Content/Description the way you like.
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.
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.
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.
This is where you'll be able to add your content for Popup that shows on Marker click. You can add Title and Description.
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.
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.
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.
