Guest Devs: Turf.js for animation & QueryRenderedFeatures for dynamic map legends
when
June 11, 2020
|
10:00 am
(PST)
Type
Two awesome guest devs will share a look "under-the-hood" of recent projects built with Mapbox. William B Davis is an information designer based in Toronto and co-founder of mapto.ca, and Jonathan Critchley is a software developer based in Halifax, Nova Scotia, with a background in Urban Planning and GIS. He currently works for RATIO.CITY.
William B. Davis | @willy_maps
William is an information designer based in Toronto and co-founder of mapto.ca. He has a background in GIS and journalism and is currently working at Sun Life Financial.
formerspatial.com
Jonathan Critchley | @Afrikanadese
Jonathan is a software developer based in Halifax, Nova Scotia, with a background in Urban Planning and GIS. He currently works for RATIO.CITY, a Toronto based technology company that helps city builders make data-driven decisions for land acquisition using maps to source, analyze and validate sites.
jonathancritchley.ca
You'll learn to...
Willy's links
https://github.com/willymaps/animationdemo
http://www.mapto.ca/maps/marathon
http://www.formerspatial.com/viewshed
https://observablehq.com/@williamdavis/inception-map
Killed or Seriously Injured Interactive
https://willymaps.github.io/ksi/
http://data.torontopolice.on.ca/datasets/ksi
Jon's links
https://www.ratio.city/
https://toronto.ratio.city/sidewalks
https://www.ratio.city/blog/2018/12/3/report-generation
https://ryecast.ryerson.ca/86/Watch/16535.aspx
Dev links
https://deck.gl/#/examples/core-layers/line-layer
https://medium.com/devseed/how-to-replace-your-api-with-vector-tiles-721eecf323c8
https://docs.mapbox.com/mapbox-gl-js/example/filter-features-within-map-view/
Mapbox: ^ queryRenderedFeatures
jtbakr: Similar implementation using .queryRenderedFeatures() API:
https://www.opportunityatlas.org/
jtbakr: One thing that I've found to be helpful when using animations is to use the relatively new `requestAnimationFrame` API recursively instead of setInterval/setTimeout. This is supposed to help out with flickering refreshes/rerendering.
https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
How would you handle animating thousands of paths on a map, e.g. cars that travel at different speeds?
I've played around with animating lots of lines using it before. It definitely could solve your problem:
https://twitter.com/willy_maps/status/1154423317773914112?s=20
Is there a map you really wish you could make?
Toronto building ages! The data is not available due to the structure of past agreements with the city.
DomBrassey: Check out Portland: Age of a City:
http://labratrevenge.com/pdx/#11/45.4474/-122.6637
