TodoBI TodoBI

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