Consider rebuild using renderer only

[aparlato]

The fill and lines tabs of this application translate the style spec into SVG. Because the style spec is consistently being updated, this means we always have significant tech debt here as well as properties that can't be visualized effectively in SVG.

The typography tab, by necessity, uses the renderer to show labels.

I think we should consider a rebuild of this app to function more simply to rely on the renderer for all visuals. In doing this, maintenance should be much easier and involve only updating the renderer version.

This means we need to be clever in rethinking how to build our visualizations, similar to how we replace ["zoom"] with ["get", "zoom"] in the typography tab so we can make custom geojsons to use as base data and show multiple zooms at once.

Known problems

This should be uncomplicated for the fill tab, however the line tab proves trickier as far as handling line width since this can be linear or step-wise and shift over varying zoom ranges.

To address this, we might consider:

• separate visualization of the linear/step-wise expansion of line width to go alongside the actual choppy rendering (that always appears step-wise) or
• using some kind of SVG mask

[aparlato]

I've started investigating this and before diving deeper, I want to consider all the implications. Here's an example line with a generated geojson:

{
          id: 'test',
          type: 'line',
          metadata: {},
          source: 'fakeGeoJson',
          layout: {},
          paint: {
            'line-color': [
              'interpolate',
              ['linear'],
              ['get', 'zoom'],
              9,
              'blue',
              20,
              'red',
            ],
            'line-width': [
              'interpolate',
              ['linear'],
              ['get', 'zoom'],
              9,
              5,
              20,
              20,
            ],
          },
        }

For lines, by breaking down the generated geojson enough, you get a very good approximation of the color and fairly decent approximation of line-width across zooms.

So, to maintain the current format, the challenges are:

• Having incredibly large geojsons
• Not being able to adjust nicely to different screen sizes
• Not having a straight forward scrolling situation (it would just be panning like the current Typography tab)
• Not being able to export SVG (converting to SVG is much of the reason for this proposal)

That said, I feel like if we can remove all the SVG conversion, we benefit in maintainability by being able to focus this repo specifically on:

• Pulling out all scenarios (from match or case expressions) for a given layer
• Adjusting layers to allow for rendering this way (["zoom"] => ["get", "zoom"] and adding filters for layer ids on features)
• Generating geojson to render the style over (will need to include logic to displace it vertically)

This way, we aren't just playing catch up with updates in Maplibre and Mapbox, especially since those repos have diverged much more at this point.

@kelsey-taylor @almccon @ebrelsford what do you think of this direction? I feel this would really help us maintain this repo with some tradeoffs.

I also think by unifying our approach, it opens the door to visualizing layers across types together. This means you could view a legend for the whole style at once, or we might introduce the ability to create custom groups (maybe with layer metadata).

[ebrelsford]

This seems fine to me, I don't think the SVG export is all that important or useful.

My bigger question is around our priorities. While this tool can be handy at times I think most of our other tools should take precedence.