CODEWITHSUNDEEP
javascripthtmlrmapsleaflet
mmalloy
mmalloy

Reputation: 74

How do I output leaflet map from R into format where I can edit using Leaflet commands?

I have some experience with using R for data manipulation and making maps with GIS software, so I just tried to make my first Leaflet map using the Leaflet for R package. Working off of tutorials I've been able to do this just fine, but there are a few tweaks I would like to make to my final map that appear to be possible using 'regular Leaflet', but not the R package (using a tile layer of labels only in a custom map pane so that the geography labels appear above my polygons, etc.). This is fine, except I cannot figure out where in the output files for my map I can make the necessary edits using the Leaflet syntax.

I am exporting my map using the following code, based off this example:

saveWidget(myMap, 'myMap.html', selfcontained = FALSE)

I am not very familiar with the HTML output; I've made maps in QGIS that were exported to HTML files, but I never needed to edit the source code. I'm looking for a file in which I can add Leaflet commands. The index.html file appears to be the only file that contains information specific to my map, with the other files containing code that the index.html file references in order to display the map. I thought that this would be the place to edit the code with Leaflet commands, but it doesn't look anything like the examples of Leaflet map code that I've seen at all. I'm not including my full index.html file here because it's too long, but it looks nothing like the Leaflet script here. No var = or L.tileLayer, L.polygon, etc. I don't see map objects, simply coordinates.

What I assume is happening is that when I output the Leaflet map using HTML widgets, the R is translated into Leaflet, which is then translated into base Javascript, which I see in my index.html file. So first of all, I'm wondering if this is accurate.

If it is accurate, my question is: Is there a way to output the map from R into Leaflet commands instead of just Javascript?

If it is not accurate, my question is: Can I edit the files I have right now in my map output folder using Leaflet? (I may be misunderstanding Leaflet-It's a library of custom commands that are different than typical Javascript, right?)

My apologies in advance if this is a very basic question, I'm definitely a novice here.

EDIT: Here is an image of the HTML file for my map. I'm assuming this is all base Javascript (or maybe even simplified Javascript?) and that if I want to tweak the map further, I have to do it here by referencing the Leaflet source code. Unless there is a way to reference the Leaflet library within the htmlwidgets::onRender command mentioned in the first reply, where I can then write in Leaflet.

HTML file for map

Upvotes: 3

Views: 1273

Answers (1)

timelyportfolio
timelyportfolio

Reputation: 6579

In effect, the leaflet htmlwidget does what you have described under the hood. Instead of direct leaflet commands, it uses methods defined here to manipulate the map as seen in the screenshot below.

leaflet methods code

Calls from R

The calls from R are stored on map$x$calls. Let's use some code from ?leaflet to make a quick map, so we can see what is happening.

# from ?leaflet
library(leaflet)

rand_lng = function(n = 10) rnorm(n, -93.65, .01)
rand_lat = function(n = 10) rnorm(n, 42.0285, .01)

m = leaflet() %>%
  addTiles() %>%
  fitBounds(0, 40, 10, 50) %>%
  setView(-93.65, 42.0285, zoom = 17) %>% 
  addPopups(
    -93.65, 42.0285, 'Here is the <b>Department of Statistics</b>, ISU'
  ) %>%
  clearBounds()

m$x$calls

Or more graphically looks like this (see here for live example).

leaflet calls

These calls are sent as JSON when the leaflet widget is created. This approach provides lots of helpers for working with leaflet and is especially helpful for a R user unfamiliar with leaflet or JavaScript. However this intermediate step might make what you are trying to accomplish slightly more difficult.

onRender

If I understand correctly, htmlwidgets::onRender() might do exactly what you want. Let's see it in action.

htmlwidgets::onRender(
  m,
  "
  function(el, x, data) {
    // our leaflet map is available as this
    console.log(this);
  }
  "
)

If you open the map in browser and inspect with developer tools (ctrl + shift + i), you will see that the leaflet map is available for further manipulation.

Follow up

I hope this helped. Please let me know if you have more questions, and I will be happy to help answer.

Upvotes: 1

Related Questions