MVTs not showing on deployed website

[Robinlovelace]

Hi {rdeck} developers, I've just been playing with this and it seems like a great package, thanks for putting it out there!

I've got some vector tiles working properly but the problem is they only seem to be visible when the html is on my local computer.

Here's an example of the deployed web version, which has nothing in Dublin when you zoom in: https://jazzy-elf-95a68a.netlify.app/index-test.html

But when you download the underlying html you can see the MVP. Any ideas of the cause and how to work around this?

I'm also having issues styling the data but will save that for another day and possibly another issue.

[Robinlovelace]

P.s. here's a reproducible example that can generate the map and the html. Can provide further details.

remotes::install_github("qfes/rdeck")
library(rdeck)

# tiles = tile_json(tileset_id = "https://api.mapbox.com/styles/v1/robinlovelacep/cl5snmrau000j15s3bvgtcand/wmts?access_token=pk.eyJ1Ijoicm9iaW5sb3ZlbGFjZXAiLCJhIjoiY2t1MzM0bmpjMm5ucjJ1cDgyYzVla2w5eCJ9.RJWX333-8KxChWTQONrYBQ")
tiles = tile_json(tileset_id = "robinlovelacep.cq4othma")
rdeck(initial_view_state = view_state(center = c(-7, 53), zoom = 6), 
      layer_selector = TRUE) %>% 
  add_mvt_layer(data = tiles,
                visible = TRUE,
                line_width_max_pixels = 10,
                line_width_min_pixels = 2,
                visibility_toggle = TRUE,
                pickable = TRUE,
                min_zoom = 0,
                # get_line_color = scale_color_quantile("Bicycle (Near market)")
                )

[anthonynorth]

Hi, couple of things I've found:

• Your hosted app is throwing mixed-content errors in the browser. The mapbox tilejson service is returning insecure tiles urls -- not sure if that's new or I just missed it. The fix for this is a one-liner
• The zoom-range specified in your tilejson is 11-16, so your layer will not render outside these zooms. The zoom range in the tilejson has higher precedence than the layer's min & max zoom parameters.
• scale_color_quantile computes quantile breaks in R, so it requires a dataframe input. If you want a quantile scale, you can fudge it with pre-computed quantile breaks and use a threshold scale.

One more thing to note: The mapbox tilejson api doesn't return field metadata (this is exposed via another endpoint which requires a private token), so when using mapbox-hosted vector tiles, it's not possible to pre-populate things like min & max for a numeric field, or levels for a factor.

Example line colour styling:

remotes::install_github("qfes/rdeck")
library(rdeck)

bbox <- sf::st_bbox(c(xmin = -6.6449, ymin = 53.1931, xmax = -6.0498, ymax = 53.6373), crs = 4326)
tiles = tile_json(tileset_id = "robinlovelacep.cq4othma")
rdeck(initial_bounds = bbox, 
      layer_selector = TRUE) %>% 
  add_mvt_layer(data = tiles,
                visible = TRUE,
                line_width_max_pixels = 10,
                line_width_min_pixels = 2,
                visibility_toggle = TRUE,
                pickable = TRUE,
                min_zoom = 0,
                get_line_color = scale_color_power("Bicycle (Near market)", limits = c(0, 1000)),
                tooltip = TRUE
                )

[Robinlovelace]

Many thanks for the reprex @anthonynorth, you've solved a key blocker for us using MVTs on this, beautiful results below :star_struck: other blocker with insecure tilesets seems a WiP, helpful to have a diagnosis.

I thought I was missing something but seems I'm not crazy given the bug label. Hope this helps your dev work, any more tests you'd like me to do let me know and keep up the good work :rocket:


[anthonynorth]

Latest (0.4.0.9025) should solve the mixed-content issues.

[Robinlovelace]

Wow fast work! Will try again and get back to you...

[Robinlovelace]

Great news it works, as reported by @natesheehan who implemented the solution with the updated version of this great package: https://jazzy-elf-95a68a.netlify.app/index_option1

[anthonynorth]

I checked the app, looks good, although the scale limits for some of the layers need to be adjusted to the range of your data. Rdeck can't unfortunately read the range of the attributes from mapbox without a second token -- mapbox tilestats queries require a secret token, maps require a public token (requiring 2 tokens with different scopes would be confusing, I think). You can manually check the range of your attributes at https://studio.mapbox.com/tilesets/robinlovelacep.cq4othma

You could then use these values to build the scales for each layer. E.g.

# your layer tilestats as a tibble
layers <- tibble::tibble(
  count = c(988L, 1000L, 1000L, 1000L, 1000L, 1000L, 24L, 89L, 5L),
  attribute = c("Bicycle (Baseline)", "Bicycle (Decarbonise)", "Bicycle (Demand reduction)", "Bicycle (Ebike)", "Bicycle (Go Dutch)", "Bicycle (Near market)", "Gradient", "Quietness", "col"),
  type = c("number", "number", "number", "number", "number", "number", "number", "number", "string"),
  min = c(1L, 1L, 1L, 1L, 1L, 1L, 0L, 3L, NA), 
  max = c(2949L, 4020L, 4076L, 6493L, 4959L, 3447L, 46L, 100L, NA), 
  values = list(NA_integer_, NA_integer_, NA_integer_, NA_integer_, NA_integer_, NA_integer_, NA_integer_, NA_integer_, c("#CC6677", "#882255", "#44AA99", "#117733", NA))
)

my_map <- rdeck(layer_selector = TRUE)

add_bicycle_layer <- function(rdeck, layer_info, ...) {
  rdeck |>
    add_mvt_layer(
      ...,
      name = layer_info$attribute,
      get_line_color = scale_color_power(
        col = !!layer_info$attribute,
        limits = layer_info$limits
      )
    )
}

my_map_with_layers <-
  layers |>
    dplyr::mutate(limits = cbind(min, max)) |>
    dplyr::rowwise() |>
    dplyr::group_split() |>
    purrr::reduce(
      add_bicycle_layer,
      .init = my_map,
      visible = FALSE,
      # common params
    )

Result: