B List of examples
B.1 Main
Table B.1 lists all of the book’s code examples, in order of their appearance. Note that alternative versions of examples that use a custom SQL API server, instead of CARTO, have the -s
suffix in their name (e.g., example-09-01-s.html
) and are marked with (S) (see Section 9.2.2).
Download examples & exercise solutions folder (ZIP file)
Chapter | Example | Description |
---|---|---|
Chapter 1 | example-01-01.html |
A minimal web page |
example-01-02.html |
White space collapsing | |
example-01-03.html |
Lists | |
example-01-04.html |
Images | |
example-01-05.html |
Tables | |
example-01-06.html |
Input elements | |
Chapter 2 | example-02-01.html |
CSS conflicts |
example-02-02.html |
CSS colors | |
example-02-03.html |
CSS fonts | |
example-02-04.html |
CSS box size | |
example-02-05.html |
CSS box position | |
example-02-06.html |
Hurricane scale | |
example-02-07.html |
Hurricane scale with CSS | |
example-02-08.html |
Map description text | |
example-02-09.html |
Map description positioned | |
example-02-10.html |
Map description customized | |
example-02-11.html |
Map description on web map | |
Chapter 4 | example-04-01.html |
Hello JavaScript |
example-04-02.html |
Earth poles | |
example-04-03.html |
jQuery operating on selection | |
example-04-04.html |
jQuery event listener | |
example-04-05.html |
Hello JavaScript (jQuery) | |
example-04-06.html |
Earth poles (jQuery) | |
example-04-07.html |
Event object | |
example-04-08.html |
Populating list | |
example-04-09.html |
jQuery content from data | |
Chapter 6 | example-06-01.html |
Vector tiles (Mapbox GL JS) |
example-06-02.html |
Basic map | |
example-06-03.html |
Adding marker | |
example-06-04.html |
Adding line | |
example-06-05.html |
Adding polygon | |
example-06-06.html |
Adding popup | |
example-06-07.html |
Adding map description | |
example-06-08.html |
Click event | |
Chapter 7 | example-07-01.html |
Loading GeoJSON from object |
example-07-02.html |
GeoJSON viewer | |
example-07-03.html |
Loading local GeoJSON | |
example-07-04.html |
Loading remote GeoJSON | |
Chapter 8 | example-08-01.html |
Constant style |
example-08-02.html |
Variable style (states) | |
example-08-03.html |
Variable style (towns) | |
example-08-04.html |
Popups from data | |
example-08-05.html |
Adding map legend | |
example-08-06.html |
Dynamic style | |
example-08-07.html |
Dynamic information box | |
example-08-08.html |
Linked view | |
Chapter 9 | example-09-01.html |
CARTO query |
example-09-01-s.html |
CARTO query (S) | |
Chapter 10 | example-10-01.html |
Subset based on attributes |
example-10-01-s.html |
Subset based on attributes (S) | |
example-10-02.html |
Creating dropdown menu | |
example-10-02-s.html |
Creating dropdown menu (S) | |
example-10-03.html |
Populating dropdown options | |
example-10-03-s.html |
Populating dropdown options (S) | |
example-10-04.html |
Update on dropdown change | |
example-10-04-s.html |
Update on dropdown change (S) | |
example-10-05.html |
Function to update map | |
example-10-05-s.html |
Function to update map (S) | |
Chapter 11 | example-11-01.html |
Adding marker on click |
example-11-02.html |
Custom marker icon | |
example-11-03.html |
Nearest plants | |
example-11-03-s.html |
Nearest plants (S) | |
example-11-04.html |
Connecting lines | |
example-11-04-s.html |
Connecting lines (S) | |
Chapter 12 | example-12-01.html |
Random points |
example-12-02.html |
TIN layer | |
example-12-03.html |
Draggable marker | |
example-12-04.html |
Continuously updated TIN | |
example-12-05.html |
Four Iris species | |
example-12-05-s.html |
Four Iris species (S) | |
example-12-06.html |
Convex Hull | |
example-12-06-s.html |
Convex Hull (S) | |
example-12-07.html |
DBSCAN clustering | |
example-12-07-s.html |
DBSCAN clustering (S) | |
example-12-08.html |
Point density heatmap | |
example-12-08-s.html |
Point density heatmap (S) | |
Chapter 13 | example-13-01.html |
Drawing control |
example-13-02.html |
Drawn items to GeoJSON | |
example-13-03.html |
Expanded GeoJSON viewer | |
example-13-04.html |
Submission form | |
example-13-05.html |
Collaborative app | |
example-13-05-s.html |
Collaborative app (S) |
B.2 Additional
This section provides some more examples for concepts related to the book materials, but which were left out for lack of space. You are invited to explore these examples and their source code on your own.
B.2.1 HTML and CSS
B.2.2 JavaScript
B.2.3 Leaflet
- Geolocation (based on the Leaflet on Mobile tutorial)
- Setting popup width
- Button to hide or show map description
- Setting “Control” distance from map margins
- Mapbox tile layer (using Mapbox)
- Fit bounds to selected GeoJSON feature
-
Using
for
loops to generate symbology & legend - Variable marker icons based on GeoJSON property
Note: Icons in the variable_marker_icons_based_on_properties
example made by Scott de Jonge from www.flaticon.com, licensed by CC 3.0 BY.
B.2.4 Geo-processing
B.2.5 2.5D Maps
- 2.5D Buildings #1 (using OSM Buildings)
- 2.5D Buildings #2 (using OSM Buildings)
B.2.6 3D maps
- 3D Polygon Extrusion (using Mapbox GL JS)