Rewrite debug.html to show and inspect all layers

[sharkAndshark]

Try to resolve #536, but still it can't show the function source without comment...

• Show all layers with correct geometry type
• Inspect feature property
• Allow to scroll popup content with max-height and a vertical scroll bar
• Allow to stop the popup showing after click outside
• It's possible to select text when the popup it's fixed

Maybe we should have an inspect toggle?

[sharkAndshark]

Some refs.

• mapbox-gl-inspect
• maplibre-gl-inspect
• source-layer-doc, it's said that the property source-layer is required for vector tile sources

Core code in mapbox-gl-inspect:

function circleLayer(color, source, vectorLayer) {
  var layer = {
    id: [source, vectorLayer, 'circle'].join('_'),
    source: source,
    type: 'circle',
    paint: {
      'circle-color': color,
      'circle-radius': 2
    },
    filter: ['==', '$type', 'Point']
  };
  if (vectorLayer) {
    layer['source-layer'] = vectorLayer;
  }
  return layer;
}

function polygonLayer(color, outlineColor, source, vectorLayer) {
  var layer = {
    id: [source, vectorLayer, 'polygon'].join('_'),
    source: source,
    type: 'fill',
    paint: {
      'fill-color': color,
      'fill-antialias': true,
      'fill-outline-color': color
    },
    filter: ['==', '$type', 'Polygon']
  };
  if (vectorLayer) {
    layer['source-layer'] = vectorLayer;
  }
  return layer;
}

function lineLayer(color, source, vectorLayer) {
  var layer = {
    id: [source, vectorLayer, 'line'].join('_'),
    source: source,
    layout: {
      'line-join': 'round',
      'line-cap': 'round'
    },
    type: 'line',
    paint: {
      'line-color': color
    },
    filter: ['==', '$type', 'LineString']
  };
  if (vectorLayer) {
    layer['source-layer'] = vectorLayer;
  }
  return layer;
}

 Object.keys(sources).forEach(function (sourceId) {
    var layers = sources[sourceId];

    if (!layers || layers.length === 0) {
      var colors = alphaColors(sourceId);
      circleLayers.push(circleLayer(colors.circle, sourceId));
      lineLayers.push(lineLayer(colors.line, sourceId));
      polyLayers.push(polygonLayer(colors.polygon, colors.polygonOutline, sourceId));
    } else {
      layers.forEach(function (layerId) {
        var colors = alphaColors(layerId);

        circleLayers.push(circleLayer(colors.circle, sourceId, layerId));
        lineLayers.push(lineLayer(colors.line, sourceId, layerId));
        polyLayers.push(polygonLayer(colors.polygon, colors.polygonOutline, sourceId, layerId));
      });
    }
  });

[nyurik]

thanks! we ought to find a way to discover available layers... we may even have to add that to MapLibre-web itself

[nyurik]

why would we want an inspect toggle? It makes sense for a site that shows all geometries with complex rules (e.g. Maputnik with all the rules). But for the debug screen, we essentially always want to have inspect enabled.

[sharkAndshark]

I was wondering that. But yeah, It's a debug screen. We need the inspect mode all the time.

[nyurik]

i did a minor cleanup of the sources - i think you have a similar bug here - see #853

[sharkAndshark]

Oops. I missed the changes in Future-proof source catalog after rebase

[nyurik]

I love this new approach!!! There are a few minor things I think we need to fix before merging:

• only show tag popup for the enabled layers, not for the base map
• it should be possible to click on the map to fix the popup in place. If a user clicks while the popup is shown:
  • the popup stops following the mouse
  • new popups should not show until i click outside of the current popup
  • the popup should have maximum height
  • the popup should have a vertical scroll bar
  • it should be possible to select text in the popup while its fixed in place

[nyurik]

P.S. do we want to remove color picker here?

[nyurik]

P.P.S. some layers are not clickable. Is it because they are polygons? If so, we may want to disable them for now? Show them as grayed out

[sharkAndshark]

They are unclickable because we don't know the layer info in function source without comment

The reason why previous version debug.html can show them without vector_layer in tilejson is:

• Name each layer by its source name
• Display each layer as circle type

But we shouldn't assume that each source has a layer with the same name(though we hard coded same name layers in test/sql files), and we shouldn't assume each layer is circle type.

[sharkAndshark]

What's the expected behavior for color picker here? It's possible to have many layers in one source:

• Should we change all the related layers' color after the color is picked?
• Should we nested the layers like a tree in left bar? Then maybe we should set a color picker for each layer

[nyurik]

I'm not sure we can do anything meaningful with random colors or color groups. Rather, I think we can just generate random colors on each layer enable -- this way if someone wants different colors, they can disable/re-enable the layer.

[nyurik]

I added a few minor cleanups in sharkAndshark#51 please merge if agree.

For some reason your debug.html does not hide popup when I move the mouse away from the point.

[nyurik]

thanks!!!