Web GIS Development starter Guide

Every day more and more businesses are now relying on location-related data to improve their operations and increase their profits, data such as customer’s location, location of goods, tracking the shipment, etc. are now an integral part of many business logics. Unfortunately, there are very less structured courses that will teach you in-depth programming and GIS at the same time. That’s what makes it challenging as well as reward paying at the same time 🤑

If you are confused about whether GIS development is for you, what are the myths, reality, etc. check out my video

At this point, I’m assuming you really are interested to get started with web GIS development.

The entire journey to web GIS development can be understood in 4 parts

Development Paths —

Web GIS Development can be divided into two major streams

Enterprise Development —

This path usually uses software, libraries, packages, which are often needed to be bought to use. Companies such as Google Maps, ESRI, HERE Maps, etc. have enterprise-level data and APIs created. But in order to use them, we need to buy either subscription, make a one-time payment, etc.

Pros — These libraries are created by dedicated developers, thus such libraries are pretty stable and well documented. Usually, the support team is also available if needed. These libraries are secured and scalable, making them an obvious choice for big companies.
Cons — The downside of using such libraries is that it costs much, especially if you are a startup or small company trying to use maps, this cost can be significantly high compared to other costs. Apart from it, we are always dependent on the companies to release the new features, since the source code is not shared.

Open Source Development —

This path is community-built, thanks to the legendary and generous developers and companies, we are living in a world full of open source applications. Many famous frameworks, libraries that we use every day like ReactJS, PostgreSQL, Apache Kafka , etc. are open source. That means you can build your $$$ startup using these technologies and you don’t have to pay to use them. Such libraries, packages, software also exist in the GIS realm.

Pros — These are (Depending upon license) are freely available to use, change the source code according to the need for any commercial, non-commercial application. The greatest upside here is obviously that it is completely free, you can modify it to make it your own product and sell it.
Cons — Since these are community-based, there is no dedicated support, although a lot of the groups on slack, gitter, email lists are available, still there is no guarantee for support. Usually, to build such products, developers use existing open-source products, thus when it comes to newer version releases it becomes complicated to make sure that everything works hunky-dory.

Which one should you learn?

Well, It doesn’t depend on you kiddo! If you got a client who has licenses for any enterprise company, they will ask you to work on it, if your client is someone who has this idea for their startup and looking to integrate a basic map, they'll obviously prefer something free.

So how to decide?

The trick here is you don’t! We need to remember that GIS development is at the end of the day Web development, thus if your basic concepts of web development are clear you can jump from open source to enterprise to again open source.
In this blog, we’ll see all 3 things, basic stack, enterprise solutions, open-source solutions.

Basic web stack —

GIS development is a subset of Web Development which means in order to be a GIS developer you’ll need to be a web developer first

Every developer who is interested in front-end work (the one where we see all the magic on the front end, maps, UI, forms, etc.) should start by understanding the basics of HTML, CSS, JavaScript. I see a lot of young lads jumping into React, Angular just because it is trending 🔥, but understanding the basics of HTML, CSS, JavaScript, jQuery, Bootstrap is very very important. This will enable you to start thinking like a developer. Believe me! Once you get a good handle on HTML, CSS, JavaScript, you will start enjoying coding.

Some of the free resources to learn these things are

• HTML

• CSS

• JavaScript

• Bootstrap

• jQuery

Doing these 5 courses along with coding will give you the best possible start for the web development journey. Feel free to explore more videos about these topics if it interests you. At this point, you should be able to create your own small projects like

1. Portfolio website
2. Basic Tools (Unit conversion, Calculator, etc.)

It is important to flex the work from time to time, no matter how simple it is, for this use GitHub

People hiring software engineers make background checks apart from just scrolling through resumes and CVs. Having an active GitHub profile will always work in your favor.

Front end Framework —

By the time you finish the Basic stack, you’ll either find front-end work very interesting or maybe not your cup of tea, maybe you will feel like CSS is not your thing, you want to work with databases, logics, etc. (Like me 🙉).
But if you enjoyed working with front end framework you can decide to take your front end knowledge to the next level

You should visit this only after finishing Basic web stack

You can learn more about Nodejs, explore what is React, Vue, Angular, etc. All these frameworks are an entire universe within themselves, and it might become too overwhelming by just jumping on it before having confidence in the basic web stack. If you are dead set on learning more about front end framework start with

• JavaScript ES6

• Node js

from here you can explore the Different frameworks, the most famous ones are

• React

• Angular

• Vue 3

Notice that it is impossible to learn these frameworks in a couple of hours, there are tons of small components that you’ll need to learn inside each framework. Thus I always recommend that you should start and master one framework before jumping to another

Back end languages —

Every website has 2 parts, the Front end (which we saw above) which is responsible to make a fast, responsive, UI-friendly website and the Second is Back-end, which usually works as a communicator between Front-End and Databases. As a back-end developer, your work is

• Creating and maintaining APIs
• Fetching/Posting Data from Database ◀️ ▶️ Front end UI
• Securing the data

As of 2021, the world needs more than just front-end and back-end engineers to maintain a site, but as a newbie, I don’t want to confuse you and scare you 👻. So we’ll stick with these two terms only.
There are a lot of back-end languages that you can learn. Personally as a GIS developer, I’m slightly biased toward Python, since there are so many packages that are written in Python, specifically for Geospatial analysis, You can also explore other languages such as R, PHP, etc.

• Python

• R

• PHP

Back end Framework —

Backend languages also have frameworks that make the life of developers easy. Usually, these frameworks are quite stable, scalable, and secured, making developers focus on business logic rather than reinventing the wheel.

If you work with Python you can learn frameworks like Django, Flask API, Fast API, etc.

If you work with PHP, you can learn Laravel, codeIgnitor, etc.

Databases —

Databases are a key part of the web development stack as this is where all the data is stored. Choosing which database to use depends upon the application and business logic, for web GIS, PostgreSQL becomes an excellent choice as it is the world's most advanced open source Relational database.

Check out quickly about what is the database

Once you know what is a database, have a look at this video to understand two major types of databases

once you understand this, you can learn about different databases here

• PostgreSQL

• MySQL

• MongoDB

By the time you’ll finish this, you will be confident to present yourself as a web developer. Now is the time to Conquer the GIS world.

Are you ready sparta!!

As I mentioned above, GIS development roughly can be divided into Enterprise development or Open source development. Even though both will use the same basic web development logic under the hood, but libraries will be different. Let us explore the Enterprise first.

Enterprise Development —

There are literally 1000s of products worth exploring, this blog is just scratching the surface to enable you to think and explore those

Software —

Oftentimes software provides an easier and friendly way to do things, software such as ArcMap, ArcGIS Pro, etc. are more than capable of just doing basic digitization, analysis.

Explore different software such as

• ArcMap

Get Started with ArcMap | Esri Training Tutorial

• ArcGIS Pro

ArcGIS Pro Basics | Esri Training Web Course

• Global Mapper

Front end Mapping libraries —

Once you understand basic front end such as JavaScript, jQuery, Node js, etc, you can learn these libraries to start working with geospatial data

• Google MAPS API

You can also follow this documentation

Google Maps Platform Documentation | Google Developers

• ArcGIS JS API

ArcGIS API for JavaScript Fundamentals | Learning Plan

• Mapbox

In Mapbox, you can learn how to use their JavaScript library Mapbox GL JS

You can also learn how to use Mapbox Studio

Back end Mapping libraries —

These are the tools, scripts, platforms developed by enterprise companies to do geospatial analysis, data access, etc. using these we can process the data and use it in the front-end application mostly but not always using their company's front-end libraries. Even though some of the products here are free to use, we certainly require an API key, thus. is is not completely open-source

• ArcGIS Python API

ArcGIS API for Python: Getting to Know Pandas and the Spatial Enabled DataFrame | Esri Training…

• Google earth engine

Open Source Development —

These technologies are completely free to use or alter the source code for any commercial, non-commercial purpose

software —

Just like enterprise, we also have fully quipped softwares which are free to download and use.

One of the most widely used software is QGIS

Front end Mapping libraries —

Once you learn the basics of front end programming, you can pick up these libraries to work in GIS

• Openlayers

Index

• leafletjs

Documentation - Leaflet - a JavaScript library for interactive maps

• Cesium

• Turf JS

Back end Mapping libraries —

There are tons of great packages, libraries available for scripting, automation work in the open-source world

Python Provides various packages such as Geopandas, Rasterio, Shapely, Fiona, etc.

• Geospatial analysis packages

• Geodjango

• GDAL

Other tools —

There are several other tools that you can also learn as a web GIS developer

• PostGIS

PostGIS 3.1.5dev Manual

• Geoserver

GeoServer User Manual - GeoServer 2.20.x User Manual

• Geonode

Understanding these technologies will enable you to work with web GIS projects and explore more complex GIS technologies.

About me

Hi, I’m Krishna Lodha, I’m a full-stack Web GIS developer. I’m really enthusiastic about the power of locations and what story it tells us. Read more about me at https://krishnaglodha.com, to get more information about this code or suggest a better way to do it. ping me on LinkedIn 💼 , Twitter 🐦 , and Youtube📺

Adios!