Introduce ability to find bounds of data within style interface

[heyitsgarrett]

The "find data" button in the Source interface is amazing:

... but I find myself digging around in the style interface after importing that third-party data. Can we have a toggle-able reference layer or discovery button for individual data sources?

[GretaCB]

Hey @heyitsgarrett , I agree (https://github.com/mapbox/tm2/issues/529).

A source's metadata is no longer available once it's converted to vector tiles, which is why this hasn't been added in the Style UI yet. It may be worth adding metadata to the vector_layers object.

This issue seems to be problematic for any layer only visible beyond z6 or so, like city data or equal/smaller size. And city-size data seems like a pretty normal use case. Thoughts @yhahn ?

What other features would be made possible if a layer's metadata carried through to the Style UI?

/cc @yhahn @samanpwbb

[GretaCB]

@yhahn I've started exploring https://gist.github.com/yhahn/c3748cad2fd42fc1afdc#mapbox-studio-vector_layers-metadata-boost and trying to familiarize myself with the Style side of Mapbox Studio.

I understand that vector_layers info for remote sources are grabbed from the returned TileJSON. And I will need to apply center and extent to the vector_layers object when a source is being processed by unpacker, and then center/extent will be available via TileJSON.

But for local sources, I'm not really sure how their data is being transferred to the Style side. I added center and extent to the layer object in the addlayer function on the Source side so that I could obtain it again here. But it's not being picked up.

What's the connection between Source and Style?

This also looks promising: https://github.com/mapbox/mapbox-studio/blob/master/lib/style.js#L209-L234

[GretaCB]

Just fyi @yhahn , for remote sources, I refactored mapnik-omnivore a bit to add the new values to vector_layers. https://github.com/mapbox/mapnik-omnivore/tree/more_metadata

After deploying unpacker to staging with this branch, tileJSON now has extent, center and valid min/max zooms set in vector_layers. Example

[GretaCB]

@yhahn @samanpwbb Added a zoom-to-layer button in the Style UI, but struggling with the layout. Not sure what the best positioning of the button should be...

[yhahn]

hrmmm

[GretaCB]

@yhahn @samanpwbb

• Changed the icon back to crosshair, so as not to overload marker (Places).
• Matched positioning of zoom-to and color with the Source UI.
• Lengthened the color box a bit, so it's easier to see and correlate with each layer.

Source UI

Style UI

Longer color boxes

[yhahn]

:+1: guess we gotta get the tilelive.js validation going : )

[samanpwbb]

This looks great.

I'm a little concerned with longer color swatches: they might interfere with long layer names. Did you feel it out with a range of sources + a smaller screen size?

[GretaCB]

Hmm, good point @samanpwbb . I might just move the swatches to the left a bit.

[samanpwbb]

Keep vertical gutters on the left and right consistently 10px if you can: