[Maps] Add styling and tooltip support to mapbox mvt vector tile sources

[thomasneirynck]

Closes #46409

Adds tooltip-support and dynamic styling for .mvt vector tiles sources.

Opting to do his together since:

• without tooltips it is really hard to write dynamic style rules (since there is no other way to inspect the data in the tile)
• this PR is the main blocker to add full support for ES-sources (clusters/grids and document layers)

This PR adds UX-forms to:

• add fields which are present in an MVT XYZ source
  • (note that down-the-line this could be determined automatically when Maps supports the TileJson specification)
• add fields which should be added to the tooltips for an MVT XYZ source

Since all feature-data is contained in the tile and cannot be determined by inspecting the GeoJson or doing a backend AJAX call to a service, this PR introduces some light refactors in the existing code:

• feature-properties/geometry cannot be determined, so the raw properties from Mapbox-gl component are passed along
• feature-ids are not guaranteed to exist in a vector-tile source (For geojson sources, Maps will use _assignFeatureIds to forcibly assign one if it is missing). This id is now made optional in the corresponding layer and source APIs for tooltip-identification
• the domain of a field's values (e.g. categorical set, or ordinal range) cannot be determined client-side for raw vector tile sources (XYZ). This requires disabling all automated ramping/color maps/icon palettes. This also requires disabled dynamic styling for sizes, since field-values cannot be entered manually.

---

Reviewer notes

The best way to test is to look at a TileJson (if your vector tile service has one).

Some examples from https://tiles.maps.elastic.co/data/v3.json

• poi layer
  • name (String), name_en (String), class (String), agg_stop (Number)
• transportation layer
  • class (String), brunnel (String), oneway (Number), layer (Number), level (Number), indoor (Number)

Note that the EMS tile-service is incredibly sparse in its populated fields. So not every property will be usable at any given scale.

To test

1. Set xpack.maps.enableVectorTiles: true in kibana.dev.yml
2. Add new Vector Tile Layer layer. with the following configurations (check https://tiles.maps.elastic.co/data/v3.json for more examples).

• transportation layer:
  • Url: https://tiles.maps.elastic.co/data/v3/{z}/{x}/{y}.pbf?elastic_tile_service_tos=agree&my_app_name=kibana&my_app_version=8.0.0&license={PLUGIN_LICENSE_KEY}
  • Layer name: transportation
  • Zoom range: 4 to 14
  • fields:
    • name: class, type string
    • name: name, type string
• poi layer:
  • Url: https://tiles.maps.elastic.co/data/v3/{z}/{x}/{y}.pbf?elastic_tile_service_tos=agree&my_app_name=kibana&my_app_version=8.0.0&license={PLUGIN_LICENSE_KEY}
  • Layer name: poi
  • Zoom range: 10 to 14
  • fields:
    • name: class, type string
• water layer:
  • Url: https://tiles.maps.elastic.co/data/v3/{z}/{x}/{y}.pbf?elastic_tile_service_tos=agree&my_app_name=kibana&my_app_version=8.0.0&license={PLUGIN_LICENSE_KEY}
  • Layer name: water
  • Zoom range: 0 to 14

Bugs todo

• Adding/clearing fields to the source-settings requires a save for the settings to be available
• The field editing is not behaving independently of the min/zoom/layername settings. (e.g. field-changes get cleared when other settings are modified)
• should not show tooltips when not configured
• supportsAutoDomain error in console

[elasticmachine]

Pinging @elastic/kibana-gis (Team:Geo)

[miukimiu]

Hi @thomasneirynck,

I created a PR with a few design improvements thomasneirynck#17.

This way we don't need to use too much space:

• Changed all forms to compressed
• Some of the forms are now using a column layout
• Moved the help text to tooltips.

Let me know what you think.

[kindsun]

Thank you so much for all the work on this and the final polish! This adds some great foundational pieces that pave the way for a whole new phase in how Maps will look and feel. 🌞

Functionally works well when tested locally with the understanding that it currently requires a good understanding of the shape of your data source. lgtm w/ green CI!

• code review
• tested locally in chrome

[nreese]

Can you update MVTSingleLayerVectorSource to implement getValueSuggestions? That way, typeahead will work when creating color maps and icon maps. The implementation can just be a simple filter against fields to see if name includes search value.

Disregard, getValueSuggestions needs access to values which are not available.

[thomasneirynck]

Thx @miukimiu , looks great. Can you take 2nd look?

[nreese]

Nice, this is really powerful for displaying 3rd party vector tiles.

LGTM
code review, tested in chrome

[miukimiu]

Tested locally and it looks good! 🎉

There's something that I'm not sure if it's possible. Is there a way to make the transportation bold without the quotes?

Like this:

[lukeelmers]

App Arch code change LGTM!

[thomasneirynck]

Is there a way to make the transportation bold without the quotes?

@miukimiu yes, I just pushed this up. thx!

[thomasneirynck]

@elasticmachine merge upstream

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: d8603d7

Build metrics

✅ unchanged

History

• 💔 Build #58065 failed 333d8b5
• 💚 Build #58001 succeeded 37bb626
• 💚 Build #57916 succeeded 7878b89
• 💚 Build #57901 succeeded 94bcbad
• 💔 Build #57721 failed aab1d58

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream