'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
tagListorfluidPagebut 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: '© <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 |
|---|
