This slide is presented on the NGES Geoseries episode #3. Full video recording is available here: https://youtube.com/live/NQIsMc3oEBg

1. My experience as a Web-GIS
developer
C O M P L E T E LY P E R S O N A L T H O U G H T S
Tek Bahadur Kshetri
Geoscience, graduate student
University of Calgary, Alberta, Canada

2. https://forms.office.com/Pages/AnalysisPage.aspx?Analyz
erToken=hISRJnDocgnOMwn16UvLu6rHriB7WWio&id=7
KAJxuOlMUaWhhkigL2RUTw6Dw9K5gVMjbH753YHWdR
UQTNPMEk2RDdITlMyNEw0RFRHNDk2Sk9LSS4u

3. Contents

4. My journey (starting point)
• Started in November 2017 (2nd-year bachelor’s)
• Learned from w3schools
• My motivation was curiosity and my own progress
"Don't just confine to the course material, the field of geomatics is still unexplored"

5. My journey (Past and Present)
• Created a few projects during my bachelor’s (Geolocation, routing
etc)
• 2.5 years of working experience in AIT, Thailand
• 5+ open-source packages created and maintained
• 6000+ students on the Udemy Web-GIS course
• 800K+ views on YouTube
• Studying Geoscience MSc at the University of Calgary, Canada
• Working as a GIS developer at ESRI
Past
experience
Outputs
Current
Engagement

6. My Journey (Future)

7. 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

8. 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

9. And how much
does it cost? https://i.imgflip.com/22jtxt.jpg

10. 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
https://lrimsfaoaf.ait.ac.th/compareMaps/eng#

11. web-GIS
workflow

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

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

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

15. 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

16. 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

17. 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

18. 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

19. 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

20. 02. Frontend

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

22. 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

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

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

25. 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

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

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. 03. Map Servers

29. 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)

30. 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

31. 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

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. 04. Backend

34. 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

35. 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

36. 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

37. 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

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

39. 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

40. 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

41. What Next?

42. 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

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

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

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

46. 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

47. 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

48. Thank you!
Any Questions?