Making PMTiles layer interactive

[fallspinach]

Hi, I'm looking for some help from gurus here. I'm brand new to MapLibre GL JS but I managed to move quite a few steps in a few days! I'm trying to put the vector PMTiles I created on a webpage and I've made it do that here:

https://cw3e.ucsd.edu/wrf_hydro/merit_rivers/merit_rivers_v07.html

The javascript behind it is:

https://cw3e.ucsd.edu/wrf_hydro/merit_rivers/merit_rivers_v07.js

My current struggle is to make it interactive in a very simple way, for example, change the feature color on hover and/or display some feature attributes in a pop-up. I try to follow the example here:

https://maplibre.org/maplibre-gl-js/docs/examples/hover-styles/

After struggling with it for a long time, I'm still stuck. The example looks straightforward but not for vector PMTiles. I've search around here and the internet but couldn't find anything similar. I believe interactive functions for PMTiles are doable, right? What should I do differently for PMTiles than other data? I apologize if this question has been answered already elsewhere.

Thanks so much!

[HarelM]

I think you'll need some more background to better solve your problem.
PMtTiles is a format for storing data - the vector data that is later on styled using a style.json file.
The PMtiles is used in the style as a "source" - a source of data that is, and layers are used to style this data.
If you wish to make a map intercative you'll probably need to change the style by adding and removing layers.
Or by adding html elements such as popup and markers.
I works recommend conversing with a GenAI tool to better understand how all this works...

[fallspinach]

Hi @HarelM , thanks so much for your help! Obviously I have too little background knowledge on the very basics of how things work in MapLibre GL JS. I’m following your guidance and using ChatGPT to learn more now!

[fallspinach]

Problem solved! Thanks again for your help! ChatGPT suggested creating a duplicate layer just for highlighting. That seems more complicated but turned out to be easier than updating the layer style. Here is the updated script:

https://cw3e.ucsd.edu/wrf_hydro/merit_rivers/merit_rivers_maplibre.html

https://cw3e.ucsd.edu/wrf_hydro/merit_rivers/merit_rivers_maplibre.js