Assignment 9: JavaScript
Resources
- The the Carto.js documentation is pretty exhaustive...
- ...and I'm maintaining this document that tracks where Carto.js is not fully functional and how you can work around that.
- The Mozilla Developer Network contains an excellent JavaScript reference.
- Khan Academy
- Codecademy
- Eloquent JavaScript
Remember
You have a final project milestone due April 19th.
Continue working with JavaScript
There are numerous directions to go with JavaScript from this point. Pick one of the following activities based on which sounds most interesting to you or will be useful to you as you work on your final project. For each of these assumes you are loading a Carto map using HTML and JavaScript. You could continue with the page and map you have been using for the past few assignments, start a new one, or work on one that is more relevant to your project.
Your choices are:
(A) Add other data to your page
One way to think of this is like adding a widget but you can do whatever you want with it.
Modify the page to show some basic statistics about your data using the Carto SQL API and JavaScript. This JS Bin contains an example of finding the count putting it on a page. You could choose to show the range of some numeric field (MIN and MAX) or the total number of records or something else relevant to the map.
(B) Filter data using checkboxes, dropdowns, or text inputs
Learn a new way to filter data that other than buttons. Choose one or a few form inputs:
- checkboxes (
<input type="checkbox" />) - text inputs (
<input type="text" />) - dropdowns (
<select>)
When the user changes the input(s), your page should filter the data on your map using setSQL().
This HTML Dog page gets into specifics of many HTML form elements. Here's an example of filtering with a text input.
(C) Customize your Carto popups using Carto.js
This is particularly handy if you would like to embed content such as YouTube videos in your Carto popups, which is not possible through the Carto website.
Customize your map's popups by creating a custom template for the popups in your HTML, then using Carto.js to tell the map to use your template. This code example should get you started, and this one shows how to embed video.
Submitting your work
Submit a link to the page on GitHub Pages.Please clearly indicate which activity you chose to do in the text entry. You may optionally choose to include a short paragraph response or summary of your work.