4. Start with GIS and a GIS Software
7. Learn about mapping libraries and other required utilities
8. Now It's time to start working with map servers
9. Learn about databases and backend
10. Learn a frontend frameworks (Additional)
11. Learn about SDI platforms (Additional)
The advent of the web has transformed everything around us and GIS is no exception. Web-GIS is the pattern or architectural approach for implementing the modern GIS.It enables the distribution of maps and processing tools without time and location restriction to users. Web-GIS allows visual interaction with the geospatial data on the web (either on our mobile phones, desktop software,tablets and practically anywhere with a web browser). This article will provide a step-by-step learning guide, garnered from years of experience of the two authors as well as extensive research, to support your Web-GIS development journey.
The motivation behind this guide emanates from the challenge the authors experienced personally at the outset of their career as GIS Developers. They learned unnecessary tools and technologies that were perhaps fun to them at that time, but frankly wasted a lot of their time. We don't want you to experience the same. That's why we decided to cook up this learning guide for Web-GIS development. We clearly are not the best GIS Developers out there and not even the first, but we all have our interests as humans. Ours, just like many others out there, is strongly in teaching the little we know. And we hope this guide will make it easy for you to get started with Web-GIS development, land you your first job as a GIS Developer or even help you kickstart your start-up or project ideas.
It's important to mention that there exists a lot of programming languages e.g Python, Javascript, C, C++, R, Java, Rust, Go etc and we understand that they can be overwhelming. Which of the languages should I learn first? Where should I start from? I'm done with Python, what next? These are the common questions we have received from beginners in the geospatial programming world. Don't worry, stick with us, this guide would provide answers to most of your questions. Don't forget that only a few people can set a goal and achieve it. It takes determination and self motivation to start and learn a new technology to a satisfactory level. Without motivation you might not be able to make any progress. What always helps is to try and learn one thing at a time in a certain order, hence the need for a guide such as this. Note that the recommendations in this guide are not to be necessarily followed strictly, please feel free to go at your pace! Infact,feel free to refine this guide to your taste!
Below is a flowchart that summarises the whole learning guide to become a Web GIS developer.
Web-GIS can be considered as a variant of GIS, therefore it is expedient to have a solid understanding of what GIS itself entails. Knowledge of a GIS software is also highly recommended because sometimes, these software helps in making our development work easier and faster, they can also act as a testing environment. The underlying concepts of most of these software are the same, therefore it's important not to shy away from the fundamentals of GIS. It's as important as learning to code, because this knowledge would help you in decision making , doing what is right and following best practices.
Recommendation: Learn GIS and play with QGIS for about a month.
Resources:
HTML is a markup language for documents designed to be displayed in a web browser. HTML is used to create pages and make them functional. The CSS is the style sheet language used to create the visual appearance of HTML. HTML and CSS are easy to understand, simple to edit, supported by all browsers. You can create pages with HTML and CSS (eg. login/sign up page, contact us page) and build small projects (eg. facebook login page, youtube clone etc) on it.
Recommendation: Learn the important concepts of HTML and CSS in a week or two.
Resources:
Here are some useful resources & projects for learning HTML and CSS:
- W3schools HTML
- W3schools CSS
- Create a contact form (youtube video)
- Create a navbar with flexbox (youtube video)
- Make facebook login page (youtube tutorial)
JavaScript helps to add the interactivity to your HTML and CSS pages. It is mainly used for client-side purposes. Nowadays, people are using it in server-side (NodeJs), in games development (EaseJs), in mobile app development (React Native) as well. But for the web-GIS developer roadmap, you just need to learn it's application on web development only. That means client-side and server-side only. JavaScript helps us to put logic in the rendering of the pages. Show or hide more information with the click of a button, Zooming in or zooming out on a map, displaying animation to the page etc are some use cases of the javascript.
Recommendation: Learn fundamentals of JavaScript for another 2 weeks or more.
Here are some useful resources & projects for learning JavaScript:
The most common thing required in a web-GIS portal is the data visualization interface. The data visualization interface can be built easily with the help of mapping libraries. Here are the lists of some most commonly used mapping libraries;
- LeafletJs: It is the open-source, lightweight javascript library
- Open layer: It is also an open-source javascript library
- Maplibre-gl-js: It is the open-source javascript library, originated as an open-source fork of mapbox-gl-js, the library is intended to be a drop-in replacement for the Mapbox’s version with additional functionality.
- Mapbox: It is an American provider of custom online maps for websites. It is not totally free. Check the mapbox pricing here.
- Google mapping API: It is the web mapping API provided by google. It is also not totally free. Check the google mapping api pricing here.
- Turf JS: Advanced geospatial analysis for browser and Node.js. etc
You can choose one of the above libraries for the visualization of the spatial data. You don't need to learn all the libraries listed above. We recommend you to learn leaflet or open-layers.
Also along with that you can learn some other utilities such as bootstrap, jquery, as well. These utilities are totally optional. You can also move forward after reading the mapping libraries only. But if you learn about these utilities then it will help to develop the interface rapidly and easily.
Recommendation: Learn about mapping libraries for another 3 weeks. Instead of learning the basics of all libraries, master one. If you consider learning other utilities as well, spend additional days on them.
Here are the some project ideas that can help you to improve your knowledge
- Visualization of administrative boundary dataset (district, region etc) into map
- Build web-GIS basic tools (eg. get coordinate, get current position, full screen view, custom zoom in/zoom out button etc)
- Create the simple portal for geospatial data visualization
Resources:
- Leaflet from basic to advance (youtube playlist)
- Leaflet tutorials
- Open layer tutorials
- Qgis2Web tutorial
- Read from the official website of the required library
For publishing a small amount of the structural dataset, learning mapping libraries is enough. But the complexity will increase when you have a large volume of data from different sources. To manage such a problem we need a web map server. Map servers are the servers which can easily manage the large amount of geospatial dataset and provide the Open Geospatial Consortium (OGC) standard services like Web Map Service (WMS), Web Feature Service (WFS), Web Coverage Service (WCS). One of the most commonly used mapping servers is geoserver. The geoserver is an open source server for sharing, processing and editing the geospatial data. Here is the list of some most commonly used mapping server below:
- GeoServer : An open-source server for sharing geospatial data.
- MapServer :Mapserver is an open-source platform for publishing spatial data and publishing interactive mapping applications to the web.
- GeoNetwork : A catalog application to manage spatially referenced resources.
- GLG map server : Generic Logic Inc. is a premier provider of real-time graphics, data visualization, HMI Scada and custom GIS solutions for software developers around the world.
- Open Map Tiles : A platform to self-host open-source maps.
- Deegree : An open source software for spatial data infrastructures and the geospatial web.
In this stage it is better to learn about the OGC standards as well. After understanding the OGC defined standards only you can build a better web-GIS platform.
Recommendation: You should spend at least 3 weeks on learning web map servers. Spend more time on OGC standards and its use. Learn geoserver and its application in detail.
Resources:
- GeoServer and Leaflet Web-GIS (Youtube Playlist)
- GeoServer documentation (Recommended)
- GeoNetwork documentation
- OGC standards
For the web-mapping things and simple applications, upto step 5 is ok. But in case of a large application you need a database and backend as well. In general, a database is used to store the geospatial data and the backend is used to query and get the required information in any web-applications. The backend can control and send the logic to the web-application. There are lots of programming languages and frameworks purely dedicated to backend. The most popular languages are, python, php, javascript, java, ruby, rust etc. The most popular frameworks are django, laravel, ruby on rails, flask, expressjs, spring etc. You can choose one language first and learn the framework later. Let's suppose you want to learn about django (Python framework), you need to spend some time on learning python before.
In this stage, you should learn at least about the 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
Using the backend, now you can connect the mapping server and create the interactive web-GIS portals. GeoJSON serializer, GeoSpatial data visualization portal using PostGIS database etc are some of the beginner level backend projects on web-GIS.
Recommendation: Learn about Django. You should spend at least 3 weeks learning the databases(PostGIS/PostgreSQL combo recommended) , spatial SQL and backend technology.
Resources:
- Spatial bookmarking note (Youtube playlist)
- Introduction to Web Mapping and Web GIS ( Udemy course)
- Web mapping and Web-GIS from Dev to Deploy 2021: GeoDjango (Udemy course)
- Make a Location-Based Web App With Django and GeoDjango (Blog)
- QGIS and the Spatial Database
- A playlist to dive into Spatial SQL and PostGIS by the great Quiseng Wu!
- Official Introduction to PostGIS
- Interactive learning platform by Crunchy Data
- Geodjango playlist
Frontend frameworks help to determine the logic, structure, design, behaviour and animation of every element you see on screen when you interact with web applications. The frontend framework makes it easy to build the web pages faster. We can say this as an additional thing since we can build the web-GIS applications without learning any frontend frameworks as well. The most popular frontend libraries on javascript are as below,
- React: React builds the UI in component based structure. It is supported and maintained by Facebook.
- Vue: Vue builds the UI in model-view-viewmodel structure. It is not supported by any big company but lots of developers around the world maintain it.
- Angular: Angular builds the UI in MVC pattern. It is supported and maintained by google.
Recommendation: You should spend at least two month on learning a frontend frameworks of choice.
Resources:
You can always build your web-GIS platform from scratch using above mentioned technologies, but what if you found some pre-build system that can be modified for your application? There are alread some spatial data infrastructure (SDI) platforms, which helps to speed up your web-GIS development. Some of the most famous SDI are listed below,
- GeoNode: It is an Open-source web-GIS based Content Management System (CMS), which is mainly used for the data sharing.
- GeoTools: It is an open-source Java library that provides tools for geospatial data.
- MapStore 2: It is an open-source highly modular webgis framework developed by GeoSolutions to create, manage and securely share maps and mashups.
- Ckan: It is an open-source data management system. It can store both spatial and non spatial data.
Recommendation: You can explore as many SDI platforms as you can. More you used, more you will know about the web-GIS structure.
Resources:
If you follow the above mentioned path, congratulations! you are already a web-GIS developer. But anyway the learning process will never end. As quote says "Never stop learning because life never stop teaching", we need to stay up to date with the latest tools and technologies. Here are the few things, which will definately helps in your carrier,
- Learn about the deployment of the web-GIS applications
- Learn about the GIS cloud native solutions
- Learn about the geoprocessing and geotool development
Resources:
- GeoDJango deployment guide (Youtube playlist)
- New open source GIS projects for Kubernetes applications (blog)
- Geoprocessing with python (book)
The list we have put together is absolutely non exhaustive. We all know the geospatial industry keeps growing on a daily, there are emerging technologies we didn't capture such as; Augmented Reality(AR) and Virtual Reality(VR), Spatiotemporal Asset Catalogue(STAC), Cloud Optimized Geotiffs(COGs), Google Earth Engine, Microsoft Planetary Computer and many more earth observation tools and technologies. The goal of the article was not to overwhelm you with trending technologies and we believe you'll learn about them as you make progress. Just get started first!
Finally, we hope you find this article helpful, if you do kindly share with your networks and should in case you have any questions, comments or suggestions, feel free to reach out on social media or shoot us an email! Happy learning!
-
Tek Kshetri is the research Associate at Geoinformatics Center, Asian Institute of Technology, Thailand. He is mainly working on web-GIS technology and spatial data analysis.
-
Emmanuel Jolaiya is a GIS developer with a really really really special interest in geospatial community development.
TODO
- Contributions guideline
- Deploy on GitHub pages
- Constant improvement
- Add more geospatial books to resources
- Update with suggestions from LinkedIn
