Introduction to web programming for GIS applications
4.6 (833 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,833 students enrolled

Introduction to web programming for GIS applications

Understanding web programming fundamentals focused on geospatial applications using Leaflet, Turf.js, and PostGIS
4.6 (833 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,833 students enrolled
Created by Michael Miller
Last updated 11/2019
English [Auto], Portuguese [Auto]
Current price: $69.99 Original price: $99.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 14.5 hours on-demand video
  • 5 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Understand the basic technologies used in web programming and how they interact to form a web application. You will gain basic knowledge of HTML, CSS, JavaScript, jQuery, Bootstrap, PHP, AJAX, SQL, and the PostgreSQL database. More specifically you will gain enough understanding of these technologies to be able to use Leaflet, Turf.js, and PostGIS to create a web-mapping application that is freely available to all.
Course content
Expand all 103 lectures 14:41:55
+ Introduction
6 lectures 32:21

A short lecture to introduce the course and tell you what it is all about.

Preview 04:12

A little bit about me and why I decided to develop this course.

Preview 05:07

Understand the philosophy and goals of the course

Preview 03:13

What is client-server architecture and how does it work?

Preview 04:39

The major and minor components of a web application

Preview 10:12

Introduction to how HTML, CSS, and JavaScript work together in the browser.

Preview 04:58
Section 1
8 questions
+ HTML - Structure and content
7 lectures 40:49

The basic structure of an HTML document. Header and body sections.

The structure of an HTML document

An introduction to HTML tags. Headers, paragraphs, and lists.

Basic HTML Tags

Adding a link to a web page and using the web to find reference material about HTML tags

Links and finding reference material on the internet

Divs, line breaks, and HTML tags for styling

Additional HTML tags

Create tables in HTML using table, th, tr, and td tags.

HTML Tables

Creating a form with HTML tags

HTML Forms part 1

Continuation of previous lecture on creating forms in HTML

HTML Forms Part 2
Section 2 HTML
6 questions
+ CSS - Making your document look good
6 lectures 45:06

Introduction to the basics of CSS

Introduction to CSS

Description of the three different places that you can include CSS in your document.

Where CSS lives

How thebrowser determines which CSS rules to apply when their are conflicts.

CSS precedence

How to use pseudo-selectors to refine the selections that css rules are applied to.

CSS Pseudo-selectors

Methods for specifying colors in CSS

Colors in CSS

What is CSS used for in web applications and how can we learn more.

Uses of CSS
Section 3 CSS
7 questions
+ The Document Object Model and Events
6 lectures 30:19

A short introduction to what the Document Object Model means and how it works.

Preview 03:13

An introduction to the concept of objects

What is an object

Describing an object class, an abstract class, and the instantiation of objects.

Abstraction and Instantiation

An example of how objects are used, and how their properties are set  in Powerpoint and QGIS

Objects in computer programs

How is the HTML code of a web page translated into a document object model.

Going from HTML to the DOM

Learn what an event is and how to respond to events with an event handler

Intro to Events

​Section 4 - The DOM
6 questions
+ JavaScript and JQuery
17 lectures 01:41:33

An introduction to the purpose of JavaScript.

Intro to JavaScript

Learn how to access and modify the Document Object Model using Javascript

Accessing the DOM from JavaScript - Part 1

Learn more about how to access and modify the Document Object Model using Javascript

Accessing the DOM from JavaScript - Part 2

Learn how to view element properties using the google chrome developer tools

Viewing objects in Developer tools

Writing event handlers in Javascript

Event Handlers part 1

More about writing event handlers in javascript

Event Handlers Part 2

Even more about event handlers and the if statement in Javascript 

Event Handlers Part 3

Understand the purpose of variables and how to use them


View a second example of DOM manipulation using JavaScript using the switch statement

DOM manipulation example 2

Using Javascript to perform simple calculations

Calculations in javascript

Learn how to validate user input and report errors to the user.

Validation in Javascript Part 1

Learn about the problems associated with alert boxes and methods for communicating with the user without using alerts.

The problem with alerts

More about validation and an example of using DOM manipulation to communicate to the user.

Validation Part 2

Finishing our example by outputting our results to the user using DOM manipulation

More DOM manipulation

Learn how to use for loops and while loops to minimize code repetition in Javascript

Loops in JavaScript

Learn more about using arrays in JavaScript

Arrays in Javascript

Learn how to use objects and JSON to store data.

Objects and JSON
+ Frameworks, Libraries, API's, and Plug-Ins
9 lectures 01:18:42

An introduction to the frameworks and libraries that we will be using in this course, and a few that we won't be using, but that you probably should know about.

Introduction to Frameworks, libraries, API's, and plug-ins

An introduction to the purpose and uses of bootstrap

Bootstrap - Introduction

A demonstration of using Bootstrap classes to layout and style your web page

Bootstrap - Demonstration

An introduction to jQuery.

jQuery - Introduction

Selecting DOM elements with jQuery selectors

jQuery - Selections

Using jQuery to modify the DOM

jQuery - Methods

Learn how Geo-spatial data is stored on the web

Geospatial data on the web

Learn how spatial data is structured in geoJSON format


Learn about the pros and cons of different mapping libraries and what they can do for you.

Preview 06:50
+ Client-side example. Putting it all together.
10 lectures 01:52:25

A description of the advantages of Code Editors with some examples.

Code Editors

Learn how to create a basic responsive web map layout with HTML, CSS, and bootstrap

First Map - HTML & CSS

Use Javascript to initialize a web map and add a background map to it.

First Map - JavaScript

Learn how to display and style your own custom data

First Map - Add Custom Data

Learn how to respond to both DOM events and map events with JavaScript event handlers.

First Map - Respond to user events

Learn how to add data from an external geoJSON data to a web map

First Map - Adding geoJSON data

Learn how to loop through geoJSON data and create HTML from it on the fly.

First Map - Build HTML from geoJSON

Learn how to integrate Turf.js to perform spatial analysis in the client.

First Map - Spatial Analysis with Turf.js

Learn how to use QGIS to create and modify geoJSON data files for use in leaflet.

First Map - Creating geoJSON with QGIS

Summary of client side web mapping and its limitations.

First Map - Summary
+ Introduction to Server Side technologies.
5 lectures 26:44

Understand the two main server-side technologies, databases and server side programming languages.

Preview 01:54

Understand more about the types of databases available and how they are used.

Introduction to Databases

Understand how geospatial data is stored in databases and the options that are available.

Geospatial data in databases

Understand the types of servers that are available and the advantages and disadvantages of each.

Introduction to servers

A brief explanation of the history of the web and why we need so many disparate programming languages to develop a web application.

Preview 06:29
6 lectures 54:38

Understand how SQL is used in conjunction with a server side programming language to create dynamic web pages.

Introduction to SQL
SQL Create statement

Learn how to use a SQL Insert statement to add new records to a database table.

SQL Insert Statement

Learn how to use SQL SELECT statements to retrieve data from the database with both single table, multi-table, and spatial queries.

SQL Select statement

Learn the different methods available to submit a SQL statement to a database with examples.

What can I do with a SQL Statement?
SQL Update and Delete Statements
12 lectures 02:15:30

Learn the purpose and basics of PHP

Introduction to PHP

Learn how to deal with numeric and associative arrays in PHP

Arrays in PHP
Communication with the server - GET and POST

Learn how to control program flow in PHP with conditional statements and loops

Conditional Statements and Loops in PHP

Understand the dangers of SQL injection attacks and how to prevent them with PDO data objects

SQL Injection and PHP Data Objects

Learn how to access and manage the database using PHP Data Objects

Accessing the database in PHP

Learn about some of the limitations with PHP and how to solve them with JavaScript and AJAX

Limitations of PHP and addressing them with AJAX

Learn how to use AJAX to submit a request to the server, process the results on the server and return the data to the client.

Introduction to AJAX - Part 1

Live demonstration of using AJAX requests to retrieve data from the server.

Introduction to AJAX - Part 2

Learn how to format database data on the server as JSON and process it on the client.

Returning JSON data with AJAX

Learn how to format spatial data on the server as geoJSON for inclusion in a leaflet map.

Returning spatial data as GeoJSON - Part 1

Live demonstration of adding data from the database to a leaflet map.

Returning spatial data as GeoJSON - Part 2
  • This is an introductory level course. The focus is on understanding concepts and, although examples will be provided, installing software and following along is not expected.
  • Some familiarity with programming and GIS will be beneficial but it is not assumed.

"Excellent overview of web programming with Geospatial data. I highly recommend this for any beginners. For those with more experience designing web applications, there are a number of points addressed that often are overlooked in typical tutorials. This was a great dive into using open source tools and provides a great example of the tools in action. " - Student Review on Udemy

"Thank you for this course! It fills a knowledge gap that I wasn't even aware I had. As a GIS scientist without formal computer science training, a lot of what you are teaching here will come in handy." - Student message on Udemy

"You truly have inspired me to take a step away and focus on learning more webGIS. Thanks!!" - Student comment on Twitter

"Michael is an incredibly knowledgeable instructor who assumes no prior knowledge. The course content builds up from some very basic coding practices to complex interaction between client and database via a server. Although it was not expected that the exercises were completed I did indeed follow along and now have a fully-functional webapp that I can modify to suit my needs. For an introduction, this course covers an incredibly wide range of concepts covering not only the display and processing of spatial data but also some internet security measures and even a little history thrown in which makes it much easier to understand the possibilities and limitations of Web GIS. I am thoroughly looking forward to starting Michael's Leaflet course." - Student Review on Udemy

"The course is exactly what I need -- not some copy the script and modify, but rather an understanding of what the process is. At this point, it sounds like a great overview and I am equally impressed with the background and teaching style of the instructor." - Student Review on Udemy

"Great course does exactly what it says on the tin! Easily digested bite sized lectures that are clear and concise and always put the learning into a geospatial perspective, just what I was looking for." - Student review on Udemy

This course is oriented towards achieving a conceptual understanding of how web technologies work together to form a web application that can be used to distribute, collect, or analyze geospatial data.

The focus will be on understanding concepts.  You will not have to install any software on your computer.  You will not be asked to follow along step-by-step. Instead the goal will be to provide the background information necessary to understand how the internet works, which technologies you really need to understand and when to use them.  We will also explore additional technologies that you may want to explore further as your understanding and needs grow.

We will be using readily available open source software so you will be able to create web maps without spending any money. The concepts you will learn, however, will be equally valid if you have access to commercial GIS software and web servers.

My intention is to provide the information that I wish I had available before I began my journey into the world of geospatial web development.  I spent a lot of time trying to put together the big picture from the detailed information that was available and I wasted a lot of time pursuing technologies that really were not necessary.  My hope is to help you navigate the world of web development more efficiently than I did and that after taking this course you will be better prepared to take more detailed courses from myself or others. 

Who this course is for:
  • Two main groups of students will benefit from this course. First will be GIS users who are interested in understanding how to distribute and collect data using the internet. Second will be web developers interested in adding geospatial applications to their toolkit.