Introduction to Web Mapping

Description

A web map is an interactive display of geographic information, in the form of a web page, that you can use to tell stories and answer questions. Web maps have numerous advantages over traditional mapping techniques, such as the ability to display up-to-date or even real-time information, easy distribution to end users, and highly customized interactive content. Introduction to Web Mapping teaches you how to develop online interactive web maps and web mapping applications, using standard web technologies: HTML, CSS and JavaScript. The core technologies are introduced in Chapters 1-5, focusing on the specific aspects which are most relevant to web mapping. Chapters 6-13 then implement the material and demonstrate key concepts for building and publishing interactive web maps. The book: Gives an introduction to fundamental web technologies: HTML, CSS and JavaScript Covers Leaflet, the popular open-source JavaScript library for building web maps Describes the GeoJSON vector layer format and the Ajax technique for loading data Shows how spatial database APIs, such as the CARTO platform, can be combined with a web map to query and display large amounts of data Introduces client-side geoprocessing with the Turf.js JavaScript library, for applying spatial operators in the browser Demonstrates a complex web mapping application for collecting crowdsourced data, combining Leaflet, CARTO and the Leaflet.draw plugin Goes over 69 complete code examples and includes 9 solved exercises for building web maps and web pages (downloadable code is provided in the online supplement) The book is intended for beginners with no background in web technologies or programming. Nevertheless, some prior experience with computers and programming is beneficial. The book can be used for self-study, or as a textbook in a standard undergraduate "Web mapping" course in a Geography department, intended for students specializing in Geographic Information Systems (GIS). Cover Half Title Title Page Copyright Page Dedication Contents Preface 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 Author Part I: Introduction to Web Technologies 1. HTML 1.1 Introduction 1.2 How do people access the web? 1.3 Web pages 1.4 Text editors 1.5 What is HTML? 1.6 Common HTML elements 1.7 id, class, and style attributes 1.8 Code layout 1.9 Inspecting elements 1.10 Exercise 2. CSS 2.1 Introduction 2.2 What is CSS? 2.3 CSS rules 2.4 CSS selectors 2.5 CSS conflicts 2.6 CSS inheritance 2.7 Linking CSS to HTML 2.8 CSS properties 2.9 Hurricane scale example 2.10 Map description example 2.11 Exercise 3. JavaScript Basics 3.1 Introduction 3.2 What is JavaScript? 3.3 Client-side vs. server-side 3.4 The JavaScript console 3.5 Assignment 3.6 Data types 3.7 Functions 3.8 Methods 3.9 Scope 3.10 Flow control 3.11 JavaScript Object Notation (JSON) 3.12 Exercise 4. JavaScript Interactivity 4.1 Introduction 4.2 The Document Object Model (DOM) 4.3 Accessing and modifying elements 4.4 What is jQuery? 4.5 Including the jQuery library 4.6 Selecting elements 4.7 Operating on selection 4.8 Binding event listeners 4.9 Hello example 4.10 Poles example 4.11 The event object 4.12 Iteration over arrays and objects 4.13 Modifying page based on data 4.14 Working with user input 4.15 Exercise 5. Web Servers 5.1 Introduction 5.2 Web servers 5.3 Communicating through HTTP 5.4 Static vs. dynamic servers 5.5 URLs and file structure 5.6 Running a static server Part 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.6 Adding vector layers 6.7 Adding popups 6.8 Adding a description 6.9 Introducing map events 6.10 Exercise 7. GeoJSON 7.1 Introduction 7.2 What is GeoJSON? 7.3 GeoJSON structure 7.4 Editing GeoJSON 7.5 Adding GeoJSON to Leaflet map 7.6 GeoJSON viewer example 7.7 Ajax 7.8 The $.getJSON function 7.9 Exercise 8. Symbology and Interactivity 8.1 Introduction 8.2 L.geoJSON options 8.3 Constant style 8.4 Varying style 8.5 Constructing popups from data 8.6 Adding a legend 8.7 Using CSS to style the legend 8.8 Dynamic style 8.9 Exercise Part III: Databases 9. Databases 9.1 Introduction 9.2 What is CARTO? 9.3 Databases 9.4 Spatial databases 9.5 What is PostGIS? 9.6 What is SQL? 9.7 The CARTO SQL API 9.8 CARTO and Leaflet 9.9 Exercise 10. Non-spatial Queries 10.1 Introduction 10.2 Subsetting with SQL 10.3 Creating a dropdown menu 10.4 Populating dropdown options 10.5 Updating the map 10.6 Refactoring the code 10.7 Exercise 11. Spatial Queries 11.1 Introduction 11.2 Adding markers on click 11.3 Spatial PostGIS operators 11.4 Adding nearest points to map 11.5 Drawing line connectors 11.6 Exercise Part IV: Advanced Topics 12. Client-Side Geoprocessing 12.1 Introduction 12.2 Geoprocessing with Turf.js 12.3 Great Circle line 12.4 Continuously updated TIN 12.5 Clustering 12.6 Heatmaps with Leaflet.heat 12.7 Exercise 13. Collaborative Mapping 13.1 Introduction 13.2 Crowdsourcing 13.3 The drawing control 13.4 Working with drawn items 13.5 Submission form 13.6 Sending features to the database 13.7 Exercise Part V: Appendices A. Associated files B. List of examples C. List of exercise solutions Bibliography Index