Add map to Listings tab showing active listing locations

app.R

@@ -255,6 +255,11 @@ ui <- f7Page(
         title = "Listings",
         tabName = "Listings",
         icon = f7Icon("tag_fill"),
+        f7Card(
+          title = "Map:",
+          divider = TRUE,
+          leafletOutput("listings_map")
+        ),
         f7Card(
           title = "Active Listings:",
           divider = TRUE,
@@ -473,6 +478,32 @@ server <- function(input, output) {
     }
   )
 
+# listings map ----
+  output$listings_map <- renderLeaflet({
+    leaflet() |>
+      addProviderTiles("CartoDB.Voyager") |>
+      addPolygons(
+        data        = sbdvn,
+        color       = "red",
+        weight      = 2,
+        opacity     = 0.5,
+        fillOpacity = 0.2,
+        label       = ~sub_name
+      ) |>
+      addMarkers(
+        data    = listings,
+        lat     = ~latitude,
+        lng     = ~longitude,
+        popup   = ~paste0(
+          "<b>", address, "</b><br>",
+          "Price: ", scales::dollar(price), "<br>",
+          "Sq Ft: ", sqft, "<br>",
+          "$/Sq Ft: ", scales::dollar(price_per_sqft)
+        )
+      ) |>
+      setView(lng = -82.362253, lat = 27.076199, zoom = 16)
+  })
+
 # listings table ----
   output$listings_table <- renderDT({
     datatable(