reset button and treecover layer

Author: nnoelke

Shiny/server.R

@@ -9,6 +9,7 @@
 
 
 library(shiny)
+library(shinyjs)
 library(gsgsim)
 library(leaflet)
 library(raster)
@@ -17,16 +18,25 @@ library(DT)
 
 options(shiny.error = browser)
 # Define server logic required to generate GSG
-shinyServer(function(input, output) {
+shinyServer(function(input, output, session) {
 
 
 output$map <- renderLeaflet({
-        leaflet() %>%
-          addProviderTiles("OpenStreetMap")
+  leaflet() %>%
+    addTiles() %>%
+    addWMSTiles(
+      "http://globalforestwatch-624153201.us-west-1.elb.amazonaws.com:80/arcgis/services/TreeCover2000/ImageServer/WMSServer",
+      layers="0",
+      options = WMSTileOptions(format = "image/png", transparent = TRUE)
+    ) #%>% addWMSLegend("http://globalforestwatch-624153201.us-west-1.elb.amazonaws.com:80/arcgis/services/TreeCover2000/ImageServer/WMSServer?request=GetLegendGraphic%26version=1.3.0%26format=image/png%26layer=0",
+      #position = 'bottomright')
 
-})
 
+})
 
+observeEvent(input$reset_input,{
+  shinyjs::reset("settings")
+})
 
 observeEvent(
     # Take a dependency on input$goButton
@@ -95,7 +105,7 @@ observeEvent(
         clearShapes() %>%
 
         addPolygons(data = bnd, color = "#444444", weight = 1, smoothFactor = 0.5,
-                    opacity = 0.4, fillOpacity = 0.5) %>%
+                    opacity = 0.3, fillOpacity = 0.5) %>%
 
         addCircles(data=gsg, weight = 3, radius=40,
                   color="#CD0000", stroke = TRUE, fillOpacity = 0.9) %>%
@@ -114,7 +124,7 @@ observeEvent(
       output$mytable <- DT::renderDataTable(
         DT::datatable(as.data.frame(gsg), options = list(pageLength = 25))
       )
-
+      updateNavbarPage(session, "nav", selected="gomap")
 
       }
     })

Shiny/styles.css

@@ -1,16 +1,23 @@
-input[type="number"] {
-  max-width: 100%;
+/* for computer */
+div.outer {
+     height: calc(100vh - 80px);
+     padding: 0;
+     margin: 0;
+     min-height: 500px
 }
 
-div.outer {
+@media all and (max-width:768px){
+/* for mobile */
+div.outer  {
   position: fixed;
-  top: 41px;
+  top: 70px;
   left: 0;
   right: 0;
   bottom: 0;
   overflow: hidden;
   padding: 0;
 }
+}
 
 /* Customize fonts */
 body, label, input, button, select {
@@ -46,4 +53,9 @@ h1, h2, h3, h4 { font-weight: 400; }
 /* If not using map tiles, show a white background */
 .leaflet-container {
   background-color: white !important;
+}
+
+button#reset_input:hover {
+  background-color:#da1313;
+}
 }

Shiny/ui.R

@@ -8,34 +8,37 @@
 #
 
 library(shiny)
+library(shinyjs)
 library(raster)
 library(leaflet)
 library(DT)
 
-# Define UI for application that draws a histogram
-navbarPage("Global Sampling Grid",
-           id="nav",
-
-
 
 
-tabPanel("Interactive map",
-                    div(class="outer",
+ui <- fluidPage(
+  shinyjs::useShinyjs(),
 
-                        tags$head(
-                          # Include our custom CSS
-                          includeCSS("styles.css")
-
-                        ),
+# Define UI for application that draws a histogram
+navbarPage("Global Sampling Grid", id="nav",
 
+  tabPanel("Interactive map", value="gomap",
 
-      leafletOutput("map", width="100%", height="100%")
+  div(class="outer",
+    tags$head(
 
-)),
+      # Include our custom CSS
+      includeCSS("styles.css")
+    ),
+   leafletOutput("map")
+  )
+  ),
 
-tabPanel("Data Explorer", DT::dataTableOutput('mytable')),
+  tabPanel("Data Explorer",
+         DT::dataTableOutput('mytable')
+  ),
 
-tabPanel("GSG Settings",
+  tabPanel("GSG Settings",
+           div(id="settings",
             fluidRow(
               column(4,
                      # Inputs
@@ -92,6 +95,6 @@ tabPanel("GSG Settings",
                      downloadButton("download", "Download")
 
                      )
-            )
+            ))
 
-))
+)))