Html created with Shiny tags for uiOutput different from includeHTML

shiny
,
1

I am trying to include a map from an API in my Shiny app, which uses an html page with a JavaScript script tag in the header and another one in the body.

When using an html template, saving it as an html file and then including it in a Shiny App via includeHTML("originalFile.html"), the map is displayed correctly. However, since I want the coordinates for the map to be interactive (without saving it to file in-between), I tried to create the html in a renderUI using shiny tags, and display it via uiOutput. When doing so, the JavaScript part does not seem to be processed at all. The header above the map is shown, as is the text below it, but the map is ignored without error message. Interestingly, the same happens when I replace the tag tags$head by tags$header.

Here is my app.R:

library(shiny)

# Define UI for application that draws a histogram
ui <- fluidPage(

    # Application title
    titlePanel("Outdooractive Map"),

    # Sidebar with a text input for coordinates
    sidebarLayout(
        sidebarPanel(
            textInput ("lng",
                        "Longitude:",
                       value = "10.000",
                    ),
            textInput("lat",
                      "Latitude:",
                      value = "45.555")
        ),

        # Show the map 
        mainPanel(
            #includeHTML("originalFile.html") # This works
            textOutput("text"), # This shows the correct longitude/latitude
            uiOutput("map") # This seems to ignore the script
        )
    )
)

# Define server logic required to access API
server <- function(input, output) {
    
    output$map <- renderUI({
        lng = input$lng
        lat = input$lat
        
        tags$html(
            tags$div(
                tags$head(tags$title("Test"),
                          HTML('<meta charset="utf-8">'),
                          tags$script(
                              src = '//www.outdooractive.com/alpportal/oa_head.js?proj=api-dev-oa&amp;key=yourtest-outdoora-ctiveapi&amp;lang=en'
                          ),
                          tags$style(HTML(
                              '.oax .oax-cluster-marker-cont, .oax-cluster-marker-cont {background-color: red;}'
                          ))),
                tags$body(
                    h2("Outdooractive Routes"),
                    div(class = 'oax-top-cont'),
                    tags$script(HTML(paste(
                        'var conf = {frontendtype: "tour", zoom: 11, center:[ ', lng, ", ",  lat, ']}; var fvp = oa.api.flexviewpage( conf );')
                    )),
                    HTML('There should be a map on top of me.')
                )
            ),

        )
    })
    
    output$text <- renderText ({
        paste(input$lng, input$lat)
    })
}

# Run the application 
shinyApp(ui = ui, server = server)

To fully replicate the example, this would be the originalFile.html (which works when line 23 in app.R is uncommented):

<!DOCTYPE html>
<html>
  <head>
    <title>outdooractive platform - API Template</title>
    <meta charset="utf-8">

    
    <!-- load Outdooractive Javascript API -->
    <script type="text/javascript" 
            src="//www.outdooractive.com/alpportal/oa_head.js?proj=api-dev-oa&amp;key=yourtest-outdoora-ctiveapi&amp;lang=en"></script>


    <style>
      .oax .oax-cluster-marker-cont, .oax-cluster-marker-cont {
          background-color: red;
      }
    </style>

  </head>
  <body>
  <br>
  <br>
    <h2>Outdooractive Routes</h2>

    <!-- container used by FlexView API -->
    <div class="oax-top-cont"></div>


    <!-- and some lines of javascript inside a script tag -->
    <script type="text/javascript">

      var conf = {
          frontendtype:   "tour",          // choose content type
          zoom:           11,              // set initial zoom level
          center:       [ 10.292, 47.546 ] // set initial map center
      };
      
      var fvp = oa.api.flexviewpage( conf );

    </script>
  </body>
</html>

Any pointers would be much appreciated.

2

This topic was automatically closed 54 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.