mapgl icon indicating copy to clipboard operation
mapgl copied to clipboard

Enable hover options for vector sources in MapLibre

Open walkerke opened this issue 11 months ago • 2 comments

Now that we have pmtiles support in MapLibre, #36 is relevant (the second part of the issue) as I only enabled hover options for tiles coming from Mapbox.

I tried swapping in the code directly from mapboxgl.js to maplibregl.js and it didn't work out of the box, so I'll need to look into this further.

walkerke avatar Jan 15 '25 15:01 walkerke

@walkerke can you expand upon what is missing here? Your tooltip hovers seem to work just fine?

library(mapgl)
pmtiles <- "https://data.source.coop/cboettig/us-boundaries/mappinginequality.pmtiles"


m <-
  maplibre(center=c(-72.9, 41.3), zoom=10, height="400") |>
  add_vector_source("mappinginequality_source",
                    url = paste0("pmtiles://", pmtiles)
  ) |>
  add_fill_layer(
    id = "mappinginequality_layer",
    source = "mappinginequality_source",
    source_layer = "mappinginequality",
    tooltip = "grade",
    filter = list("==", list("get", "city"), "New Haven"),
    fill_color = list("get", "fill")
  )

m

of course with any remote source your clever approach of creating a new html-styled column on-the-fly is not as viable, so it might be nice to have another option for multi-column and styled tooltip / mouse-over effects?

cboettig avatar Jan 28 '25 18:01 cboettig

here's an example using Mapbox:

https://walker-data.com/mapboxapi/articles/dynamic-maps.html#styling-vector-tiles-with-mapbox-gl-js-and-mapgl

It's the hover_options argument that isn't working in MapLibre for vector sources, as it needs to target a source layer which it isn't currently doing.

Also - I agree about improving the popup / tooltip generation!

walkerke avatar Jan 29 '25 11:01 walkerke

@cboettig dynamic tooltips are now possible! We do this by implementing the concat expression in Mapbox / MapLibre with a new concat() function:

library(mapgl)

maplibre(bounds = nc) |>
  add_source("nc", nc) |>
  add_fill_layer(
    id = "test",
    source = "nc",
    fill_color = "blue",
    popup = concat("Name: ", get_column("NAME"))
  )

Image

walkerke avatar Jun 04 '25 18:06 walkerke

🎉 this is brilliant, thanks!

cboettig avatar Jun 04 '25 19:06 cboettig