Register to watch the webinar

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Adblock detected. If you have any problems registering try disabling the browser extension and refreshing this page.

Lunchbox
Thursday
June 11, 2020
  |  
12:00 pm
  
(PST)
  |  
Duration: 
40:20

Guest Devs: Turf.js for animation & QueryRenderedFeatures for dynamic map legends

William B Davis

Information Designer

Jonathan Critchley

Co-founder

About this episode

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...

Code-along and other links

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

Q+A

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

Registration

Thursday, June 11, 2020
  |  
12:00 pm
  
(PST)
Thank you for registering!
*All registered participants will receive a link to the recording.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

If you're having trouble registering try disabling any ad blocker or browser extension and refresh the page.

William B Davis

Information Designer

Jonathan Critchley

Co-founder

About this episode

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...

Code-along and other links

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

Q+A

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

Discover other webinars

See all