Download free book about Web Mapping

Great to see this online free book from Michael Dorman: Introduction to web mapping
Download in PDF
INDEX:
Introduction

• 0.1 What is web mapping?
• 0.2 What is JavaScript?
• 0.3 Why use JavaScript for web mapping?
• 0.4 Learning objectives
• 0.5 Software
• 0.6 Background knowledge
• 0.7 Online version
• 0.8 Acknowledgments

I Introduction to Web Technologies

• 1 HTML
• 1.1 How do people access the web?
• 1.1.1 Browsers
• 1.1.2 Web servers
• 1.2 Web pages
• 1.3 Text editors
• 1.4 What is HTML?
• 1.4.1 Overview
• 1.4.2 HTML comments
• 1.4.3 Block vs. Inline
• 1.5 Common HTML elements
• 1.5.1 Structure
• 1.5.2 Title and metadata
• 1.5.3 Styling and Scripts
• 1.5.4 Headings and paragraphs
• 1.5.5 Font formatting
• 1.5.6 Spacing
• 1.5.7 Lists
• 1.5.8 Links
• 1.5.9 Images
• 1.5.10 Tables
• 1.5.11 Grouping
• 1.5.12 Input elements
• 1.6 id, class and style attributes
• 1.6.1 id
• 1.6.2 class
• 1.6.3 style
• 1.7 Code layout
• 1.8 Inspecting elements
• 1.9 Exercise

2 CSS

• 2.1 What is CSS?
• 2.2 CSS rules
• 2.3 CSS selectors
• 2.3.1 Type selector
• 2.3.2 Class selector
• 2.3.3 ID selector
• 2.3.4 Descendant selector
• 2.4 CSS conflicts
• 2.5 CSS inheritance
• 2.6 Linking CSS to HTML
• 2.6.1 Inline CSS
• 2.6.2 Embedded CSS
• 2.6.3 External CSS
• 2.7 CSS properties
• 2.7.1 Color
• 2.7.2 Text
• 2.7.3 Boxes
• 2.8 Example: Hurricane scale
• 2.9 Example: Map Description
• 2.10 Exercise

3 JavaScript Basics

• 3.1 What is JavaScript?
• 3.2 Client-side vs. server-side
• 3.3 JavaScript console
• 3.4 Assignment
• 3.5 Data types
• 3.5.1 Primitive data types
• 3.5.2 Objects
• 3.5.3 Checking type of variables
• 3.6 Functions
• 3.7 Methods
• 3.7.1 Array methods
• 3.8 Scope
• 3.9 Flow control
• 3.9.1 Conditionals
• 3.9.2 Loops
• 3.10 JavaScript Object Notation (JSON)
• 3.10.1 JSON
• 3.10.2 GeoJSON
• 3.11 Exercise

4 JavaScript Interactivity

• 4.1 The Document Object Model (DOM)
• 4.2 Accessing and modifying elements
• 4.2.1 Accessing elements
• 4.2.2 Modifying elements
• 4.2.3 Event Listeners
• 4.2.4 Hello example
• 4.2.5 Poles example
• 4.3 jQuery
• 4.4 Including the jQuery library
• 4.4.1 Including a library
• 4.4.2 Loading a local script
• 4.4.3 Loading a remote script
• 4.5 Selecting elements
• 4.6 Operating on selection
• 4.6.1 .html()
• 4.6.2 .text()
• 4.6.3 .append()
• 4.6.4 .prepend()
• 4.6.5 .attr()
• 4.6.6 .val()
• 4.7 Adding event listeners
• 4.8 Hello example
• 4.9 Poles example
• 4.10 The event object
• 4.11 Iteration over objects
• 4.12 Modifying page based on data
• 4.13 Working with user input
• 4.14 Exercise

5 Web Servers

• 5.1 Introduction
• 5.2 Web servers
• 5.3 Communicating through HTTP
• 5.3.1 Web protocols and HTTP
• 5.3.2 HTTP methods
• 5.4 Static vs. dynamic servers
• 5.4.1 Overview
• 5.4.2 Static servers
• 5.4.3 Dynamic servers
• 5.4.4 Software
• 5.4.5 Practical considerations
• 5.5 URLs and file structure
• 5.5.1 URLs and index.html
• 5.5.2 File structure
• 5.5.3 Relative paths
• 5.5.4 CSS and JavaScript
• 5.6 Running a static server
• 5.6.1 Local with Python
• 5.6.2 Remote with GitHub Pages
• II Web Mapping with Leaflet

6 Leaflet

• 6.1 Introduction
• 6.2 What is a web map?
• 6.3 What is Leaflet?
• 6.4 Alternatives to Leaflet
• 6.5 Creating a basic web map
• 6.5.1 Web page setup
• 6.5.2 Including Leaflet CSS & JS
• 6.5.3 Adding map
• 6.5.4 Creating a map object
• 6.5.5 What are tile layers?
• 6.5.6 Adding a tile layer
• 6.5.7 Tile layer providers
• 6.6 Adding vector layers
• 6.6.1 Adding markers
• 6.6.2 Adding lines
• 6.6.3 Adding polygons
• 6.6.4 Other vector layer types
• 6.7 Adding popups
• 6.8 Adding a description
• 6.9 Introducing map events
• 6.10 Exercise

7 GeoJSON

• 7.1 What is GeoJSON?
• 7.2 GeoJSON structure
• 7.2.1 Overview
• 7.2.2 Geometries
• 7.2.3 Features
• 7.2.4 Feature collections
• 7.3 Editing GeoJSON
• 7.3.1 geojson.io
• 7.3.2 mapshaper
• 7.3.3 Formatting JSON
• 7.4 Adding GeoJSON to Leaflet map
• 7.5 GeoJSON viewer
• 7.5.1 HTML and CSS
• 7.5.2 Base map
• 7.5.3 Adding an event listener
• 7.5.4 Using layer groups
• 7.6 Ajax
• 7.6.1 Overview
• 7.6.2 Examples
• 7.6.3 Ajax requests with jQuery
• 7.7 The $.getJSON function
• 7.7.1 Overview
• 7.7.2 Loading local files
• 7.7.3 Loading remote files
• 7.8 Exercise

8 Symbology and Interactivity

• 8.1 Introduction
• 8.2 L.geoJSON options
• 8.3 Constant style
• 8.4 Varying style
• 8.4.1 States example
• 8.4.2 Towns example
• 8.5 Constructing popups from data
• 8.6 Adding a legend
• 8.6.1 Using L.control
• 8.7 Using CSS to style the legend
• 8.8 Dynamic style
• 8.8.1 Styling in response to events
• 8.8.2 Dynamic control contents
• 8.8.3 Linked views
• 8.9 Exercise

III Databases
9 Databases

• 9.1 Introduction
• 9.2 What is CARTO?
• 9.2.1 The CARTO platform
• 9.2.2 Alternatives to CARTO
• 9.3 Databases
• 9.4 Spatial databases
• 9.5 What is PostGIS?
• 9.6 What is SQL?
• 9.6.1 Overview
• 9.6.2 Non-spatial queries
• 9.6.3 The geometry column
• 9.6.4 Spatial queries
• 9.7 The CARTO SQL API
• 9.7.1 API usage
• 9.7.2 Query example
• 9.7.3 Uploading your data
• 9.8 CARTO and Leaflet
• 9.9 Exercise

10 Non-spatial queries

• 10.1 Introduction
• 10.2 Subsetting with SQL
• 10.2.1 Filtering based on attributes
• 10.2.2 Displaying on a map
• 10.3 Creating a dropdown menu
• 10.4 Populating dropdown options
• 10.4.1 How many species do we have?
• 10.4.2 Dropdown menu placeholder
• 10.4.3 Finding unique values
• 10.4.4 Adding the options
• 10.5 Updating the map
• 10.5.1 Overview
• 10.5.2 Manual example
• 10.5.3 Automatic updating
• 10.6 Rearranging the code
• 10.7 Exercise

11 Spatial queries

• 11.1 Introduction
• 11.2 Adding marker on click
• 11.2.1 Getting click coordinates
• 11.2.2 Adding custom marker
• 11.3 Spatial PostGIS operators
• 11.3.1 Overview
• 11.3.2 Geographical distance
• 11.3.3 Sphere vs. Shperoid
• 11.4 Adding nearest points to map
• 11.5 Drawing line connectors
• 11.6 Exercise

IV Advanced topics
12 Client-Side Geoprocessing

• 12.1 Introduction
• 12.2 Geoprocessing with Turf.js
• 12.2.1 Overview
• 12.2.2 Including the Turf.js library
• 12.3 Great Circle line
• 12.4 Continuously updated TIN
• 12.4.1 Overview
• 12.4.2 Generating random points
• 12.4.3 Adding a TIN layer
• 12.4.4 Draggable circle markers
• 12.4.5 Continuous updating
• 12.5 Clustering
• 12.5.1 Overview
• 12.5.2 Processing sets of features
• 12.5.3 Adding a Convex Hull
• 12.5.4 DBSCAN clustering
• 12.6 Heatmaps with Leaflet.heat
• 12.7 Exercise

13 Collaborative Mapping

• 13.1 Crowdsourcing
• 13.2 The drawing control
• 13.3 Working with drawn items
• 13.4 Submission form
• 13.5 Sending features to the database
• 13.5.1 Setting database permissions
• 13.5.2 Adding draw control
• 13.6 Exercise

V Appendices
Appendix
A Associated files
B List of examples

• B.1 Main
• B.2 Additional
• B.2.1 HTML and CSS
• B.2.2 JavaScript
• B.2.3 Leaflet
• B.2.4 Geo-processing
• B.2.5 2.5D Maps
• B.2.6 3D maps
• B.2.7 Animation
• B.2.8 Real-time data

C List of exercise solutions
D General Information
D.1 Place and Time

• D.2 Course materials
• D.3 Lesson Plan
• D.4 Additional resources
• D.4.1 HTML & CSS
• D.4.2 JavaScript
• D.4.3 Web mapping
• D.4.4 PostGIS

E Projects

• E.1 Overview
• E.2 CARTO Account
• E.3 Data
• E.4 Project requirements
• E.4.1 Project 01
• E.4.2 Project 02
• E.4.3 Project 03
• E.5 Submission
• E.6 Grading

F Setting up an SQL API

• F.1 PostgreSQL and PostGIS
• F.2 Adding data
• F.3 Testing
• F.4 Adding read-only user
• F.5 Node.js
• F.6 Server
• F.7 Testing
• F.8 Setup for production