Figure out how to use vector tiles

[kylebarron]

100% should figure out how to use vector tiles. Testing

tippecanoe -zg -o wilderness.mbtiles --drop-densest-as-needed wilderness.geojson

on the wilderness boundaries takes the file size from 17MB to 2.7MB. That's an 85% drop!

Using mbview to inspect this in the browser, it's important to note that you can still get metadata out of the tiles!! I can hover over a wilderness area and see its attributes. So using vector tiles looks like an obvious improvement with no real drawback.

[kylebarron]

nitaliano/react-native-mapbox-gl#746

[kylebarron]

mapbox/mapbox-gl-native#579

[kylebarron]

This is it:

<MapboxGL.VectorSource
  id="nationalParkBoundaries"
  url="https://tiles.nst.guide/nationalpark/tile.json"
  onPress={event => console.log(event.nativeEvent.payload.properties)}
  ref={source => {
    this._vectorSource = source;
  }}
>
  <MapboxGL.FillLayer
    id="nationalParkFill"
    sourceLayerID="nationalpark"
    style={layerStyles.nationalParkFill}
    visibility="visible"
  />
</MapboxGL.VectorSource>

The key is that you also need the sourceLayerID. There can be many layers in a vector tile, and obviously you need to associate the FillLayer style with a specific layer.

I think with Tippecanoe, usually the layer name is the same as what the file name was. But if you can't figure it out, this tool will tell you the layer names.

[kylebarron]

Fixed in 27a3ac8