'Add a leaflet map in HMTL format in a shinyapp

I have a html file with a leaflet map on it, I want to add this file in a shiny app. If I add the map ausing includeHTML() directly in the ui the ShinyApp renders the map without problems, however I have differents maps so I need to render the maps in base of a differents inputs so thats why i use the renderUI function that allows me to use some conditionals before make the output and include the hmtl maps files. I've tried:

  • Using tagList or fluidPage but it doesnt work.
  • Just leave the body tags inside the html file and put the head tags inside the shinyApp. But these tries didn't work. I'll apreciate any advice. Thanks

app.R

library(shiny)

ui <- tagList(
  
  actionButton("go","go!"),
  uiOutput("map")
  
  )

server <- function(input, output, session) {
  
  
  observeEvent(input$go,{
    
    output$map <- renderUI({
      
      includeHTML("www/map1.html")
        
    })
    
  })
  
 
}

shinyApp(ui, server)


Map1.html ----

const map = L.map('map', {
  center: [-29.50, 145],
  zoom: 3.5
});

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);


const marker1 = L.marker([-37.699450, 176.279420]).addTo(map);
const marker2 = L.marker([-27.643310, 153.305140]).addTo(map);
const marker3 = L.marker([-33.956330, 122.150270]).addTo(map);
const marker4 = L.marker([-34.962390, 117.391220]).addTo(map);
const marker5 = L.marker([-17.961210, 122.214820]).addTo(map);
const marker6 = L.marker([-16.505960, 151.751520]).addTo(map);
const marker7 = L.marker([-22.594400, 167.484440]).addTo(map);
const marker8 = L.marker([-37.977000, 177.057000]).addTo(map);
const marker9 = L.marker([-41.037600, 173.017000]).addTo(map);
const marker10 = L.marker([-37.670300, 176.212000]).addTo(map);
body {
  margin: 0;
  padding: 0;
}

#map {
  width: 100vw;
  height: 100vh;
}
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />

<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>

<div id="map"></div>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source