Interactive maps are gaining popularity in the business world. The presence of the location of the business on the map makes it easier for customers to trust you and find you.
The Leaflet module is designed to work with maps. It is very powerful, user-friendly, and functional, integrated with the most popular mapping services (such as Google Maps, OSM).
Using it, you can easily create an interactive map of any complexity, appearance, and functionality. For example, you can designate all branches of a network or create a map of terrain areas that will be displayed on a geodetic map, using already available data without additional effort.
Precisely because this module provides so many necessary features, our web developers would advise you to pay attention to it. In short, with its help, you can easily create your own personal Google Maps!
Success formula
Satisfied customers + More customers + Business development + Higher profits
What is the Leaflet module in Drupal 8 and how does it work?
The Leaflet module for interactive maps makes it easy to create a map with special dots or areas on it and add it to your website page. It opens up ample opportunities for you to customize the labels to suit your needs.
With the Leaflet module, you can:
- have a correctly sized map
- configure the permissions of the card management settings for different users
- change the view of a marker or an area on the map
- adjust what exactly will be displayed when clicking on the marker.
Note! To use the Drupal Leaflet module, you must install the Geofield module, since this module creates the fields that View Geodata is taken from.
Drupal's Leaflet module uses Open Street Maps as a base. Alternatively, you can install the Leaflet More Maps module, which expands the list of different maps to about two dozen (including several options for Google Maps and topological maps).
However, the Drupal 8 version of this module is the alpha stage of development.
Top 6 unique features of the Leaflet module for Drupal site
1. To visualize your maps, you can add:
- markers
- popups
- polylines
- polygons
- circles
- rectangles
- image overlays
2. To work with the map, you can:
- add keyboard navigation
- marker dragging
- zoom with Double click
- use pinch-zoom on smartphones
- zoom into one area
- use the scroll wheel to zoom
- use drag panning with inertia
3. To embellish your map you can use such graphic features:
- pan animation
- tile fade animation
- popup fade animation
- default design for markers/popups
- retina support
4. To change the interactive map, you can customize the features:
- simple MCSS3 pop-ups for restyling
- image and HTML-based markers
- a simple interface to manage
- custom map projections
- OOP facilities
5. To control interactive maps on your Drupal site, you add elements like:
- buttons to zoom
- scale
- attribution
- layer switcher
6. Works on desktop and mobile browsers:
- Chrome
- Safari
- Firefox
- Opera
- IE
- Android browser
- Edge
How to use the Leaflet module for adding interactive maps?
Let's show you an example of how everything works and how you can customize/create interactive maps.
So, for example, suppose we want to create a map of famous places in Houston, Texas. Our main task is to create this list with addresses, add photographs of the places, and create a map with dots to designate locations.
- To do this, we create a Content type called Landmark with Body fields.
- We rename the Body field to Address and save the line with the address there.
- A landmark photo is a place where a photo of a specific geographic location will be.
- The Location field, of type Geofield, stores the coordinates of this location.
Next, let's create several instances of this type. For example, the Houston Zoo.
Geofield can work with geodata in various formats, as you will see it below. At the moment, initially, it is the latitude and longitude mode in decimal format.
Such data can be copied directly from the Browser address bar by selecting the appropriate object on Google Maps. We need all the numbers to the coma. The first value, 29.7141841 is latitude, and the second, 95.4172591 is longitude.
If you need the coordinates of an arbitrary point on the maps that is not already an object in Google Maps, you just need to click in the right place and a window with the necessary coordinates will appear below. You can copy them from there.
Once created, our page about the zoo will look like this:
The POINT line (-95.4172591 29.7141841) is the output from the Geofield module. This is one of the formats in which it stores and displays data.
In order to have a map here, go to the Manage Display of our Landmark Node and select the Leaflet Map display format for the Location field.
Now, instead of coordinates, we have a map with a designation point for this place. This is all the result of the Leaflet module.
In the settings of this display format, you can configure:
- map dimensions
- type of map (if you installed the Leaflet More Maps module before)
- the scale to display the map
- can this scale be changed by users
- set up your marker to replace the standard one
- customize the appearance of the selected area
and so on.
For example, we will display our text and photo when clicking on a marker from a Node using a token.
Check the Popup information box and write your own text, for example, Welcome :) and the [node: field_landmark_photo] token, which will be replaced with the content of the field with the machine name field_landmark_photo.
As a result, we get this when clicking on the marker
Here in the settings in the Map Icon section, you can change the type of marker — including just making up something new. For example, select the Field (HTML DivIcon) item and insert the following HTML piece:
<div style="width: 25px; height: 25px; background-color: red; border-radius: 50%; color: white; text-align: center">:-)</div>
After these manipulations, our marker looks like this
If we have several such nodes with coordinates, or just several coordinates or areas, you can display a map on which they will all be displayed. To do this, you need the Leaflet Views submodule.
There are three instances of the Landmark type, each with the coordinates of its location in the Location field of the Geofield type. Let's create a View. When creating, you need to select the Create a Page option. There we will be able to choose the format for displaying the Leaflet Map:
Next, be sure to add the Location field to Fields. Then go to Format / Leaflet Map / Settings. Here are the same map settings for Node.
An important nuance is that the Geofield type field is selected in the Data Source field (in our case, it will be Location). We also select the Title field in the Description field. This will give you the opportunity to display the name of the object, and there will be a link to the page of the corresponding Node when clicking on the marker.
Now if you go to the page created by this View (in the example the page will be the address/landmarks), you will see three new points on the map.
You can enable markers grouping. To do this, select the Markers clustering option in the bottom display mode settings.
After saving the settings, our markers will be grouped as needed and the number of markers in the group will be displayed (in this example, 2).
When you click on this grouping symbol (or cluster, if you use the terminology of the module), it will disintegrate into separate markers and look like the previous screenshot. If you zoom out on the map, all three markers are grouped into one.
Now let's use one more feature of the Leaflet module and try to display the area instead of the marker.
To do this, first of all, go to the Manage Form Display of our Node and select the Geofield WKT widget there for the Location field.
This will allow us to enter data in the WKT format, which allows us to describe geometric shapes. For example, now we can describe a polygon.
For ease of use, and to avoid the intricacies of the WKT format, you can use the Wicket site. That’s what we did. You can draw what you need right on the map, and it will automatically generate data in the required format.
So, go to the Wicket site, click the Clear Map button on the right to erase the example from the map. Next, we select a polygon on the map and outline the Toyota center.
Next, copy the generated data and paste it into the Location field of our Toyota Center.
Now we have on the map not a marker, but an area (in the blue outline).
In the end, we will get two markers and one area (highlighted with a red circle). Doesn't that look great?
This is how the module for creating interactive maps in a Drupal site works. The result is worth playing around with while you’re setting it up. If this is too difficult for you, then just get help from web developers.
Add interactive maps with the Leaflet module to your Drupal website right now!
The client is more likely to contemplate information in a convenient, visual, and beautiful format. Therefore, if your business has something related to locations, routes, or territories, you definitely need to install the Leaflet module. With its help, all the important information about your business can be presented in the form of a superb and convenient map.
When it is convenient for the clients, they will be happy to cooperate with you. To install and configure the Leaflet module please contact our web development company.