CartoDB application building tutorial

Here we build a basic application that shows a lot of the different APIs and methods for CartoDB. While the final application isn't exactly how we would do it for production, it is a good learning tool.

Transcript

1. August 2012 @andrewxhill
5. All the information contained in this tutorial is available in a GitHub repo: https://github.com/ Vizzuality/CartoDB-Tutorials/ tree/master/nyc-rising-seas Contents
6. Get the data Part 1
7. NYC elevation data http://gis.nyc.gov/doitt/dl/ gisdata/shp/ELEVATION.zip
8. 2000 NYC Census blocks http://www.nyc.gov/html/ dcp/download/biggapps/ DCP_nycb2000av_001.zip
9. Load data to CartoDB Part 2
11. Admin controls Part 3
15. Embed maps Part 4
18. Tile API Part 5
20. http://{username}.cartodb.com/ tiles/{tablename}/{z}/{x}/{y}.png URL Pattern
21. http://{username}.cartodb.com/ tiles/{tablename}/{z}/{x}/{y}.png? sql=SELECT * FROM sometable SQL Param
22. SQL Part 6
25. everywhere SQL is
27. SQL API
29. Merging data Part 7
30. nycb2000 elevation Two tables
31. Polygons for over 36,000 NYC census blocks nycb2000
32. Points for over 1,355,486 NYC elevation readings elevation
34. How about a common geospatial join?
35. SELECT nycb2000.cartodb_id, min(elevation) FROM nycb2000,elevation WHERE st_intersects( nycb2000.the_geom, elevation.the_geom ) GROUP BY nycb2000.cartodb_id Find the MINIMUM (in case there are multiple) elevation reading for every census block in NYC
36. That was a huge query, lets store the results right in the table.
37. Add a new column to nycb2000
38. update nycb2000 set elevation = elevation.elevation from elevation where st_intersects( nycb2000.the_geom, elevation.the_geom )
39. Thematic maps Part 8
43. Build an webpage Part 9
44. https://github.com/Vizzuality/ CartoDB-Tutorials/blob/master/nyc- rising-seas/html/index_first.html Base HTML
45. https://github.com/Vizzuality/ CartoDB-Tutorials/blob/master/nyc- rising-seas/steps/1_setup_map.md Setup Map
47. https://github.com/Vizzuality/ CartoDB-Tutorials/blob/master/nyc- rising-seas/steps/2_add_blocks.md Add blocks
49. https://github.com/Vizzuality/ CartoDB-Tutorials/blob/master/nyc- rising-seas/steps/3_add_input.md Add inputs
51. https://github.com/Vizzuality/ CartoDB-Tutorials/blob/master/nyc- rising-seas/steps/ 4_change_styles.md Change style
53. https://github.com/Vizzuality/ CartoDB-Tutorials/blob/master/nyc- rising-seas/steps/5_all_in_style.md More with styles
55. https://github.com/Vizzuality/ CartoDB-Tutorials/blob/master/nyc- rising-seas/steps/ 6_add_mouse_event.md Mouse event
57. THANK YOU @ANDREWXHILL