Is there any way to add a custom tooltip to a MapLibre object without writing a new PMTiles file?

[danielvartan]

Hi there, 👋

I'm using precompiled tiles hosted on the PMTilesBR project to draw geometries in MapLibre. These files include state codes, which I use to create a match expression for colorizing them. However, I'm still having trouble with tooltips: how can I add a custom tooltip without having to generate a new PMTiles file?

Any help is appreciated! 🙏

[danielvartan]

It would be nice if tooltip could accept a match expression, like fill_color does. This would resolve the issue.

[danielvartan]

Here's a working solution:

library(cli)
library(htmlwidgets)
library(magrittr)
library(mapgl)
library(orbis) # github.com/danielvartan/orbis
library(pmtiles) # github.com/walkerke/pmtiles
library(viridis)

pmtiles_file <- file.path(
  "https://cem-usp.github.io/pmtilesbr",
  "pmtiles",
  "geobr-2020-read_state-simplified-min-zoom-2-max-zoom-10.pmtiles"
)

pmtiles_metadata <-
  pmtiles_file |>
  pm_show(tilejson = TRUE)

pmtiles_layer <-
  pmtiles_metadata |>
  extract2("vector_layers") |>
  extract2(1) |>
  extract2("id")

pmtiles_bounds <-
  pmtiles_metadata |>
  extract2("bounds") |>
  unlist()

values <- brazil_state_code() |> unname()

fill_color <- match_expr(
  column = "code_state",
  values = values,
  stops = sample(viridis(27), 27),
  default = "gray"
)

tooltip <- paste0(
  "<strong>State: </strong>",
  values,
  "<br/>",
  "<strong>Respondents: </strong>",
  sample(1:100, 27)
) |>
  set_names(values)

pmtiles_bounds |>
  maplibre(
    bounds = _,
    projection = "mercator",
  ) |>
  add_pmtiles_source(
    id = "state_borders",
    url = pmtiles_file,
    source_type = "vector"
  ) |>
  add_fill_layer(
    id = "state_fill",
    source = "state_borders",
    source_layer = pmtiles_layer,
    fill_color = fill_color,
    fill_opacity = 1,
    hover_options = list(
      fill_color = "gray",
      fill_opacity = 1
    )
  ) |>
  onRender(
    "
    function(el, x, data) {
      const map = el.map || this;
      const layerId = data.layer_id;
      const lookup = data.lookup || {};

      if (!map || typeof map.on !== 'function') {
        return;
      }

      const popup = new maplibregl.Popup({
        closeButton: false,
        closeOnClick: false,
        maxWidth: '400px'
    });

    function resolveId(props) {
      if (!props) return null;

      const candidates = [
        props.id,
        props.ID
      ];

      for (const value of candidates) {
        if (value !== undefined && value !== null) {
          const key = String(value);
          if (lookup[key] !== undefined) return key;
        }
      }

      for (const value of Object.values(props)) {
        if (value === undefined || value === null) continue;
        const key = String(value);
        if (lookup[key] !== undefined) return key;
      }

      return null;
    }

    function onMove(e) {
      if (!map.getLayer(layerId)) return;

      const features = map.queryRenderedFeatures(e.point, { layers: [layerId] });
      if (!features || features.length === 0) {
        map.getCanvas().style.cursor = '';
        popup.remove();
        return;
      }

      const props = features[0].properties || {};
      const id = resolveId(props);
      const html = id ? lookup[id] : 'No data';

      map.getCanvas().style.cursor = 'pointer';
      popup.setLngLat(e.lngLat).setHTML(html).addTo(map);
    }

    function onLeave() {
      map.getCanvas().style.cursor = '';
      popup.remove();
    }

    map.on('mousemove', onMove);
    map.on('mouseout', onLeave);
  }
  ",
    data = list(
      layer_id = "state_fill", # The id used in `add_fill_layer()`
      lookup = tooltip
    )
  )

[wiesehahn]

I am also looking for a decent solution. Would be awesome to have a simpler approach than yours without having to edit the data.

something in the direction of

add_fill_layer(
        id = "fl_tracts",
        source = fl_age,
        fill_color = "lightgrey",
        tooltip = paste0(
							"<strong>State: </strong>",
  							fl_age$values,
							"<br/>"
						)
    )