initial commit

NewGraphEnvironment · Jul 1, 2024 · a395d24 · a395d24
1 parent 5d42fda
commit a395d24
Show file tree

Hide file tree

Showing 4 changed files with 239 additions and 0 deletions.
diff --git a/scripts/functions.R b/scripts/functions.R
@@ -0,0 +1,52 @@
+my_dt_table <-   function(dat,
+                          cols_freeze_left = 3,
+                          page_length = 10,
+                          col_align = 'dt-right',
+                          font_size = '10px',
+                          style_input = 'bootstrap'){
+
+  dat %>%
+    DT::datatable(
+      style = style_input,
+      class = 'cell-border stripe', #'dark' '.table-dark',
+      #https://stackoverflow.com/questions/36062493/r-and-dt-show-filter-option-on-specific-columns
+      filter = 'top',
+      extensions = c("Buttons","FixedColumns", "ColReorder"),
+      rownames= FALSE,
+      options=list(
+        scrollX = TRUE,
+        columnDefs = list(list(className = col_align, targets = "_all")), ##just added this
+        pageLength = page_length,
+        dom = 'lrtipB',
+        buttons = c('excel','csv'),
+        fixedColumns = list(leftColumns = cols_freeze_left),
+        lengthMenu = list(c(5,10,25,50,-1),
+                          c(5,10,25,50,"All")),
+        colReorder = TRUE,
+        #https://stackoverflow.com/questions/44101055/changing-font-size-in-r-datatables-dt
+        initComplete = htmlwidgets::JS(glue::glue(
+          "function(settings, json) {{ $(this.api().table().container()).css({{'font-size': '{font_size}'}}); }}"
+        ))
+        #https://github.com/rstudio/DT/issues/1085 - this is not working yet
+        #   initComplete = JS(
+        #     'function() {$("html").attr("data-bs-theme", "dark");}')
+      )
+    )
+}
+
+ltab_caption <- function(caption_text = my_caption) {
+  cat(
+    "<table>",
+    paste0(
+      "<caption>",
+      "(#tab:",
+      # this is the chunk name!!
+      knitr::opts_current$get()$label,
+      ")",
+      caption_text,
+      "</caption>"
+    ),
+    "</table>",
+    sep = "\n"
+  )
+}
diff --git a/scripts/leaftlet_vector_tiles.html b/scripts/leaftlet_vector_tiles.html
@@ -0,0 +1,97 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Leaflet Vector Tiles</title>
+
+  <!-- CSS for Leaflet map  -->
+  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
+   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
+   crossorigin=""/>
+
+  <!-- JS for Leaflet map  -->
+  <!-- Make sure you put this AFTER Leaflet's CSS -->
+  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
+   integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
+   crossorigin=""></script>
+
+  <!-- Leaflet plugin for vector tiles support -->
+  <script type="text/javascript"  src="https://unpkg.com/[email protected]"></script>
+
+  <style>
+    html, body, #map {
+      font-family: sans-serif;
+      height: 100%;
+      width: 100%;
+    }
+    body {
+      padding: 0;
+      margin: 0;
+    }
+    #map {
+      z-index: 1;
+    }
+    #meta {
+      background-color: rgba(255,255,255,0.75);
+      color: black;
+      z-index: 2;
+      position: absolute;
+      top: 10px;
+      left: 20px;
+      padding: 10px 20px;
+      margin: 0;
+    }
+  </style>
+</head>
+
+<body>
+
+<div id="meta">
+  <h2>Leaflet Test</h2>
+  <ul>
+    <li><a href="https://leafletjs.com/">Leaflet</a></li>
+    <li><a href="https://github.com/Leaflet/Leaflet.VectorGrid">Leaflet Vector Grid</a></li>
+  </ul>
+</div>
+
+<div id="map"></div>
+
+<script>
+
+  var map = L.map('map').setView([0, 0], 2);
+
+  // Add a base map layer to the map
+  var baseUrl = "https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png";
+  var baseLayer = L.tileLayer(baseUrl, {
+    "maxZoom": 24
+  });
+  baseLayer.addTo(map);
+
+  // Add the tile layer to the map
+  // https://www.naturalearthdata.com/http//www.naturalearthdata.com/download/50m/cultural/ne_50m_admin_0_countries.zip
+  var vectorServer = "https://tiles.hillcrestgeo.ca/bcfishpass/";
+  var vectorLayerId = "bcfishpass.streams_bt_vw";
+  var vectorUrl = vectorServer + vectorLayerId + "/{z}/{x}/{y}.pbf";
+  console.log("Reading tiles from " + vectorUrl);
+  var vectorTileStyling = {};
+  var vectorTileColor = "blue";
+  vectorTileStyling[vectorLayerId] = {
+    "fill": true,
+    "fillColor": vectorTileColor,
+    "fillOpacity": 0.1,
+    "color": vectorTileColor,
+    "opacity": 0.7,
+    "weight": 1
+  };
+  var vectorTileOptions = {
+    "rendererFactory": L.canvas.tile,
+    "attribution": "&copy; <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors, made with LOVE",
+    "vectorTileLayerStyles": vectorTileStyling
+  };
+  var vectorLayer = L.vectorGrid.protobuf(vectorUrl, vectorTileOptions).addTo(map);
+
+</script>
+
+</body>
+</html>
diff --git a/scripts/vector_tiles.txt b/scripts/vector_tiles.txt
@@ -0,0 +1,90 @@
+---
+title: "Render Vector Tiles in Leaflet or deckgl"
+editor: visual
+---
+
+Can't for the life of me figure out how to render vecor tiles from a custom server source. 
+```{r}
+pkgs <- c("sf", "leaflet", "maptiles", "fwapgr")
+
+lapply(pkgs, require, character.only = TRUE)
+
+
+```
+
+
+```{r}
+blk <- 360873822
+# downstream route measure
+drm <- 166030.4
+
+aoi <- fwapgr::fwa_watershed_at_measure(blue_line_key = blk, 
+                                        downstream_route_measure = drm) |> 
+  sf::st_transform(4326)
+
+aoi_osm <- get_tiles(aoi, crop = TRUE)
+plot_tiles(aoi_osm)
+
+```
+
+Get raster (and raster only) tiles as per [maptiles](https://github.com/riatelab/maptiles)
+
+```{r}
+
+options(mapbox.accessToken = NA)
+
+
+
+
+plot_tiles(tiles)
+
+# dowload tiles and compose raster (SpatRaster)
+t_rast <- get_tiles(x = aoi, provider = tiles, crop = TRUE, 
+                       cachedir = tempdir(), verbose = TRUE)
+#> Zoom: 7
+#> Source(s): © OpenStreetMap contributors © CARTO 
+#> Cache directory: /tmp/RtmpdG8qYB/CARTO.POSITRON
+#> 8 tiles
+# display map
+plot_tiles(t_rast)
+# display credits
+mtext(text = get_credit(osmpos), side = 1, line = -1, adj = .99)
+```
+
+
+```{r}
+#https://www.milesmcbain.com/posts/vector-tiles/
+library(leaflet)
+library(rdeck)
+
+
+rdeck() |>
+  add_mvt_layer(
+    # data = "https://tiles.hillcrestgeo.ca/bcfishpass/bcfishpass.streams_bt_vw/{z}/{x}/{y}.pbf",
+    data = "https://github.com/NewGraphEnvironment/fish_passage_peace_2022_webmap/raw/main/docs/style_all.json",
+    opacity = 0.6
+  )
+
+leaflet(quakes) %>%
+  addMapboxGL(style = "mapbox://styles/mapbox/streets-v9", accessToken =Sys.getenv('MAPBOX_ACCESS_TOKEN')) |> 
+  # addMapboxGL(style = "https://raw.githubusercontent.com/NewGraphEnvironment/fish_passage_peace_2022_webmap/main/docs/style_bt", accessToken =NA) %>%
+  addCircleMarkers(weight = 1, fillOpacity = 0, radius = 3)
+```
+
+
+```{r}
+deckgl(zoom = 11, pitch = 45) %>%
+  add_basemap() %>%
+  add_layer(
+    data = "https://tiles.hillcrestgeo.ca/bcfishpass/bcfishpass.streams_bt_vw/{z}/{x}/{y}.pbf",
+    class_name = "TileLayer"
+  )
+```
+
+
+
+```{r}
+leaflet::leaflet() %>%
+    leaflet::addTiles(urlTemplate = "https://tiles.hillcrestgeo.ca/bcfishpass/bcfishpass.streams_bt_vw/{z}/{x}/{y}.pbf") 
+```
+
diff --git a/scripts/vector_tiles_files/figure-html/unnamed-chunk-2-1.png b/scripts/vector_tiles_files/figure-html/unnamed-chunk-2-1.png