addFgb uses wrong label and layerId

[trafficonese]

Wrong Label

When a vector is used for label they are mixed up, as flatgeobuf apparently doesnt handle the Geojson in a sequential way, but still always in the same order (not sure which order yet). So the following is not working with the cntr index. https://github.com/r-spatial/leafem/blob/830d010f6087ba85bb71d7391d78db60dc8fef53/inst/htmlwidgets/lib/FlatGeoBuf/fgb.js#L122-L126

Different layerId behaviour

The layerId in leaflet works differently and also a vector can be passed to identify single elements. Using a vector with the current versions throws this error:

Warning: Error in validateScalarName: Invalid argument 'name' (must be a non-empty character string and contain no '/' or '\')

Currently the FBG-File is loaded as attachment using the layerId as name. Could we switch this to group instead or use a combination of group, file, url? Those values should be of length = 1 or?

Then we could also return the layerId in the mouse-events here: https://github.com/r-spatial/leafem/blob/830d010f6087ba85bb71d7391d78db60dc8fef53/inst/htmlwidgets/lib/FlatGeoBuf/fgb.js#L15

using something like this id: e.layer.feature.properties[layerId].toString()

The behaviour would still be different to leaflet, as we would have to pass a string indicating the column to be used as layerId (e.g. layerId = "id"), but at least we could identify which element was clicked exactly.

And another problem I encountered with this method. If the layerId column is a numeric, the tooltip will not be displayed and ths error comes up. The function .toString() or + "" didnt help.

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. at e._updateContent (leaflet.js:5:89421) at e.update (leaflet.js:5:88713) at e.onAdd (leaflet.js:5:88115) at e.onAdd (leaflet.js:5:94883) at e._layerAdd (leaflet.js:5:64708) at e.whenReady (leaflet.js:5:44748) at e.addLayer (leaflet.js:5:65087) at e.openTooltip (leaflet.js:5:96860) at e.openTooltip (leaflet.js:5:98033) at e._openTooltip (leaflet.js:5:98858)

Here is an example Shiny App to play around:

Click me

``` library(leafem) library(leaflet) library(shiny) library(terra) library(sf) ## Transform Data to FGB ############ linesdf <- st_as_sf(leaflet::atlStorms2005) linesdf$id <- paste0("id_",1:nrow(linesdf)) shp <- vect(linesdf) shp_ext <- unname(as.vector(ext(shp))) fgb_path <- tempfile(fileext = ".fgb") writeVector(shp, fgb_path, filetype = "FlatGeobuf") ## UI ################## ui <- fluidPage(leafletOutput("map", height = 500), splitLayout(cellWidths = c("49%","49%"), div( h3("FGB"), verbatimTextOutput("print_fgb") ), div( h3("Leaflet"), verbatimTextOutput("print_leaflet") ))) ## SERVER ################## server <- function(input, output){ output$map <- renderLeaflet({ leaflet("map") %>% fitBounds(shp_ext[1], shp_ext[3], shp_ext[2], shp_ext[4]) %>% addTiles() %>% addFgb(fgb_path, fill = FALSE, group = "Lines_FGB", layerId = "id", popup = TRUE, label = .subset2(linesdf, "id") # label = "id" ) %>% # leafgl::addGlPolylines(data = linesdf, # layerId = .subset2(linesdf, "id"), # color = "#337ab7", # opacity = 0.9, # popup = NULL, # group = "Strassengraph_Glify", # preserveDrawingBuffer = TRUE, # sensitivity = 0.001, # sensitivityHover = 0.03) %>% leaflet::addPolylines(data = linesdf, layerId = .subset2(linesdf, "id"), label = .subset2(linesdf, "id"), color = "#337ab7", opacity = 0.9, popup = NULL, group = "Lines") %>% addLayersControl( position = "topright", overlayGroups = c("Lines_FGB", "Lines" ), options = layersControlOptions(collapsed = F, autoZIndex = TRUE) ) }) ## Ouputs ############### output$print_fgb <- renderPrint({ click <- req(input$map_shape_click) req(click$group == "Lines_FGB") df <- linesdf[.subset2(linesdf, "id") == click[["id"]],] if (nrow(df) == 0) { showNotification("not found") } else { leafletProxy("map") %>% clearGroup("sel") %>% addPolylines(data = df, label = df$id, group="sel", color = "red", options = pathOptions(interactive = FALSE)) } print(click) }) output$print_leaflet <- renderPrint({ click <- req(input$map_shape_click) req(click$group == "Lines") df <- linesdf[.subset2(linesdf, "id") == click[["id"]],] if (nrow(df) == 0) { showNotification("not found") } else { leafletProxy("map") %>% clearGroup("sel") %>% addPolylines(data = df, label = df$id, group="sel", color = "red", options = pathOptions(interactive = FALSE)) } print(click) }) } shinyApp(ui = ui, server = server) ```

[trafficonese]

I just saw that this is expected, when writing the FGB. It should work with SPATIAL_INDEX=NO" as described here https://github.com/r-spatial/leafem/issues/53#issuecomment-1059087041

fl = tempfile(fileext = ".fgb")
sf::st_write(
  obj = franconia
  , dsn = fl
  , driver = "FlatGeobuf"
  , layer_options = c("SPATIAL_INDEX=NO")
)