In-class Excercises: Templates, Turf

Part 1: Using Mustache

1. Start with this example jsbin.
2. Change the context object to change the name and job.

Part 2: Mustache templates in HTML

1. Use this jsbin as an example. Look at how it stores the template in HTML.
2. Using the code from Part 1, move the template from JavaScript to HTML:
   1. Add a script element in your HTML.
   2. Move the template from the JavaScript into the new script element.
   3. Get the template from the HTML in your JavaScript by calling $('#template').html(). The selector will be different depending on your script element's id.

Part 3: Mustache template loops

1. Start with this example jsbin.
2. Change the SQL to select rows from one of your tables.
3. Change the template to show data from the rows in your tables.

Part 4: Mustache templates in Leaflet popups

1. Start with this example jsbin.
2. We want each popup to include a link to the Airbnb listing. These URLs look like this:

   https://www.airbnb.com/rooms/id

   for example: https://www.airbnb.com/rooms/10790927. The id is the id field in the data from CartoDB.
3. Change the popups' templates to include a link to the Airbnb listing associated with the point on the map.

Part 5: Turf, buffer

Starting with this jsbin, add a buffer to each feature in a GeoJSON file loaded from GitHub.

This jsbin contains a working example if you get stuck.

Part 6: Turf, convex hull

Use Turf to add the convex hull of a polygon to a map, starting with this jsbin.

This jsbin contains a working example if you get stuck.