Skip to content

Instantly share code, notes, and snippets.

@aoles
Last active April 1, 2021 23:44
Show Gist options
  • Save aoles/cb992657bb2f1b962bad3ca33aa15ebe to your computer and use it in GitHub Desktop.
Save aoles/cb992657bb2f1b962bad3ca33aa15ebe to your computer and use it in GitHub Desktop.
ORS directions demo Shiny app https://aoles.shinyapps.io/directions
library(shiny)
library(leaflet)
library(openrouteservice)
## User interface definition
ui <- bootstrapPage(
includeScript("busy_indicator.js"),
includeCSS("style.css"),
leafletOutput("map", width = "100%", height = "100%"),
absolutePanel(top = 10, right = 10, id="controls",
selectInput("profile", "Profile", c(driving = "driving-car",
cycling = "cycling-regular",
walking = "foot-walking")),
conditionalPanel(
condition = "input.profile == 'driving-car'",
checkboxInput("highways", "Avoid highways", value = FALSE)
),
conditionalPanel(
condition = "input.profile != 'driving-car'",
checkboxInput("steps", "Avoid steps", value = FALSE)
)
),
div(id = 'loader')
)
## Application logic
server <- function(input, output) {
## Draw map
output$map <- renderLeaflet({
leaflet() %>%
addTiles() %>%
setView(8.675581, 49.418579, zoom = 9)
})
## Capture clicks and save their coordinates
points <- reactiveVal(NULL)
observeEvent(input$map_click, {
if (nrow(points())>=2 || is.null(points())) {
points(data.frame(lng = input$map_click$lng, lat = input$map_click$lat))
leafletProxy("map") %>% clearGeoJSON()
}
else {
points(rbind(points(), c(input$map_click$lng, input$map_click$lat)))
}
leafletProxy("map") %>% clearMarkers() %>% addMarkers(points()$lng, points()$lat)
}, ignoreNULL = TRUE)
## Get routing options
avoid <- reactive({
if (input$profile == 'driving-car') {
if (isTRUE(input$highways))
"highways"
}
else if (isTRUE(input$steps))
"steps"
})
## Compute route
route <- reactive({
req(points())
if (nrow(points()) %% 2 == 0)
ors_directions(coordinates = points(),
profile = input$profile,
options = list(avoid_features = avoid()),
format = "geojson")
})
## Draw route on map
observeEvent(route(), {
leafletProxy("map") %>%
clearGeoJSON() %>%
addGeoJSON(route(), fill=FALSE)
})
}
shinyApp(ui, server)
$(function() {
$(document).on({
'shiny:busy': function(event) {
$('#loader').show();
},
'shiny:idle': function(event) {
$('#loader').hide();
}
});
});
html, body {
width: 100%;
height: 100%;
}
#controls {
background: rgba(255, 255, 255, 0.8);
padding: 10px;
border-radius: 5px;
}
/* Center the loader */
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment