Build a Branded Web Based GIS Application Using R, Leaflet and Flexdashboard
(This article originally appeared on KDNuggets.com here. For more, visit https://www.kdnuggets.com/)
By using R, Flexdashboard and Leaflet, we can build a customized and branded web application to showcase location based data interactively across the organization. Instead of crowding the application with many widgets, we use menu tabs and pages to separate the interactive aspects.
R has many frameworks that allow the user to build applications for data visualization and reporting. The shiny framework has gotten more sophisticated since its inception and if handled right can be used to build production grade applications.
By using R, Flexdashboard and Leaflet, we can build a customized and branded web application to showcase location based data interactively and robustly for employees across the organization. In addition to the interactivity, using menu tabs are a great way to embed more visualizations without compromising the visual impact for the application.
Many dashboards are typically overcrowded with many charts, graphs and tables that do nothing for using it productively. Using different pages for different visuals makes it more professional. Adding the branding element to this application gives it the extra aspect of a professional application that can be used in the workplace or even at a client facing situation.
Save the following code as style.css and place in the same folder as the RMD file.
.navbar-inverse {
background-color: #254a9b;
border-color: transparent;
height: 62px;
}
.navbar-logo img {
margin-left: -15px;
}
The .navbar-inverse{ } styles the main title area with your chosen color and size. This. is where you can customize the title and border to the company's branding.
.navbar-logo img{ } will style the logo you select. This is another crucial part as this small detail of inserting the logo puts the company's mark on this application. Select a logo to act as your figurative company's logo. For the logo, you will need to edit it to be 150px x 60px and place within the same folder as the other files.
The above styling is a differentiator in the competitive landscape of showcasing your projects as it shows that added bit of thought put into a custom built application.
The following code is for the RMD file to build the application
---
title: "Company Web Mapping System"
output:
flexdashboard::flex_dashboard:
orientation: columns
social: menu
vertical_layout: fill
logo: ##### INSERT LOGO FILE PATH ##### ## For the logo, make sure to add the logo in the same folder as your RMD file
css: style.css
navbar:
- { title: "Home", href: "INSERT LINK", align: right }
- { icon: "fa-linkedin",
href: "INSERT LINKEDIN PROFILE LINK", align: right }
---
```{r setup, include=FALSE}
library(flexdashboard)
library(leaflet)
library(htmltools)
library(leaflet.extras)
library(datasets)
library(sf)
library(crosstalk)
library(dplyr)
library(reactable)
```
Circle Map {data-navmenu="Locations"}
=====================================
Column {data-width=500}
-----------------------------------------------------------------------
### Circle Markers
```{r}
cities <- read.csv(textConnection("
City,Lat,Long,Pop
Boston,42.3601,-71.0589,645966
Hartford,41.7627,-72.6743,125017
New York City,40.7127,-74.0059,8406000
Philadelphia,39.9500,-75.1667,1553000
Pittsburgh,40.4397,-79.9764,305841
Providence,41.8236,-71.4222,177994
"))
leaflet(cities) %>% addTiles() %>%
addCircles(lng = ~Long, lat = ~Lat, weight = 1,
radius = ~sqrt(Pop) * 30, popup = ~City
)
```
Column {data-width=500}
-----------------------------------------------------------------------
### Earthquakes
```{r}
outline <- quakes[chull(quakes$long, quakes$lat),]
map <- leaflet(quakes) %>%
# Base groups
addTiles(group = "OSM (default)") %>%
addProviderTiles(providers$Stamen.Toner, group = "Toner") %>%
addProviderTiles(providers$Stamen.TonerLite, group = "Toner Lite") %>%
# Overlay groups
addCircles(~long, ~lat, ~10^mag/5, stroke = F, group = "Quakes") %>%
addPolygons(data = outline, lng = ~long, lat = ~lat,
fill = F, weight = 2, color = "#FFFFCC", group = "Outline") %>%
# Layers control
addLayersControl(
baseGroups = c("OSM (default)", "Toner", "Toner Lite"),
overlayGroups = c("Quakes", "Outline"),
options = layersControlOptions(collapsed = FALSE) %>%
addMeasure(position = "topleft",
activeColor = "#254a9b",
completedColor = "#254a9b",
primaryLengthUnit = "kilometers") %>%
addEasyButton(easyButton(
icon="fa-crosshairs", title="Locate Me",
onClick=JS("function(btn, map){ map.locate({setView: true}); }"))) %>%
addSearchOSM() %>%
addResetMapButton() %>%
addDrawToolbar(
targetGroup='draw',
editOptions = editToolbarOptions(selectedPathOptions = selectedPathOptions())) %>%
addLayersControl(overlayGroups = c('draw'), options =
layersControlOptions(collapsed=FALSE)) %>%
addStyleEditor()
)
```
Interactive Map {data-navmenu="Interactive Map"}
=====================================
### Chart C
```{r}
# A SpatialPointsDataFrame for the map.
# Set a group name to share data points with the table.
brew_sp <- SharedData$new(breweries91, group = "breweries")
# A regular data frame (without coordinates) for the table.
# Use the same group name as the map data.
brew_data <- as_tibble(breweries91) %>%
select(brewery, address, village, founded) %>%
SharedData$new(group = "breweries")
map <- leaflet(brew_sp) %>%
addTiles() %>%
addMarkers()
tbl <-
reactable(
brew_data,
selection = "multiple",
onClick = "select",
rowStyle = list(cursor = "pointer"),
minRows = 10
)
htmltools::tagList(map)
```
### Table
```{r}
htmltools::tagList(tbl)
```
As shown above, the data-navmenu= syntax creates a drop down menu option for users to switch between pages. This is a key point in the simple web app whereby many pages and functionality can be embedded without overcrowding a single space and making it look more professional. A key part of designing a web application/dashboard is not overcrowding the screen with graphs, charts and texts etc so as not detract from key points for the sake of having more information in a single visual area. Using different tabs, pages, and links will enable the user to see and use more information while still having an aesthetically pleasing application.
Using RStudio Leaflet
The RStudio Leaflet package is an R front end to the Leaflet.js javascript library, which is one of the most used open source web mapping libraries in the market.
R users can now access leaflet's functionality almost without any javascript knowledge, however R's version of leaflet also allows custom javascript to be used for more functionality.
Extensions for R Leaflet
Like with many powerful and popular R packages, there have been supplementary packages that extends their functionality. Some of the packages for these tasks are:
Continue reading and listening
Stay in the loop.
Subscribe to our newsletter for a weekly update on the latest podcast, news, events, and jobs postings.