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.
Why This Open Source Web-GIS Guide?
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.
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!
Web GIS Learning Guide
Below is a flowchart that summarizes the whole learning guide to become a Web GIS developer.
1. Start with GIS and a GIS Software
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.
2. Then Pickup HTML and CSS
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.
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)
4. Learn about mapping libraries and other required utilities
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;
- 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
- Leaflet from basic to advance (youtube playlist)
- Leaflet tutorials
- Open layer tutorials
- Qgis2Web tutorial
- Read from the official website of the required library
5. Now It’s time to start working with map servers
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.
- GeoTool : The open-source java GIS toolkit.
- 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.
- GeoServer and Leaflet Web-GIS (Youtube Playlist)
- GeoServer documentation (Recommended)
- GeoNetwork documentation
- OGC standards
6. Learn about databases and backend
For the web-mapping things and simple applications, up to 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.
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.
- 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
7. Learn a frontend frameworks (Additional)
- 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.
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 Catalogs (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!
About the Authors
- 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.