Enhance Your R Shiny Leaflet with JavaScript Addons for Stunning Heat

I am currently exploring the use of a javascript addon for leaflet called the heatmap functionality, which can be found at https://github.com/Leaflet/Leaflet.heat. My goal is to integrate this feature into Shiny, however, it seems that the leaflet package for R does not include this addon by default. Therefore, I would need to manually include this JS script. I came across a post on rCharts that provided some insight on how to achieve this:

server.R.

 HeatMap$addAssets(jshead = c("http://leaflet.github.io/Leaflet.heat/dist/leaflet-heat.js"))
 HeatMap$setTemplate(afterScript = sprintf("<script>
      var addressPoints = %s
      var heat = L.heatLayer(addressPoints).addTo(map)           
      </script>",
      rjson::toJSON(dt)))

(source: https://github.com/ramnathv/rCharts/issues/498 )

However, as someone with limited knowledge in JS and new to leaflet, it is still unclear to me how to fully incorporate this feature - starting from obtaining the JS script from github to ultimately creating a heatmap using leaflet with the 'quakes' dataset.

Below is a snippet of my server side code:

library(leaflet)
output$mymap <- renderLeaflet({
    leaflet() %>%
      addProviderTiles("OpenMapSurfer.Roads",
                       options = providerTileOptions(noWrap = TRUE))
 %>% addMarkers(clusterOptions = markerClusterOptions(), data = quakes))

Instead of using clusterOptions, I aim to add a heatmap indicating the magnitude of the earthquakes (the dataset 'quakes' is readily available in R for reference).

Answer №1

When working with Shiny, the setTemplate(afterscript...) function may not work as expected. Instead, it's recommended to use tags$() and render the heatmap output separately from the map.

Below is a simple app that demonstrates the use of heatmaps (inspired by this SO answer).

server.R

...code block for server.R...

ui.R

...code block for ui.R...

Edit - Using Google Maps

In the development version of googleway, there is also a way to achieve this functionality. Please make sure to have a valid Google API key, as it currently only works in a browser environment.

...code block for using Google Maps...

https://i.sstatic.net/wOMnL.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to modify the values of a Bootstrap Dropdown using a unique identifier

Here is an example of a typical Bootstrap Dropdown: <div class="btn-group"> <button type="button" class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default option<span class ...

A guide to querying JSON data in a backend database with JavaScript

My backend JSON DB is hosted on http://localhost:3000/user and contains the following data: db.json { "user": [ { "id": 1, "name": "Stephen", "profile": "[Unsplash URL Placehol ...

What is the process for adding and merging two data frames together?

I am working with two different sets of data: SET 1: ID com_alc_cd com_liv_cd com_hyee_cd A 1 0 0 B 0 0 1 D 0 0 0 C 0 1 0 ...

What is the primary measurement unit used in the annotate() function within ggplot2?

I have been searching extensively but cannot find the default unit size of annotate() in ggplot2. I am struggling to set a specific unit size in annotate(). For instance, when I attempted the following code, it failed to work: annotate(geom = "text", lab ...

There seems to be an issue with posting JSON data correctly

Currently, I am attempting to include an object with numerous attributes within it. This is the object I am trying to use with $.post: ({"fname" : fname, "lname" : lname, "gender" : gender, "traits" : { "iq" : inte ...

How can you confirm the validity of a dropdown menu using JavaScript?

<FORM NAME="form1" METHOD="POST" ACTION="survey.php"> <P>q1: How would you rate the performance of John Doe? <P> <INPUT TYPE='Radio' Name='q1' value='1' id='q1'>1 ...

Transforming JavaScript array UNIX timestamps into JavaScript Date objects

Is there a way to convert UNIX epoch integers into JavaScript Date objects using jQuery? Attempting to pass a large JSON array generated by PHP to Highmaps.JS, which works almost great. However, Highmaps expects a Date object and Date objects aren't ...

Transferring array data between two distinct click actions

Is there a way to transfer values between click events in jQuery? For example, on the first click event I want to add or remove values from an array based on whether a checkbox is checked. Then, on the second click I would like to iterate through all the ...

Delete elements from a dynamic list

I am working with a dynamic array containing chat messages, structured like this: { id:1, message: bla-bla }, { id:2, message: bla-bla }, { id:1, message: bla-bla }, { id:1, message: bla-bla }, { id:3, message: bla-bla }, { id:4, message: bla- ...

How to retrieve the changing input value in ReactJS using Jquery/JS

I have a form in WordPress with two input range sliders. The form calculates the values of these sliders and displays the result as shown below: <input data-fraction-min="0" data-fraction="2" type="hidden" data-comma=" ...

jQuery functions not functioning properly when triggered by an event

I encountered an issue with my page using jQuery and Bootstrap. Everything was functioning properly until I tried calling a function on an event, which resulted in the console showing an error message saying $(...).function is not a function. For example: ...

Discovering patterns in time series data by leveraging the power of the Bursts package in R

I attempted burst detection using the bursts package to identify spikes in a time series. However, when I executed kleinberg(ts), an error message appeared: Error in kleinberg(ts) : Input cannot contain events with zero time between! The specific tim ...

Tips on preventing the initial undefined subscription in JavaScript when using RxJS

I am having trouble subscribing to an object that I receive from the server. The code initially returns nothing. Here is the subscription code: ngOnInit() { this.dataService.getEvents() .subscribe( (events) => { this.events = events; ...

Error during compilation in npm (symbol '_' is not recognized)

After updating all the dependencies in my JavaScript program without making any changes to my components, I encountered an error when running: npm run build The error specifically mentions a problem with one of my components: Failed to compile. ./src/c ...

Numerous Google Gauges featuring varying sets of options

Currently, I am facing a challenge involving the insertion of multiple instances of Google Gauges (or Highchart Gauges) on a single page. The goal is to utilize different option sets and separate their placement accordingly. Unfortunately, the solution pro ...

Tips for resolving a blank screen issue when attempting to render components using the `:is="component"` attribute

Working with NativeScript-Vue for Android, my goal is to display a component based on button taps. To achieve this, I am utilizing this plugin which helps in integrating a global SideDrawer for smooth navigation. The buttons within the SideDrawer are used ...

Changing the color variable of an object using an onClick function in JavaScript

I'm currently working on a simple game where users can draw using the keys W, A, S, and D. If you want to take a look at the progress I've made so far, here is a JSFiddle link. There's a collision function in the code that I no longer need, ...

Is there a way to display a Google Map marker after a certain amount of time without needing to refresh the

Is it possible to update Google Map markers without refreshing the map itself every 30 seconds? The markers' latitudes and longitudes are retrieved from a database. Once obtained, these markers are then allocated onto the Google Map. However, the i ...

Testing with karma/jasmine in AngularJS can lead to issues when there are conflicts between test

Currently experiencing challenges while running my midway tests (or integration tests, which are halfway between unit tests and E2E tests). Working with an AngularJS build featuring RequireJS, I am utilizing the RequireJS plugin in Karma to run the tests. ...

How can you eliminate a specific element from an HTML document?

Utilizing localStorage can be tricky when it comes to keeping the JSON file hidden from being displayed on the HTML page. One approach I used involves sending the JSON file to the client once and then performing all logic using that file. To prevent the JS ...