can we render layers as vector tiles?

[mapsam]

What if we used https://github.com/mapbox/geojson-vt to turn all layers into VTs?

[jczaplew]

Totes. It might give us better rendering performance in some instances. Might want to be intelligent about when to convert to VT and when to leave a layer as-is.

[alukach]

This is a fun idea. Some questions:

• Would this work with Point features?
• Can MapboxGL (that's what we'd use with VT, no?) support interactions with layers? Like clicking on a layer and viewing its property? I struggled to find any examples of this on the Mapbox site (this was the closest I had found, but not exactly the same). I suppose we could use UTF-Grids to mimic interaction, but that seems not-ideal. Anyone know how it works on MapboxStudio when you can view all layers and click to query them?

[mapsam]

Good questions. The interaction piece would be interesting to research further. So the high-level decision here, assuming interaction is less than optimal, is do we:

A) optimize for file size and forgo some user interaction (map clicks)?

OR

B) allow for complete user interaction and assume small file usage in dropchop?

IMO it seems A is more powerful, since we can build other ways to view layer information.

Would this work with Point features?

Not exactly sure - I'd love to see point features drawn as SVG circles instead of map markers at some point. Would be faster and less bulky. Eh?

[nickpeihl]

Does Turf.js work against vector tiles? It seems to me that geojson-vt converts GeoJSON into a different format. Otherwise, we might have to convert from vector tile back to GeoJSON to do analysis.

[mapsam]

I'm thinking that the vector tile piece is really only for the actual drawing of the map, which is where a lot of the lag comes from right now. I think we store all of the raw data as GeoJSON so turf can just run off of that, but when rendering on the map we covert to vector tile.

[nickpeihl]

Oh OK. Sounds good to me then.

[nickpeihl]

I sort of got it working tonight. Still lots to do. But it's exciting progress! It loaded a 24MB building footprints file in seconds! Anyone know how to make screenshot GIFs on Linux?

[mapsam]

Heyo! That's awesome. What are the details?!

not sure about the linux gif maker

[nickpeihl]

I don't have my work with me right now, but the basics are using L.tileLayer.cavas and drawing each feature on the canvas. My code is a mish-mash of this and this.

I'm not certain why the geometry coordinates are divided by 16, but I'm assuming because the square of 16 is 256 which would be the image size per tile. But it...

Well, except it doesn't show the layer in the layerlist, and there's no logic for deciding when to use vector tiles, and I haven't tested it with Turf, and on and on.

[nickpeihl]

OK. I've pushed a proof of concept here. Feel free to play around with it. Lots of things are borked as I said earlier. But it does render the vector tiles.

Some steps you'll need to get this commit working.

1. Run npm install to get geojson-vt.
2. cd into the node_modules/geojson-vt folder and run npm install there.
3. Still in that folder, run npm run build-dev
4. Back in the root folder, run gulp build:prod
5. Finally run gulp and load the dev version in your browser
6. Try loading a geojson file and manually zoom to the extent

I'm sure a lot of the steps above could be automated in the gulpfile. But I haven't gotten that far yet.

[nickpeihl]

In preparation for my upcoming talk at the February 2016 meeting I've been revisiting this work on a new branch that proposes migrating Dropchop from Mapbox.js to Mapbox-GL-JS.

Mapbox-GL-JS uses the GeoJSON-VT library for rendering out of the box. This means we'll be able to handle much larger GeoJSON files. In my branch I've loaded a 17MB point file in ~2 seconds where it completely chokes on the master branch.

This would be a large refactor. Also, mapbox-gl-js has not reached v1.0.0 yet so there may be continuing breaking changes until then.

Here's a list of what works (as of 35b73d2) and what needs to be done to move ahead. My hope is that most of these will be simple fixes once we adapt to the new API.

• Switch to mapbox-gl-js map
• Add medium-sized Point GeoJSON files
• Add medium-sized Point shapefile
• Remove layers
• Rename layer
• Toggle layers
• Render LineString, Polygon and GeometryCollection files
• Fix load files from URL
• Fix query from arcgis server
• Fix load from overpass
• Fix "add location as layer"
• Fix all geoprocessing functions
• Fix "duplicate selected layers" in right-click menu
• Fix "view extent of layers" in right-click menu
• Fix "Convert FeatureCollection into separate features" in right-click menu
• Fix "Combines selected features into a single FeatureCollection"
• Fix "save as..." methods
• Add mapbox-gl-geocoder (browserify + dependency errors)
• Async geoprocessing using web workers to handle bigger jobs (see Start using Webworkers for big jobs #223)

Please feel free to git fetch && git checkout mapbox-gl. Create a clean build by running rm -rf ./node_modules && rm -rf ./dist. Then run npm install && gulp vendor && gulp to build the development version locally.