Interactive Web App Using R Shiny and Leaflet

Team Agilytics would like to introduce R-Shiny package and Leaflet to beginners to create interactive web-map applications.

As an open-source R package, Shiny can be used to build very quick and powerful web applications. In order to build a dashboard with shiny, one does not have to know any HTML, CSS, or JavaScript. But with Shiny, one can still build strong and to-the-point dashboards without knowing about them.

Leaflet is a popular interactive mapping library which is written in JavaScript. For the said purpose R integration for leaflet will be used. There are three simple steps to create a web-map application using Shiny and Leaflet: -

Step 1. Install R Packages

Use R Studio to install following three packages: -

1. shiny 2. leaflet and 3. tidyverse (a powerful collection of data manipulation libraries).

package_vector = c("shiny", "leaflet", "tidyverse") install.packages(package_vector)

Step 2. Create the base Shiny Web App

Create a new project in RStudio and three separate files, and save them into our project directory. Here are the file names:

1. ui.R 2. server.R 3. global.R

When the App is run, global.R runs first and loads everything in that file to the global R session environment. Now edit global.R and load following libraries: -

library(shiny)

library(leaflet)

library(dplyr)

In the Server.R, create server function which will be called once for each session

server <- function(input,output, session){ }

In the UI.R, create an empty page and print Agilytics Web App!:

ui <- fluidPage( print("Agilytics Web App!") )

We can do runApp() from the RStudio console and an empty page with Agilytics Web App! printed will pop up.

Step 3. Create the Base Map

leaflet() creates the map widget.

addTiles() adds the default OpenStreet map tiles

setView() sets the view to the provided coordinates with the provided zoom level.

leafletOutput("mymap",height = 1000)

output$mymap <- renderLeaflet({

m <- leaflet() %>%

addTiles() %>%

setView(lng= 77.4126 , lat= 23.2599 , zoom=5)

m

})

Create a process.R file to do the data preparation and load our dataset like the following:

df = read.csv("./AgilyticsLocations.csv", stringsAsFactors = F)

df <- tidyr::separate(data=df,

col=Location.1,

into=c("Latitude", "Longitude"),

sep=",",

remove=FALSE)

df$Latitude <- stringr::str_replace_all(df$Latitude, "[(]", "")

df$Longitude <- stringr::str_replace_all(df$Longitude, "[)]", "")

df$Latitude <- as.numeric(df$Latitude)

df$Longitude <- as.numeric(df$Longitude)

After the three steps the R files should look like this: -

UI.R :-

ui <- fluidPage( leafletOutput("mymap",height = 1000) )

Server.R :-

server <- function(input,output, session){

data <- reactive({ x <- df })

output$mymap <- renderLeaflet({

df <- data()

m <- leaflet(data = df) %>%

addTiles() %>%

addMarkers(lng = ~Longitude, lat = ~Latitude, popup = paste("Offense", df$Offense, "<br>", "Year:", df$CompStat.Year)) m }) }

Global.R: -

library(shiny)

library(leaflet)

library(dplyr)

df <- readRDS("./sample_data.rds")

Process.R: -

library(shiny)

library(leaflet)

library(dplyr)

library(tidyr)

library(tidyverse)

df = read.csv("./AgilyticsLocations.csv.csv", stringsAsFactors = F)

df <- tidyr::separate(data=df,

col=Location.1,

into=c("Latitude", "Longitude"),

sep=",",

remove=FALSE)

df$Latitude <- stringr::str_replace_all(df$Latitude, "[(]", "")

df$Longitude <- stringr::str_replace_all(df$Longitude, "[)]", "")

df$Latitude <- as.numeric(df$Latitude)

df$Longitude <- as.numeric(df$Longitude)

saveRDS(df, "./data.rds")

Here is what the map looks like after the steps:

Web Map Output

For further information, do send queries to bd@agilytics.in