Browse Source

Create info panel

* Change initial zoom level
Petra Lamborn 3 years ago
parent
commit
749d25f255
1 changed files with 36 additions and 4 deletions
  1. 36
    4
      viz/app.R

+ 36
- 4
viz/app.R View File

57
     font-size: 1.5em;
57
     font-size: 1.5em;
58
     font-weight: bold;
58
     font-weight: bold;
59
   }
59
   }
60
-  #mapcontrol {
60
+  #mapcontrol, #infobuttoncontainer, #infopanel {
61
     background-color: rgba(255, 255, 255, 0.8);
61
     background-color: rgba(255, 255, 255, 0.8);
62
     border-radius: 5px;
62
     border-radius: 5px;
63
     box-shadow: 0 0 15px rgba(0,0,0,0.2);
63
     box-shadow: 0 0 15px rgba(0,0,0,0.2);
64
     padding: 6px 8px;
64
     padding: 6px 8px;
65
     font: 14px/16px Arial, Helvetica, sans-serif;
65
     font: 14px/16px Arial, Helvetica, sans-serif;
66
   }
66
   }
67
+  #infopanel {
68
+    display: none;
69
+    padding: 30px;
70
+    z-index: 1001;
71
+  }
67
   #lochtml ul {
72
   #lochtml ul {
68
     padding-left: 15px;
73
     padding-left: 15px;
69
   }
74
   }
73
   }
78
   }
74
   .leaflet-container {
79
   .leaflet-container {
75
     background-color: #84e1e1;
80
     background-color: #84e1e1;
81
+  }
82
+  #infobuttoncontainer {
83
+    margin-bottom: 16px;
84
+    z-index: 1002;
85
+  }
86
+  #infobuttoncontainer .shiny-input-container,
87
+  #infobuttoncontainer div div {
88
+    margin-right: 0px !important;
89
+    margin-bottom: 0px !important;
76
   }"),
90
   }"),
77
   leafletOutput("map"),
91
   leafletOutput("map"),
78
   absolutePanel(top = 10, right = 10, id="mapcontrol",
92
   absolutePanel(top = 10, right = 10, id="mapcontrol",
102
                 materialSwitch("controlswitch", value=TRUE, right=TRUE,
116
                 materialSwitch("controlswitch", value=TRUE, right=TRUE,
103
                                inline=TRUE, status="info")),
117
                                inline=TRUE, status="info")),
104
   absolutePanel(bottom = 30, left = 10, id="loading",
118
   absolutePanel(bottom = 30, left = 10, id="loading",
105
-                p("Loading..."))
119
+                p("Loading...")),
120
+  absolutePanel(bottom=26, right=10, left=10, top=10, id="infopanel",
121
+                p("Test")),
122
+  absolutePanel(bottom=10, right=10, id="infobuttoncontainer",
123
+    prettyToggle("mapinfobutton", label_on = "Info",
124
+                 label_off = "Info", icon_on=icon("times"),
125
+                 icon_off = icon("info"),
126
+                 animation = "pulse",
127
+                 inline = TRUE,
128
+                 status_on = "danger",
129
+                 status_off = "info")
130
+  )
106
 )
131
 )
107
 
132
 
108
 # Define server logic
133
 # Define server logic
115
                   layerId = ~SA22018_V1,
140
                   layerId = ~SA22018_V1,
116
                   label = shpf@data$SA22018__1,
141
                   label = shpf@data$SA22018__1,
117
                   fillOpacity = 1) %>%
142
                   fillOpacity = 1) %>%
118
-      setView(174, -41, 5) %>%
119
-      addResetMapButton() %>%
143
+      setView(174, -41, 6) %>%
144
+        addResetMapButton() %>%
120
       addLegend(position = "topleft",
145
       addLegend(position = "topleft",
121
                 colors = c(tencols, "#808080"),
146
                 colors = c(tencols, "#808080"),
122
                 labels = transport.t, opacity = 1,
147
                 labels = transport.t, opacity = 1,
236
   observeEvent(input$radioinout, ignoreInit = TRUE, {
261
   observeEvent(input$radioinout, ignoreInit = TRUE, {
237
     updateMap()
262
     updateMap()
238
   })
263
   })
264
+  observeEvent(input$infobutton, {
265
+    print(input$infobutton)
266
+  })
239
   observeEvent(input$radiocolour, ignoreInit = TRUE, {
267
   observeEvent(input$radiocolour, ignoreInit = TRUE, {
240
     updateMap()
268
     updateMap()
241
   })
269
   })
243
     shinyjs::toggleElement("mapcontrol", anim=TRUE,
271
     shinyjs::toggleElement("mapcontrol", anim=TRUE,
244
                            time = 0.5)
272
                            time = 0.5)
245
   })
273
   })
274
+  observeEvent(input$mapinfobutton, ignoreInit = TRUE, {
275
+    shinyjs::toggleElement("infopanel", anim=TRUE,
276
+                           time = 1)
277
+  })
246
   output$lochtml <- renderUI({
278
   output$lochtml <- renderUI({
247
     seled <- sel.SA2.code()
279
     seled <- sel.SA2.code()
248
     seled <- ifelse(is.na(seled), 0, seled)
280
     seled <- ifelse(is.na(seled), 0, seled)