Improve MapLibre demo to show all available lines/points/polygons from all sources

[nyurik]

Current martin demo page shows a list of all available sources (by first calling the /catalog API), and allows the users to turn on/off each source individually. There are some limitations that need to be addressed:

• it relies on the tilejson to tell it which type of information is in the data. Instead, it should allow all types (points / lines / ...), and visualize them all
• it shows everything in the same color - each layer should get its own color, e.g. randomly when the layer is enabled, and possibly with a color picker for extra bonus.
• it requires to know the name of each layer in the MVT. Instead, it should use the "inspection" mode, where all layers are shown regardless of their name
  • it could use multiple colors if the MVT has more than one layer
• make the left sidebar resizable
• make the list of the sources substring-filterable with an input box at the top
• ...?

Requirements

• keep it to a single javascript file
• keep it as simple as possible

Instructions for those who may want to help with this

• install rust
• install docker and docker-compose
• run rust install just
• run just run
• open tests/debug.html file in your browser by copy/pasting the full path to it

[Binabh]

@nyurik I would like to work on this. I am confused in two things.

1. How can we determine the geometry type in order to provide appropriate type in layer?
2. What is inspection mode?

[nyurik]

The "inspector" mode is the answer to the first question too - something similar to mapbox-gl-inspect but for MapLibre (the same thing should exist in Maputnik I would think, or at least it should be ported if not). This way you don't really care what type of geometry each layer has - you just draw them all.

[Binabh]

Thank you @nyurik I shall look into mapbox-gl-inspect. Also I have opened a draft PR for other features. Please provide your feedback if any.

[tordans]

Thanks for working on this! Is there a Martin instance that we can use to link from the Readme to preview the feature?

[nyurik]

Seems this was closed by accident - debug.html still doesn't show polygons, and we need to figure out the "x-ray" mode so that it shows all content without knowing what that content is beforehand

[lodi-g]

Hi,

I'm researching a bit this issue. From my understanding what is missing is the following the source introspection to select the right layer (right now the source and the source-layer have to have the same name).

Some suggestions though:

• It would be useful to have a popup with attributes upon clicking on a point
• It would be useful to be able to open this page with the "base" martin (without cargo/just), e.g. martin debug-page ...
• It would be useful to group sources that does not come from the user itself, see screenshot where my source is "Macedonia" and the rest is something I have no idea about

What do you think?

[tordans]

FYI this might be something that can be reused or be used as an inspiration https://twitter.com/j_igarashi/status/1663405008359129088

[sharkAndshark]

For display all layers in Martin withou knowing the geometry type before, Could this benefit from Future-proof source catalog .Like add the geometry type in metadata?
What's the correct way to implement this?

• Add a custom layer
• Add geometry type in metadata
• Other ways?

[nyurik]

My understanding is that maplibre inspection mode should allow showing all data without having any Metadata. Same as what Maputnik does

[sharkAndshark]

Hi @nyurik Have a lovely day. :D
Some thoughts on this. The idea is displaing each layer in source as circle, linestring and polygon with filter like ['==', '$type', 'LineString'] at same time

foreach(var source in sources){
// add circle layer 
        map.addLayer({
          id: source.id + "_circle",
          ...
          filter: ['==', '$type', 'Point'],
          paint: {
            "circle-color": stringToColour(source.id),
            "circle-radius": 2
          }
        });

// add linestring layer
        map.addLayer({
          id: source.id + "_line",
          type: "line",
          ....
          filter: ['==', '$type', 'LineString'],
          paint: {
            'line-color': stringToColour(source.id),
          }
        });
// add polygon layer
...
}