B List of Examples
Last updated: 2023-01-05 18:18:21
B.1 Main
Table B.1 lists all of the book’s code examples, in order of their appearance.
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 |
Operating on multiple selections | |
example-04-04.html |
Multiple event listeners | |
example-04-05.html |
Event object | |
example-04-06.html |
Populating list | |
example-04-07.html |
Working with user input | |
Chapter 6 | example-06-01.html |
Vector tiles (MapLibre 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 |
SQL API query |
Chapter 10 | example-10-01.html |
Subset based on attributes |
example-10-02.html |
Creating dropdown menu | |
example-10-03.html |
Populating dropdown options | |
example-10-04.html |
Update on dropdown change | |
example-10-05.html |
Function to update map | |
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-04.html |
Connecting lines | |
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-06.html |
Convex Hull | |
example-12-07.html |
DBSCAN clustering | |
example-12-08.html |
Point density heatmap | |
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 mapping | |
Chapter 14 | example-14-01.html |
Minimal MapLibre map |
example-14-02.html |
Adding GeoJSON layer (MapLibre) | |
example-14-03.html |
GeoJSON symbology (MapLibre) | |
example-14-04.html |
3D extrusions (MapLibre) |
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.2 JavaScript
- Current time (Plain JavaScript)
- Current time (jQuery)
- Greeting based on current time (jQuery)
- Radio buttons (jQuery)
- Moving element to different place in document (jQuery)
- Dynamically changed style and of hovered item
- Dynamic multiplication table
- Delayed event listener
- Set maximum of checked boxes
- Display current slider value
- Event listener for page load
- Page x-y coordinates reversed CRS
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
- Fit to GeoJSON bounds
-
Using
for
loops to generate symbology & legend - Variable marker icons based on GeoJSON property
- Projection transformations in the browser
- Custom plugin for adding map description
- Routing (using Mapbox Directions API)
- GeoJSON file upload
Note: Icons in the variable_marker_icons_based_on_properties.html
example made by Scott de Jonge from www.flaticon.com, licensed by CC 3.0 BY.
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)