This particular query doesn't directly involve JavaScript, however I strongly believe it is at the core of the problem. I possess a dataset containing crime statistics in Seattle.
Offense Date Longitude Latitude
3 Assault 2015-10-02 -122.3809 47.66796
5 Assault 2015-10-03 -122.3269 47.63436
6 Assault 2015-10-04 -122.3342 47.57665
7 Weapon 2015-04-12 -122.2984 47.71930
8 Assault 2015-06-30 -122.3044 47.60616
9 Burglary 2015-09-04 -122.2754 47.55392
My objective is to construct a heatmap in Shiny using rCharts, akin to Ramnath's demonstration on Houston's crime data heatmap. This will involve selecting a date range and subset of offenses from the user, then drawing a heatmap over a Leaflet map.
The following snippet represents my ui.R:
library(shiny)
library(rCharts)
library(rjson)
shinyUI(fluidPage(
headerPanel("Crime in Seattle"),
sidebarPanel(
uiOutput("select.date.ran"),
uiOutput("select.crime")
),
mainPanel(chartOutput("my.map", "leaflet"),
tags$style('.leaflet {height: 500px;}'),
tags$head(tags$script(src="leaflet-heat.js")),
uiOutput('spd.map'))
))
The file leaflet-heat.js is located in a www directory within the Shiny app folder (I have attempted both setting src="http://leaflet.github.io/Leaflet.heat/dist/leaflet-heat.js" and including type="text/javascript" in tags$script with no success). The subsequent code showcases my server.R:
library(shiny)
library(rCharts)
library(rjson)
spd <- readRDS("data/spd.rds")
shinyServer(function(input, output, session) {
output$select.date.ran <- renderUI({
dateRangeInput("sel.date", "Choose date range:",
start = "2014/01/01", end = "2015/10/05",
separator = "to", format = "yyyy/mm/dd",
startview = "month", weekstart = 0,
language = "en")
})
output$select.crime <- renderUI({
checkboxGroupInput(inputId = "sel.crime", "Select crimes:",
choices = c("Theft", "Fraud", "Drugs/Alcohol",
"Weapon", "Assault", "Disturbance",
"Robbery", "Homicide", "Prostitution"),
selected = "Theft")
})
output$my.map <- renderMap({
my.map <- Leaflet$new()
my.map$setView(c(47.5982623,-122.3415519) ,12)
my.map$tileLayer(provider="Esri.WorldStreetMap")
my.map
})
output$spd.map <- renderUI({
spd.dat <- spd[spd$Offense %in% input$sel.crime &
(spd$Date >= input$sel.date[1] &
spd$Date <= input$sel.date[2]), c(3, 4)]
spd.json <- toJSONArray2(spd.dat, json = FALSE, names = FALSE)
tags$body(tags$script(HTML(sprintf("
<script>
var addressPoints = %s
var heat = L.heatLayer(addressPoints).addTo(map)
</script>", rjson::toJSON(spd.json)
))))
})
})
Upon running the application, all elements like the map and sidebar appear correctly, but the heatmap isn't visible. When I inspect the browser's developer tools Javascript console, I notice two instances of "Uncaught SyntaxError: Unexpected token <" errors.
To put it succinctly: what do these errors signify and how can they be resolved? My understanding is that the root cause may lie here, but if not, are there other reasons impeding the display of the heatmap?
Edit: After removing <script> from HTML(sprintf(..., the previous error changes to "Uncaught TypeError: Cannot read property 'lat' of undefined". Does this mean the presence of <script> was incorrect? And does the new error suggest that L.heatLayer is inadequately interpreting the json as latitude/longitude coordinates?