1. GIS User to Web-GIS
Developer Journey
T W O M O N T H S O F P L A N
Tek Bahadur Kshetri
Geoscience, graduate student
University of Calgary, Alberta, Canada

2. How much do you know about Web-
GIS?
https://forms.office.com/Pages/AnalysisPage.aspx?id=7KAJxuOlMUaWhhkigL2RUTw6Dw9K5gV
MjbH753YHWdRUOEVXUE4yQzNSUlNPUEZIQlRITEtNVklONS4u&AnalyzerToken=b86BxAs9b
aKkovXrdtRw5hbGbagl2p9e

3. Step2 Step3 Step4
Step1
GIS Basic
Understanding of
concept of GIS.
Frontend
Interactive web-apps
using HTML, CSS, JS
(LeafletJS)
Map Server
OGC standard service,
WMS, WFS, WCS
using GeoServer
Backend
Create, Read, Update,
Delete spatial data
using Django
Open-source web-GIS roadmap

4. What is open-source?
• Open source is source code that is made freely available for possible modification and
redistribution. Products include permission to use the source code, design documents, or
content of the product.
-Wikipedia

5. What is Web-GIS
• GIS in a World Wide Web (WWW)
• Replacing the desktop software
• Can access the same data by multiple persons
• Easy way of distribution of data
• Support real-time spatial analysis

6. web-GIS
workflow

7. Common problems
of beginners
• Start learning multiple language at same
time.

8. Common problems
of beginners
• Start learning multiple language at same
time.
• Dive into framework without knowing the
programming language itself

9. Common problems
of beginners
• Start learning multiple language at same
time.
• Dive into framework without knowing the
programming language itself
• Try to memorize everything

10. Common problems
of beginners
• Start learning multiple language at same
time.
• Dive into framework without knowing the
programming language itself
• Try to memorize everything
• Give up quickly

11. Common problems
of beginners
• Start learning multiple language at same
time.
• Dive into framework without knowing the
programming language itself
• Try to memorize everything
• Give up quickly

12. Step2 Step3 Step4
Step1
GIS Basic
Understanding of
concept of GIS.
Frontend
Interactive web-apps
using HTML, CSS, JS
(LeafletJS)
Map Server
OGC standard service,
WMS, WFS, WCS
using GeoServer
Backend
Create, Read, Update,
Delete spatial data
using Django
Open-source web-GIS roadmap

13. 01. GIS basic
• Web-GIS is variant of GIS
• Knowledge of GIS might helps the
development work easier and faster
way and also helps during testing
environment
• It helps in decision making and
doing right things

14. Step2 Step3 Step4
Step1
GIS Basic
Understanding of
concept of GIS.
Frontend
Interactive web-apps
using HTML, CSS, JS
(LeafletJS)
Map Server
OGC standard service,
WMS, WFS, WCS
using GeoServer
Backend
Create, Read, Update,
Delete spatial data
using Django
Open-source web-GIS roadmap

15. 02. Frontend (20 days)

16. 02. Frontend
• Pick up HTML-CSS
• Dive into JS
• Learn about mapping libraries and
other utilities

17. Pickup HTML and
CSS
• HTML and CSS are the fundamental things
for building the web-pages
• It is easy to understand and supported by
all browsers

18. Dive into JavaScript
• It helps to add interactivity to web-pages
• Mainly used for client-side purposes

19. HTML, CSS and JS
https://medium.com/@codewaseem/html-5-deep-dive-part-1-introduction-f52e3848b9eb

20. Learn about mapping
libraries and other utilities
• Common required things for web-GIS is
data visualization
• Mapping libraries like, leafletjs, openlayer,
mapbox, turfjs etc make data visualization
easier
• Other utilities like bootstrap, material UI,
jquery will help to develop the interface
rapidly and easily

21. Best resources
• Leaflet crash course: https://youtu.be/ls_Eue1xUtY
• Leaflet from basic to advance (19 videos):
https://www.youtube.com/playlist?list=PLyWyQBSWLw1NH1wsA0wkSMTlQ45P0AqCj
• W3Schools website: https://www.w3schools.com/

22. Step2 Step3 Step4
Step1
GIS Basic
Understanding of
concept of GIS.
Frontend
Interactive web-apps
using HTML, CSS, JS
(LeafletJS)
Map Server
OGC standard service,
WMS, WFS, WCS
using GeoServer
Backend
Create, Read, Update,
Delete spatial data
using Django
Open-source web-GIS roadmap

23. 03. Map Servers (20 days)

24. Why you need map server?
• To handle various data formats (geojson, shp, tiff, geopackage etc)
• To control various sources of data (file, services, database)
• To visualize Large size of data ( >1GB)
• To interact with large amount of data
• To manage symbology for each layer
• To produce standard output for all layers (WMS, WFS, WCS)

25. Map server
• To solve the complexity of large volume of data
from various sources, we need a map server
• Mapping server provides the OGC standard
services like, WMS, WFS, WCS
• Most common and popular open-source server
is GeoServer

26. Best resources
• GeoServer crash course: https://youtu.be/vL6kgJmOCxg
• GeoServer and Leaflet Web-GIS (13 videos):
https://youtube.com/playlist?list=PLyWyQBSWLw1OS7HojnpX6aogfm7LtF39S
• GeoServer official documentation: https://docs.geoserver.org/
• OGC services (WMS, WFS, WCS, WPS): https://www.ogc.org/docs/is

27. Step2 Step3 Step4
Step1
GIS Basic
Understanding of
concept of GIS.
Frontend
Interactive web-apps
using HTML, CSS, JS
(LeafletJS)
Map Server
OGC standard service,
WMS, WFS, WCS
using GeoServer
Backend
Create, Read, Update,
Delete spatial data
using Django
Open-source web-GIS roadmap

28. 04. Backend (20 days)

29. Learn about database and
backend
• In general, a geo-database is used to store,
query and get the information of the geospatial
data
• Most popular backend languages are python,
php, javascript, java etc
• Choose one language first and learn the
framework

30. Lear about database and
backend
• In this stage, it is better to learn at least following things,
• About the Structured Query Language (SQL)
• About the API (GET, POST, PUT, DELETE) request
• At least develop one Create, Read, Update, Delete (CRUD)
project
• About the Object Relational Mapping (ORM)
• Working with PostGIS and it’s extensions such as PG Routing
• Learn about geospatial processing libraries such as GDAL,
OGR etc

31. Best resources
• Introduction to open-source Web-GIS (Udemy course):
https://www.udemy.com/course/introduction-to-web-mapping-and-web-gis-2020-
geodjango/?referralCode=72E09BDD6D9C8ECE2169
• Web Mapping and Web-GIS from Dev to Deployment: GeoDjango (Udemy course):
https://www.udemy.com/course/web-mapping-and-web-gis-from-dev-to-deploy-2021-
geodjango/?referralCode=14893C9BD7E7D959F865
• GeoDjango playlist: https://www.youtube.com/watch?v=pxX6gI48eh4
• Bookmark note on map (GeoDjango tutorial):
https://youtube.com/playlist?list=PLyWyQBSWLw1OUfqcPzO6AceuGpC5gr-_n

32. Step2 Step3 Step4
Step1
GIS Basic
Understanding of
concept of GIS.
Frontend
Interactive web-apps
using HTML, CSS, JS
(LeafletJS)
Map Server
OGC standard service,
WMS, WFS, WCS
using GeoServer
Backend
Create, Read, Update,
Delete spatial data
using Django
Open-source web-GIS roadmap

33. Congratulation! You are a Web-
GIS developer
Additional things

34. frontend frameworks
• Frontend frameworks help to determine logic, structure, design and animation of every
elements on web applications
• Most popular frontend libraries are, react, vue, angular

35. SDI Platforms
• Instead of building web-GIS from scratch,
we can use pre-build system and modify
according to our need
• Some most famous SDI are, GeoNode,
GeoTools, MapStore2, TerriaJS etc

36. What Next?

37. What Next?
• Never stop learning because life never
stop teaching
• Stay up to date with latest technologies
• Learn about GIS cloud native solutions
• Learn about geoprocessing and geospatial
tool development

38. Complete
open-
source
Web-GIS
developme
nt roadmap
Ref: https://www.gislounge.com/open-source-web-gis-development-roadmap/

39. Summery
• Start with GIS and GIS software
• Learn frontend using HTML, CSS, JS (LeafletJS)
• Learn about GeoServer
• Learn about Django and PostGIS

40. Connect with me
@iamtekso
n
Facebook group:
https://www.facebook.com/groups/1049524025731229

41. All the courses info and discounted link
• Introduction to open-source Web-GIS programming:
https://www.udemy.com/course/introduction-to-web-mapping-and-web-gis-2020-
geodjango/?couponCode=B1EAC0E55C2E418C01EC
• Web-mapping and Web-GIS from Dev to Deployment:
https://www.udemy.com/course/web-mapping-and-web-gis-from-dev-to-deploy-2021-
geodjango/?couponCode=9DA3E9161373EE7F283E
• Open-Source Web-GIS Development: https://www.udemy.com/course/web-gis-
development-2021/?couponCode=AE7108C677D9C5A43F2A

42. All the courses info and discounted link
• Geospatial Data Analysis with Python: https://www.udemy.com/course/geospatial-data-
analysis-with-python/?couponCode=80966BD168BDDE1857C6
• Deep Learning Application for Earth Observation: https://www.udemy.com/course/deep-
learning-application-for-earth-observation/?couponCode=B078EED1DC015F4CAE58
• Elevation Data Processing using GIS: https://www.udemy.com/course/working-with-dem-
data-in-gis/?couponCode=D14D05DFC993A6C660C5

43. Thank you!
Any Questions?