Introduction to web programming for GIS applications
“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.
A short lecture to introduce the course and tell you what it is all about.
A little bit about me and why I decided to develop this course.
Understand the philosophy and goals of the course
What is client-server architecture and how does it work?
The major and minor components of a web application
HTML - Structure and content
The basic structure of an HTML document. Header and body sections.
An introduction to HTML tags. Headers, paragraphs, and lists.
Adding a link to a web page and using the web to find reference material about HTML tags
Divs, line breaks, and HTML tags for styling
Create tables in HTML using table, th, tr, and td tags.
Creating a form with HTML tags
Continuation of previous lecture on creating forms in HTML
CSS - Making your document look good
Introduction to the basics of CSS
Description of the three different places that you can include CSS in your document.
How thebrowser determines which CSS rules to apply when their are conflicts.
How to use pseudo-selectors to refine the selections that css rules are applied to.
Methods for specifying colors in CSS
What is CSS used for in web applications and how can we learn more.
The Document Object Model and Events
A short introduction to what the Document Object Model means and how it works.
An introduction to the concept of objects
Describing an object class, an abstract class, and the instantiation of objects.
An example of how objects are used, and how their properties are set in Powerpoint and QGIS
How is the HTML code of a web page translated into a document object model.
Learn what an event is and how to respond to events with an event handler
Learn how to view element properties using the google chrome developer tools
Understand the purpose of variables and how to use them
Learn how to validate user input and report errors to the user.
Learn about the problems associated with alert boxes and methods for communicating with the user without using alerts.
More about validation and an example of using DOM manipulation to communicate to the user.
Finishing our example by outputting our results to the user using DOM manipulation
Learn how to use objects and JSON to store data.
Frameworks, Libraries, API's, and Plug-Ins
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.
An introduction to the purpose and uses of bootstrap
A demonstration of using Bootstrap classes to layout and style your web page
An introduction to jQuery.
Selecting DOM elements with jQuery selectors
Using jQuery to modify the DOM
Learn how Geo-spatial data is stored 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.
Client-side example. Putting it all together.
A description of the advantages of Code Editors with some examples.
Learn how to create a basic responsive web map layout with HTML, CSS, and bootstrap
Learn how to display and style your own custom data
Learn how to add data from an external geoJSON data to a web map
Learn how to loop through geoJSON data and create HTML from it on the fly.
Learn how to integrate Turf.js to perform spatial analysis in the client.
Learn how to use QGIS to create and modify geoJSON data files for use in leaflet.
Summary of client side web mapping and its limitations.
Introduction to Server Side technologies.
Understand the two main server-side technologies, databases and server side programming languages.
Understand more about the types of databases available and how they are used.
Understand how geospatial data is stored in databases and the options that are available.
Understand the types of servers that are available and the advantages and disadvantages of each.
A brief explanation of the history of the web and why we need so many disparate programming languages to develop a web application.
Understand how SQL is used in conjunction with a server side programming language to create dynamic web pages.
Learn how to use a SQL Insert statement to add new records to a database table.
Learn how to use SQL SELECT statements to retrieve data from the database with both single table, multi-table, and spatial queries.
Learn the different methods available to submit a SQL statement to a database with examples.
PHP & AJAX
Learn the purpose and basics of PHP
Learn how to deal with numeric and associative arrays in PHP
Learn how to control program flow in PHP with conditional statements and loops
Understand the dangers of SQL injection attacks and how to prevent them with PDO data objects
Learn how to access and manage the database using PHP Data Objects
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.
Live demonstration of using AJAX requests to retrieve data from the server.
Learn how to format database data on the server as JSON and process it on the client.
Learn how to format spatial data on the server as geoJSON for inclusion in a leaflet map.
Live demonstration of adding data from the database to a leaflet map.
Understand how PostGIS adds geospatial functionality to the PostgreSQL database.