Hands-on Tutorial
What’s the leaflet?
The Leaflet library is a popular open-source tool for creating spatial data visualizations. It provides a user-friendly way to create interactive maps that can be easily integrated into various platforms and programming languages. Due to its versatility and compatibility, Leaflet has become one of the most widely used map libraries globally. The library was originally developed by Vladimir Agafonkin in 2011, and since then, it has gained widespread adoption among developers for its ease of use and flexibility in creating interactive maps for web applications.
Prerequisites
Before embarking on the process of building the visualization, it is essential to ensure that we meet the following prerequisites. We need to have several things on our computers.
- R programming language installed, along with several libraries such as
Leaflet
,leaflet.extras
, anddplyr
- Data that we will be using for the visualization should consist of location points in the form of latitude and longitude, along with any additional information. You can easily download a sample dataset for testing purposes
- Lastly, a reliable internet connection is crucial to ensure smooth data retrieval and mapping.
Let’s Create the Data Viz
Building a script to create a leaflet map in R is relatively straightforward. However, if we want to create an interactive and visually appealing map, additional scripts need to be added. The following script will generate a simple yet impressive map. Why is it cool? Because we have incorporated additional information into our markers, including location name, address, longitude, latitude, supervisor, and student’s name, which are displayed in a popup when the marker is clicked. This makes our map more informative and engaging for users.
leaflet(data.location) %>%
addProviderTiles(providers$OpenStreetMap) %>%
addMarkers(lng = ~long,
lat = ~lat,
popup = paste(paste('<b>Office:</b>',
data.location$place),
paste('<b>Address:</b>',
data.location$address),
paste('<b>Lat:</b>',
data.location$lat),
paste('<b>Long:</b>',
data.location$long),
paste('<b>Supervisor:</b>',
data.location$supervisor),
data.location$student1,
data.location$student2,
data.location$student3,
sep = '<br/>'),
label = ~place,
group = 'data.location')
Alright, let’s enhance our map with some additional features. After zooming in and out of each location, it’s useful to have a reset map button that allows us to easily return to the default view. Additionally, we can add a search feature that enables us to search for locations by name, and the algorithm will display relevant results based on our keyword. To implement these features, we can add the following script at the bottom of our previous script. These enhancements will make our map even more user-friendly and convenient to use.
addResetMapButton() %>%
addSearchFeatures(
targetGroups = 'data.location',
options = searchFeaturesOptions(zoom = 15,
openPopup = TRUE,
firstTipSubmit = TRUE,
autoCollapse = TRUE,
hideMarkerOnCollapse = TRUE))
Alright, let’s proceed with adding the measure button and highlighting it for general information or title. The measure button, as the name suggests, allows us to measure the distance between two or more points on the map. This feature is handy for estimating the distance between two cities, and we can draw a straight line point by point even if the route is zigzagged. We can also set the unit of measurement according to our needs, such as meters or kilometres. Finally, to display our general information, it’s a good idea to add an infobox that provides relevant details about the locations or markers on the map. These additional features will enhance the functionality and usability of our map.
addMeasure(
position = 'bottomleft',
primaryLengthUnit = 'meters',
primaryAreaUnit = 'sqmeters',
activeColor = '#3D535D',
completedColor = '#7D4479') %>%
addControl("<P><b>Masterpiece Statistics 53</b>
<br/>Search for offices/ industries<br/>in Java by name.</P>",
position = 'topright')
Summary
In summary, by following the steps and adding the necessary features discussed above, our script is now complete. We can execute the script properly, and our map is ready for interpretation and launch into production.
With the added functionalities and visualizations, our map is now equipped with interactive features, such as markers with detailed information, a reset map button, a search feature, a measure button for distance estimation, and an infobox for displaying general information. These enhancements make our map more user-friendly, informative, and visually appealing. We are now ready to utilize our map for various purposes, such as data visualization, spatial analysis, and decision-making.
We can look at our map in the following figure.

And we can try the feature of searching. For instance, according to our previous codes, it will read any input from the data.

Conclusion
Leaflet is a powerful tool for visualizing spatial data, and it offers a wide range of features that make it a versatile choice for data visualization tasks. With built-in functionalities such as searching, zooming, and more, Leaflet makes it easy to create interactive maps that provide a rich user experience.
Additionally, Leaflet can be easily deployed into HTML, allowing for seamless integration with web-based applications and websites. Its user-friendly interface and extensive documentation make it accessible to users with varying levels of expertise in programming and data visualization. Whether it’s for mapping locations, visualizing geographical data, or creating interactive web maps, Leaflet proves to be a reliable and convenient choice for incorporating spatial data visualization into our projects.
References
A. Woodruff, R. Mullins, C. Jones. Leaflet: Make a web map! (2014), http://maptimeboston.github.io/leaflet-intro.
V. Agafonkin. Leaflet: An Open-source JavaScript Library for Mobile-friendly Interactive Maps (2019), https://leafletjs.com/index.html.