WebGIS Development Mastery
Course Blueprint
With Christian Lutz
Hi there,
Thanks for being in the WebGIS Development Mastery Community! Here is your Blueprint.
1. WebGIS Fundamentals
A Web GIS is a GIS, often for a specific purpose, that runs in browsers and shows our data for analysis,
visualization etc.
Often it takes data from a Server (computer connected to internet) but can also leverage data directly
from your computer.
There a no limitations against a Desktop GIS.
As stated, they are more for specific purposes.
The basic path to become a professional WebGIS developer:
Why WebGIS?
+ Reach broader audience
+ No installation (Browser)
+ Not dependent on operating system
+ Lower costs
+ Easier to use (specific cases)
+ Updates immediately available
2
Here is the basic WebGIS architecture and how the data flows:
Requests: Used to get data and webapps from server
Response: Answer from server that sends data to browser app
2. Web Development - Programming Elements
In this section you will get an overview about the most important elements to learn Web
Development to be able to implemented your WebGIS with ease, joy and confidence.
Basically:
+ Algorithms
+ Debugging
+ With these concise straightforward Explanations and Exercises
Recommendation: Use an IDE as Visual Studio Code e.g. to write your code.
Programming is:
- Fun
- Takes time sometimes
- Write YOUR functionality
- Clean Code (in sense of formatting – I have see by my students that those learn faster who
format clean)
3
Programming is not
- Like the Matrix guys do
- Memorise Code
- Programmers always have a great reference
- Internet, Books, this presentation ;)
The most important elements the complete framework.
• Algorithms
• Where to
• Variables/Data Types
• In/Output
• Conditionals/Loops
• Functions
• Object Oriented Programming
• Modules
• Asynchronicity / AJAX
• JSON and Objects
• Debugging
• Architecture
4
3. WebGIS - Create your First WebGIS
Your most important document and starting point is the documentation of the WebGIS library.
[Link]
To understand it well, you should be well familiar with JavaScript.
Architecture
Here is the architecture of the ArcGIS Maps SDK/API for JavaScript.
In the bottom we have the client side with HTML, CSS and JavaScript which is utilising the ArcGIS API
for JavaScript. And doing requests and getting response to and from the server. Dojo is not actually
part of it anymore, so do not worry.
In the top we see that the ArcGIS API for JavaScript actually interacts with the ArcGIS REST API. Which
are many server script/codes that the ArcGIS API for JavaScript is talking to and which are getting the
map data from the server whether they be in a folder structure prepared or in a database and so on,
on the server or even other servers of ArcGIS Online/ArcGIS Enterprise.
5
Components
In the image below see the basic components with that we have a view which holds the graphics like
the layer data. It is also connected to the map and its layers – so with the actual data. The view also
sets the extent and you can use it to do that. Furthermore the view manages the widgets.
Source: ESRI
WebGIS Setup
To setup a WebGIS you can always follow these basic steps and then create all its functionalities:
Framework to set up a map:
0. UI/UX
1. Add API → [Link]
2. Map
3. Layer
4. View
5. Wait for Layer load! – Important to get data like the full extent if you want to zoom to that in
the beginning
6. All the functionality in a readable structure
© Christian Lutz. 2024 All rights reserved