Translating a leafletJs add-on into a Shiny R app

[Tebz Killian]

Hi everyone, I've got a question, it's concerning, shiny and leaflet, I'm using leafet on shiny, but I'd like to use the baselayer of googleMaps and I've found a leafletJs add-on that do the job by using just a little bit of code, but I was wondering how to translate this into shiny R, the code is this :

## In the head section of the HTML page
## Include the GMaps JS API in your HTML, plus Leaflet:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" async defer></script>
<link rel="stylesheet" href="https://unpkg.com/lea...@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/lea...@1.0.3/dist/leaflet.js"></script>

## Include the GoogleMutant javascript file:
<script src='https://unpkg.com/leaflet.gridlayer.googlemutant@latest/Leaflet.GoogleMutant.js'></script>

## create an instance of L.GridLayer.GoogleMutant on your JS code:

var roads = L.gridLayer.googleMutant({
    type: 'terrain' // valid values are 'roadmap', 'satellite', 'terrain' and 'hybrid'}).addTo(map);

The point is, I'm not familiar with Js, so maybe you could help me with this...?

Thanks.

[Bárbara Borges]

As for inserting scripts/css links in the page's head, you can include these in your ui function (for example inside fluidPage()):

tags$head(tags$script(src="[your source]")),                                   # link to javascript
tags$head(tags$link(rel="stylesheet", type="text/css", href="[your source]"))  # link to css

[your source] may be either an URL (like your case) or a relative path for an asset (either a JS or a CSS file, respectively) stored in your app's www directory. You can see example of this is a deployed app in this article.

As for the part that requires you to add an instance of an object, you can either add your own script.js file to the www directory (see the app I linked to for an example) or explore the shinyjs package to see if it can help you inject that directly in your app at the right time. You'll always need to know a little bit about JS in order to get something together. There's so seamless integration with that JS library in Shiny (like there is with the leaflet library, through the leaflet R package), so you'd have to be the one gluing things together.

[Tebz Killian]

Ok thank you for your answer, by that time, i've managed to make the map appear, and more than that where I want (in a leafletOutput), the thing is, in the server part, I'm not able to communicate with the map that has been stored has a Js var, so when I'm trying to add any layer with a leafletProxy, I can see in the console that "there is no map with this Id" ...

[Bárbara Borges]

I'm not super familiar with leaftlet but I could try to see can or cannot be done if you are able to share a minimal reproducible example. And, could you also give me the link to the add-on and the usage instructions you found?

[Tebz Killian]

I've sent you the attachement of what "works" at the moment, the link to the leafletJs is this one GoogleMutant, in fact at the moment I think the problem is coming from the fact that I don't know how to bind a Javascript variable, in this case the map, in order to be able to use it in R, to add tiles on it and stuff.