app.R

library(shiny)
library(MapboxGL)
library(reactR)
library(shinydashboard)
library(DT)

taco_joints <- data.frame(
  name = c("Tyson's Tacos", "Torchy's Tacos", "Veracruz All Natural Food Truck", "Papalote Taco House", "Tacodeli"),
  lat = c(30.309630, 30.245420, 30.257940, 30.243570, 30.258467),
  long = c(-97.715240, -97.751590, -97.726030, -97.781850, -97.787582)
)

taco_features <- apply(taco_joints, 1, function(row) {
  component("Feature", list(
    properties = list(name = row[['name']]),
    coordinates = list(row[['long']], row[['lat']])
  ))
})

ui <- dashboardPage(
  dashboardHeader(disable = TRUE),
  dashboardSidebar(disable = TRUE),
  dashboardBody(
    fluidRow(
      box(
        width = 12,
        tags$h3("The Best Tacos in Austin according to Caitlin Hudon")
      )
    ),
    fluidRow(
      box(
        width = 8,
        solidHeader = TRUE,
        MapboxGLOutput('widgetOutput')
      ),
      box(
        width = 4,
        DTOutput("taco_joints")
      )
    )
  )
)

server <- function(input, output, session) {
  output$taco_joints <- renderDT(taco_joints)
  output$widgetOutput <- renderMapboxGL(
    MapboxGL(
      React$Map(
        accessToken = "pk.eyJ1IjoiYWxhbmRpcGVydCIsImEiOiJjamUydnEzc2s2bjFhMnFwMHFna3dkZ2plIn0.3bGyNVqMXQmNLldoigHPMw",
        style = "mapbox://styles/mapbox/streets-v11",
        containerStyle = list(
          height = "500px",
          width = "100%"
        ),
        center = c(-97.7431, 30.2672),
        zoom = list(12),
        component(
          "Layer",
          append(
            list(
              type = "symbol",
              id = "marker",
              layout = list(
                `icon-image` = "restaurant-15",
                `icon-size` = 2,
                `text-field` = '{name}',
                `text-offset` = list(0,-2.5)
              )
            ),
            taco_features[input$taco_joints_rows_current]
          )
        )
      )
    )
  )
}

shinyApp(ui, server)