Audhi Aprilliant
Audhi Aprilliant Data Scientist. Tech Writer. Statistics, Data Analytics, and Computer Science Enthusiast

Data Visualization Through Leaflet Using R

Data Visualization Through Leaflet Using R

Overview

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.

Interaction Features

  • Drag panning with inertia
  • Scroll wheel zoom
  • Pinch-zoom on mobile
  • Double click zoom
  • Zoom to area (shift-drag)
  • Keyboard navigation
  • Events: click, mouseover, etc.
  • Marker dragging

Personal Project

Prerequisites
Before we begin to build the visualization, make sure we fulfil the following requirements:

  • Programming language of R with several libraries, such as leaflet, leaflet.extras, and dplyr
  • The data consists of location point (latitude and longitude) and additional information. You can easily download the sample data here
  • Good internet connection

Explanation
For building a script to create a leaflet map in R is quite simple. But, if we want to build an interactive and beautiful map, of course, some script must be added. The following script will create our simple map (actually it’s quite cool). Why? Because we have added some information to our marker, such as location’s name, address, longitude, latitude, supervisor, and students’s name, instead of only markers. That information is displayed using popup after we click the marker

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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')

Okay, let’s add some features to our map. After zooming in and out each location, it’s good to reset our view to default. So, we can add a reset map button. Further, we have a search feature to simplify our searching, just by typing our location’s name and the algorithm will show up relevant result based on our keyword. So, just adding following script at the bottom of the previous script.

1
2
3
4
5
6
7
8

addResetMapButton() %>%
addSearchFeatures(
  targetGroups = 'data.location',
  options = searchFeaturesOptions(zoom = 15,
                                  openPopup = TRUE,
                                  firstTipSubmit = TRUE,
                                  autoCollapse = TRUE,
                                  hideMarkerOnCollapse = TRUE))

Okay then, we add measure button and highlight for general info or title. For the measure button, as its name, it will show us the distance between two points or more. We can estimate the distance between two cities using this feature. If we meet the zigzag route, we can make it like polygon-shape. The unit of measurement must be set depending on our needs, for instance in meters. Lastly, to show up our general information, it’s good to add like infobox.

1
2
3
4
5
6
7
8
9

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')

Recap
To recap our script, we can run the following script properly and voila, our map is ready to interpret and launch to production.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

# Load the libraries
library(leaflet)
library(leaflet.extras)
library(dplyr)

# Load the data
data.location = read.csv('/path-to-file/Location Data.txt',
                         header = TRUE,
                         sep = ',')
# Create leaflet
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') %>%
  addResetMapButton() %>%
  addSearchFeatures(
    targetGroups = 'data.location',
    options = searchFeaturesOptions(zoom = 15,
                                    openPopup = TRUE,
                                    firstTipSubmit = TRUE,
                                    autoCollapse = TRUE,
                                    hideMarkerOnCollapse = TRUE)) %>%
  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')

We can look at our map like the following figure

Sources

Map Time Boston Leaflet JS

comments powered by Disqus