Josh Redmond

by Josh Redmond

Lesson

1. Introduction to Geospatial Web Apps

After this lesson, you will be able to:

  1. Describe how web apps work at a high level
  2. Understand why they are useful
  3. List some use-cases for geospatial web apps

If you've ever used Google Maps or Google Earth, you know that mapping applications are really useful in lots of different situations. They allow us to navigate, find somewhere to eat, and see the Earth changing over time. Working with spatial data allows researchers and data scientists to look even deeper, investigating and analysing how space and place affects the world.

Building geospatial web apps, which allow users to interact with and explore models and data are a powerful way of communicating results and analysis, both within organisations and to the public.

What is a web app?


The term 'Web application' is a bit vague, it can refer to things as diverse as ArcGis Online and Twitter (X). The important thing that makes web apps unique and useful compared to a more traditional website is interactivity, the user can use an interface to execute code and see the results of their inputs. In this course, we will cover building geospatial web apps, that is web apps which focus on spatial and mapping tools, using Python.

Geospatial and mapping web apps are powerful and popular ways to communicate the results of your research, and can allow the public to engage directly with your work. At their most basic level, they can let a user view and explore data you have generated, and at a more advanced level let users generate data themselves using models and tools you have developed. Much geospatial research is directly relevant to people's everyday lives, and is politically important, so letting people use and share your research can help it have impact outside of academia or industry. Mapping apps can be used to highlight sources of pollution, air and water quality, and explore exposure to natural hazards.

Within your organisation or workplace, building these kinds of apps can help you share information and tools quickly and easily. Geospatial apps can include dashboards which show supply chains, monitor crops, or explore footfall in retail locations.

There's lots of examples of web apps, but in the Geospatial context in particular, there's a few examples which can serve as inspiration. Google Maps used in a browser is probably the most famous example of a geospatial web app that almost everyone has used. Here are some examples of interesting scientific apps:

  1. The NOAA sea level rise app lets users explore different scenarios of sea level rise and see how it will affect their community
  2. The ESRI Coastal Eutrophication app lets users explore water quality in excusive economic areas
  3. Samir Sellars' land cover classification app, which lets users train a mini-machine learning classifier for land cover type (e.g. Crops, Built-up areas, etc.)

How do web apps work?


Even if you're experienced in programming with Python and other tools, there's a bit of a learning curve when you move to the web. In this course we won't cover html, css, javascript, or other web technologies in depth, but it is important to have a high level understanding of how web apps work, so you can design them better.

Diagram showing the layout of a generic application. A User is connected to the front end, which sends user input to the back end, which in turn sends data to the front end.

Diagram showing the layout of a generic application. A User is connected to the front end, which sends user input to the back end, which in turn sends data to the front end.

This diagram shows a really brief overview of how a web application might work. It is broadly separated into two parts, the front end and the back end which work together to create the app.

The Front-end is the part of the application that the user interacts with, it generally contains the interface the user can interact with, selecting parameters, and so on. It also displays the results of the user's input. In the geospatial context, this part of the application might contain a map, and controls for what to display on the map displayed to the user as a web page. In a web application, this is normally composed of a HTML page, styled by CSS, with interactivity added by Javascript. There are Python tools for generating these according to patterns which others have written that you can re-arrange and customise, so there's no need to learn new languages to build interactive applications.

The back end is the part of the application which handles all the data and sends it to the front-end to display. This can be as simple as a database which the front-end queries, or a complex application with many moving parts that uses multiple APIs and scientific models to generate data which is sent to the user.

The important thing to understand is that the front-end and back end of a web app operate according to a slightly different logic. In a normal python program for example you might expect an error to crash the program, but most web application front-ends are quite robust to small errors and problems. The tools you use for designing a front end and a back end are different from one another, and if you have not worked in web application development before some of these approaches may be new to you. We will cover these step by step in the later parts of this course, and in doing so you might learn how other web apps work, as well as learning how to design good apps yourself.

Conclusion


In this course, we will cover using the basics of using Python to create geospatial web apps and sharing them using free online platforms. So far we have covered some of the potential uses and benefits of geospatial web apps, and the basic structure of a web app. Hopefully the examples from earlier in this lesson have provided some inspiration, and have shown the power of these applications.

The web apps we build will use Jupyter Notebooks and ipywidgets to easily create interfaces which have access to powerful Python libraries and tools to analyse data. If you have used Python before for data science, you already have all the skills you need to start building apps. Over the rest of this course, we will learn how to build an application for interactively mapping and displaying natural hazard risks. You will build the different parts of the app in the Jupyter notebook, run it in your browser and learn how to share it with others.

In the next class, we will cover the basics of building interactivity using ipywidgets, and use widgets to generate and display data interactively.