Build a geospatial dashboard in Python using Greppo |... https://towardsdatascience.com/build-a-geospatial-da...

Open in app

Search

Get unlimited access to the best of Medium for less than $1/week. Become a member

Build a geospatial dashboard in Python using

Greppo
Lack of frontend, backend and web-dev experience can be limiting in making a
web-app in Python. Not anymore…

Adithya Krishnan · Follow

Published in Towards Data Science
7 min read · Feb 23, 2022

Listen Share More

A geospatial dashboard built using Greppo in Python. Image by Author.

Geospatial data analytics have become a common place in data science. Beyond
mapping and visualisations, it broadly consists of extracting knowledge by
detecting & recognising patterns, and building models for making predictions.

1 de 21 6/06/24, 18:12
Build a geospatial dashboard in Python using Greppo |... https://towardsdatascience.com/build-a-geospatial-da...

Python remains to be a standard among data science, and is no different for

geospatial data science. The communities backing projects like GeoPandas,
Shapely and Rasterio, have made Python a go-to for geospatial analytics.

As a data scientist, it is common to work with multiple stakeholders including

non-technical ones. The power to distill your research outcomes into a non-
technical narrative comes in very handy. It all comes down to communicating
how the outcomes could benefit the stakeholders. Creating a dashboard for your
Python script is an effective method of story telling. A dashboard also comes in
handy when you want to share your work to external stakeholders, limiting them
with only the interaction and visualisation, without sharing the internal
workings.

reppo: A quick and easy way to build geospatial dashboards.

G
Greppo
Greppo is an open-source Python framework for building geospatial web-apps. It
provides ready to use frontend and backend components as functions that act as
an API between the frontend interactive component and the bound backend
variable. To understand more about the mental-model refer to this page.

TL;DR: without much frontend, backend, web-dev experience you can build and
deploy a fully functional web-application with basic Python in under 5 minutes.

• GitHub repository: https://github.com/greppo-io/greppo

• Documentation: https://docs.greppo.io/

• Website: https://greppo.io/

In this tutorial we will be building a geospatial dashboard in Python using Greppo. We

will work through setting up the environment, installation, importing data, putting in

2 de 21 6/06/24, 18:12
Build a geospatial dashboard in Python using Greppo |... https://towardsdatascience.com/build-a-geospatial-da...

the components for our dashboard and serving it. You will be required to know the
basics of Python, GeoPandas and geospatial analytics.

Getting started…
The first thing to do is install Python and setup your Python environment. For
those who are new to this, check out this blog post to help you get started on
python environments. Once you are ready with that, let’s install our
dependencies.

pip install greppo geopandas

Download the dataset that you require for this tutorial. All the data and the code
for this tutorial can be found here in this GitHub repository: greppo-demo/vector-
demo (Data source: https://github.com/openpolis/geojson-italy)

Scripting the dashboard

We start with setting up the folder structure for the project. I will be using the
following project folder structure:

└── vector-demo
├── app.py
├── cities.geojson
├── regions.geojson
└── roads.geojson

Let’s create the Python script for the dashboard. The code for the app goes into
app.py.

Step 0: Serving the app

To run and serve the app, open a terminal and follow these instructions. First,
change directory ( cd ) into the project folder vector_demo . Once inside, activate
your Python environment where you have greppo installed. I am using pyenv
here in the example. To then run the app, all you need to do is run greppo serve

app.py command. The command serve , starts the server and compiles the code
inside the app.py , which can be renamed to any file. Note: Be sure to be inside

3 de 21 6/06/24, 18:12
Build a geospatial dashboard in Python using Greppo |... https://towardsdatascience.com/build-a-geospatial-da...

the project folder where the app.py is, or use a relative folder structure such as
greppo serve ./vector-demo/app.py .

Running and serving the app from the terminal. Image by Author.

You will then see the Uvicorn server running at a specified location. Copy and
paste the address in your browser. Which will then load the app. If you have made
any changes to the app.py , just save the changes and reload the web-app page.
Where you will see the updated changes to your app.

Step 1: Build the basic scaffolding for the app.

Which is to import the greppo package and to add the base_layer to the map.

1 from greppo import app

2
3 app.base_layer(
4 name="Open Street Map",
5 visible=True,
6 url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
7 subdomains=None,
8 attribution='(C) OpenStreetMap contributors',
9 )
10
11 app.base_layer(provider="CartoDB Positron")

greppo-base-layer.py hosted with ❤ by GitHub view raw

You need to first import app from greppo . This app object will serve as the
interface to to your application frontend and provide the API for 2 way

4 de 21 6/06/24, 18:12
Build a geospatial dashboard in Python using Greppo |... https://towardsdatascience.com/build-a-geospatial-da...

communication between the front and the back-end.

Result from Step 1. Using the controls marked in red to toggle. Image by Author.

To add a base_layer to your application map, just use the app API method
app.base_layer() with the required arguments. Refer to the documentation for
what is required and what is optional. The base_layer method provides two ways
to specify the base tile layer. One is to use the name and url attributes. The other
method is to use the name of a provider . Greppo uses xyzservices under the hood
for this. For a list of the provider names, check out this list here. Note: The prover
name should be complete with its type/variety as in CartoDB Positron or
OpenStreetMap Mapnik .

Step 2: Import the dataset and display it as an overlay.

Using geopandas we can import the vector dataset as a GeoDataFrame . This can
then be visualised on a map on the web-application using the app.vector_layer()

method.

Here I am importing three different datasets one each having polygons

(boundaries of the different regions of Italy), lines (major highways in Italy) and
points (major cities of Italy).

5 de 21 6/06/24, 18:12
Build a geospatial dashboard in Python using Greppo |... https://towardsdatascience.com/build-a-geospatial-da...

1 import geopandas as gpd

2 from greppo import app
3
4 regions = gpd.read_file("./regions.geojson")
5 roads = gpd.read_file("./roads.geojson")
6 cities = gpd.read_file("./cities.geojson")
7
8 app.vector_layer(
9 data = regions,
10 name = "Regions of Italy",
11 description = "Polygons showing the boundaries of regions of Italy.",
12 style = {"fillColor": "#4daf4a"},
13 )
14
15 app.vector_layer(
16 data = roads,
17 name = "Highways in Italy",
18 description = "Lines showing the major highways in Italy.",
19 style = {"color": "#377eb8"},
20 )
21
22 app.vector_layer(
23 data = cities,
24 name = "Cities of Italy",
25 description = "Points showing the cities in Italy.",
26 style = {"color": "#e41a1c"},
27 visible = True,
28 )

Using the method app.vector_layer() as an API to the frontend we can display the
vector data. You are required to pass in the name and the other parameters are
optional. Although, passing in the color or fillColor to the style is a good
practise to differentiate and identify each layer. Since the frontend is based on
Leaflet, all the styling is accordance to the leaflet’s specification and can be found
in the documentation.

6 de 21 6/06/24, 18:12
Build a geospatial dashboard in Python using Greppo |... https://towardsdatascience.com/build-a-geospatial-da...

Result from Step 2. Using the controls marked in red to toggle.

You can find all the information of the vector_layer and the styling here. Note:
You could also make a Choropleth map. Documentation of which can be found
here.

Step 3: Displaying in-app text, app-title and app-description

For the web-application to be useful, it needs to carry some text to provide some
guidance and context to its users. These could be displayed on the sidebar next to
the components. Using the method app.display() markdown text can be
displayed on the web-app. Using the same method, the title and description of
the app can be set.

7 de 21 6/06/24, 18:12
Build a geospatial dashboard in Python using Greppo |... https://towardsdatascience.com/build-a-geospatial-da...

The app.display() takes in two arguments name and value . While value caries
the text to be displayed, name has to be unique and carries the identifier to the
text. If name=’title’ the value passed is the title of the app and if
name=’description’ the value passed is the description of the app. Without any of
the two, the app carries its default title and description. It is encouraged to set the
title and description of the app.

8 de 21 6/06/24, 18:12
Build a geospatial dashboard in Python using Greppo |... https://towardsdatascience.com/build-a-geospatial-da...

Result from Step 3. Using the controls marked in red to toggle. Image by Author.

Step 4: Displaying data as a chart

A data app is hardly without display of data as a chart. Greppo also lets you
display data as charts. Information of the charts and their usage can be found in
the documentation. Here, as an example a bar-chart is presented,
app.bar_chart() .

9 de 21 6/06/24, 18:12
Build a geospatial dashboard in Python using Greppo |... https://towardsdatascience.com/build-a-geospatial-da...

The required arguments for the charts are the name , x and y values. A
description and a color could be added to give the app user a better context. The
name and description are displayed along with the chart.

10 de 21 6/06/24, 18:12
Build a geospatial dashboard in Python using Greppo |... https://towardsdatascience.com/build-a-geospatial-da...

Result from Step 4. With the data, display features, charts and control. Image by Author.

Conclusion
Let’s take complete run through what we’ve done here. Our goal was to create a
geospatial web-app using Greppo, to display some GIS vector data, and add
components to give the user of the app a better context. Here is the complete
code for the app:

11 de 21 6/06/24, 18:12
Build a geospatial dashboard in Python using Greppo |... https://towardsdatascience.com/build-a-geospatial-da...

And here the output of the app:

12 de 21 6/06/24, 18:12
Build a geospatial dashboard in Python using Greppo |... https://towardsdatascience.com/build-a-geospatial-da...

The final result. Image by Author.

So, there we have it. A complete web-app built using Greppo, in under 5 mins.

All the files for this demo can be found here: https://github.com/greppo-io/
greppo-demo/tree/main/vector-demo

Check out the GitHub repository: here to be updated on the latest on Greppo. In case
of bugs, issues or feature requests for your use-case reach out on the Discord channel or
open an issue on GitHub. Built something with Greppo? Post it GitHub.

GIS Geospatial Web Applications Web App Development Editors Pick

Follow

13 de 21 6/06/24, 18:12