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. 

In this course, we will cover the basics of using Python to create geospatial web apps and sharing them using free online platforms. 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 interactive 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. 

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. 

Josh Redmond

<Callout type="success">

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

</Callout>

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](https://coast.noaa.gov/slr/) lets users explore different scenarios of sea level rise and see how it will affect their community
2. [The ESRI Coastal Eutrophication app](https://geoxc-apps4.bd.esri.com/coastal-eutrophication) lets users explore water quality in excusive economic areas 
3. [Samir Sellars' land cover classification app](https://samirsellars.users.earthengine.app/view/classificationapp), 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. ](https://hackmd.io/_uploads/HJWH2YRM6.png)

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. 

Introduction to Geospatial Web Apps

<Callout type="success">

After this lesson, you will be able to:
1. Set up a Python environment to complete the rest of the course and create a web app
2. Understand how to create Python environments in Anaconda and customise them for specific uses

</Callout>


In this course, we will take a guided project-based approacht to build a web-app which models urban heat in Leeds, and lets users explore future scenarios. I have already curated and set up all the data, functions, and code needed to handle the modelling of heat and creating results. This course will teach you how to take those functions, code, and models, and turn them into an app which lets uers interact with parameters and explore results. 

In this lesson, we will set up our Python environment so that we can use all the tools and functions necessary for the rest of the project. 

If you have already set up an environment using conda, venv, or other tools then you can skip this section. 

If not, we are going to create a Python environment to do our work in. Environments have several advantages over simply working with a single Python installation. 

First, if you need to, navigate to and download the Anaconda installer, [available here](https://www.anaconda.com/download). 

![Screenshot of the Anaconda Distribution download page showing bullet pointed features of the software and two buttons in a horizontal row at the bottom labelled 'Code in the Cloud' and 'Download' respectively.](https://hackmd.io/_uploads/SkSzCKGHT.png)


Click the 'Download' button on the web page and select the correct version for your operating system. 

Install Anaconda. Once this process is completed, create a new environment for this course, call it something like "geospatialWebApps" or whatever you like. 

Then, download the data for the course - it will contain a file called requirements.txt. Unzip the folder and place it somewhere convenient as it contains necessary data and code for the course. 

In anaconda navigator, open a terminal in your geospatialWebApps environment, and run the following:

```
cd path/to/your/data/folder
pip install -r requirements.txt
```

Once this is complete - your environment is ready, and you can begin with the next lesson. 

Setting up

<Callout type="success">

After this lesson, you will be able to:
1. Use widgets to create visual tools that allow users to set parameters for functions.
2. Dynamically run code according to user input.
3. Display the results of this code, and update these results automatically.

</Callout>


In this lesson, you will explore how to load in data and interact with it visually using widgets in a notebook format. These widgets will form the basis of the apps that you will create in this class. Widgets are a powerful tool and can be used for a wide range of different tasks, and can even be customised with javascript if you so desire.

Before we create maps and geospatial models like we discussed in the introductory lesson, it is important to understand how the basics of interaction work in Jupyter Notebooks, and how you can use widgets to 

Firstly, you need to open a Jupyter Notebook. If you are using Anaconda, and have installed all of the required files, then simply open Anaconda Navigator, activate your environment, and then launch Jupyter Notebook. 

First, we'll load in some data. This lesson will provide all of the code you need to load in and manage data, so you can focus on building interactive interfaces rather than data management! 

Each of these code-blocks can go into a separte cell in your Jupyter Notebook. 

```python
## We will start with some generated dummy data to learn the basics 
## of interactive visualisation

#from utils.functions import *
import numpy as np
import matplotlib.pyplot as plt


x = np.random.normal(5, 2, 100)
def generate_y(x, m, c):
    return m*x + c

y = generate_y(x, 2, 3)

plt.scatter(x, y)
```

In the above cell we have generated some data and plotted it - the Y part of the data is generated according to parameters set by the user. If you imagine this to be a model of some phenomena, then varying the input parameters lets a user or researcher explore what different scenarios might mean and how they affect outcomes important to them. 

We are now going to see how we can add a visual tool which lets a user change the parameters of the function. 

```python
import ipywidgets as widgets

m_slider = widgets.IntSlider(
    value=2,
    min=0,
    max=10,
    step=1,
    description='M:')

c_slider = widgets.IntSlider(
    value=3,
    min=0,
    max=10,
    step=1,
    description='C:')

display(m_slider)
display(c_slider)

```

The above code creates two integer sliders which let the user select parameter values between limits that we have defined. This lets them visually select the values and interact with them. The sliders run on the web page rendered by your Jupyter Notebook, and you can interact with them in the same way you might use a form or slider on any other web app. 

Within Python, it is easy to then extract the values from the widgets by using the .value property, as below.

```python
print("M:", m_slider.value)
print("C", c_slider.value)
y = generate_y(x, m_slider.value, c_slider.value)
plt.scatter(x, y)
```

Updating the chart with user input is easy, but it doesn't happen automatically when the user updates a parameter, we can change this by using observers. Observers are an important concept in web-development generally, but in this case what you need to know is that they allow you to set a function which is called when the state of a widget changes. By using observers, we can run code to improve the interactive experience, and allow apps to respond to their users in real time.

Below, we will create two observers for the sliders which are called every time their value is changed, updating the chart. We will also use an 'output' widget which allows us to dynamically update the display of the data. Output widgets dont do anything by themselves, but are containers for displaying data to the user which can be updated easily to dynamically show new information to the user.  

```python
%matplotlib inline

plot_display = widgets.Output()
with plot_display:
    y = generate_y(x, 2, 3)
    fig, ax = plt.subplots()
    chart = ax.scatter(x, y)
    plt.show()

m_slider = widgets.IntSlider(
    value=2,
    min=0,
    max=10,
    step=1,
    description='M:')

c_slider = widgets.IntSlider(
    value=3,
    min=0,
    max=10,
    step=1,
    description='C:')



def update_chart(change):
    y = generate_y(x, m_slider.value, c_slider.value)
    plot_display.clear_output(wait=True)
    with plot_display:
        fig, ax = plt.subplots()
        chart = ax.scatter(x, y)
        plt.show()


m_slider.observe(update_chart, names='value')
c_slider.observe(update_chart, names='value')

display(plot_display)
display(m_slider)
display(c_slider)
```

There's a load of different ways to handle this kind of interaction, including using buttons and listening for mouseclicks. Depending on what the goals are of the application, and what computation you are doing, you might use a different approach. If you are generating data in a computationally intensive way, you might not want to re-run all your code every time the user updates something, instead using a button to start that process. 

Now, it is your turn, in the following exercises, you will create some basic interactive tools and use them to generate and visualise data. Answers will be below, so if you get stuck feel free to take a look. 

### Exercise 1
Re-write the generation function so the data is exponential (x^m + c) rather than linear and plot the data

### Exercise 2
Vary visualisation parameters with a dropdown menu so users can select between the linear and exponential functions 

```python
# Hint: Use the widgets.Dropdown() function
# Dropdown menus work in basically the same way as the sliders, but with categorical options which you specify by hand
# The goal is to create a dropdown which will allow the user to change from linear to exponential

example_dropdown = widgets.Dropdown(options=['Item 1', 'Item 2'])
display(example_dropdown)

```

### Exercise 3
Add a button to reset the visualisation to some default parameters

```python
# Hint: Use the widgets.Button() function
# Buttons are widgets which you can click to trigger an action
# You can specify the action by passing a function to the button's on_click() method

out = widgets.Output()
example_button = widgets.Button(description='Test')
def print_button(b):
    with out:
        print("Button clicked!")
        
example_button.on_click(print_button)
display(example_button)
display(out)
```

### Exercise 1 Solution

```python
def generate_y_exp(x, m=2, c=3):
    return x**m + c
```


### Exercise 2 Solution

```python
# Exercise 2 solution

modal_dropdown = widgets.Dropdown(options=['Linear', 'Exponential'])

plot_display = widgets.Output()
with plot_display:
    y = generate_y(x, 2, 3)
    fig, ax = plt.subplots()
    chart = ax.scatter(x, y)
    plt.show()

m_slider = widgets.IntSlider(
    value=2,
    min=0,
    max=10,
    step=1,
    description='M:')

c_slider = widgets.IntSlider(
    value=3,
    min=0,
    max=10,
    step=1,
    description='C:')



def update_chart(change):
    if modal_dropdown.value == 'Linear':
        y = generate_y(x, m_slider.value, c_slider.value)
    else:
        y = generate_y_exp(x, m_slider.value, c_slider.value)
    plot_display.clear_output(wait=True)
    with plot_display:
        fig, ax = plt.subplots()
        chart = ax.scatter(x, y)
        plt.show()

modal_dropdown.observe(update_chart, names='value')
c_slider.observe(update_chart, names='value')
m_slider.observe(update_chart, names='value')


display(plot_display)
display(m_slider)
display(c_slider)
display(modal_dropdown)
```


### Exercise 3 Solution

```python
def reset(b):
    m_slider.value = 2
    c_slider.value = 3
    
reset_button = widgets.Button(description='Reset')
reset_button.on_click(reset)
display(reset_button)
```

Basics of interaction


<Callout type="success">

After this lesson, you will be able to:
1. Describe how layout widgets can be used to create interfaces
2. Arrange widgets together using layout widgets
3. Nest layout widgets together to create groups of display or input widgets

</Callout>


In the previous lesson, you created some visualisations and some widgets which could control them, but it didn't look that amazing. The layout of the buttons, widgets, sliders, and other elements your design can affect usability, readability, and the experience of those using the app. Luckily, ipywidgets makes it pretty easy to design layouts. 

Lets start by re-creating the application we built last time:

```python
#First, we'll load the data and functions from the last lesson. 

import numpy as np
import matplotlib.pyplot as plt
import ipywidgets as widgets
plot_display = widgets.Output()

m_slider = widgets.IntSlider(
    value=2,
    min=0,
    max=10,
    step=1,
    description='M:')

c_slider = widgets.IntSlider(
    value=3,
    min=0,
    max=10,
    step=1,
    description='C:')


x = np.random.normal(5, 2, 100)
def generate_y(x, m, c):
    return m*x + c

def update_chart(change):
    y = generate_y(x, m_slider.value, c_slider.value)
    plot_display.clear_output(wait=True)
    with plot_display:
        fig, ax = plt.subplots()
        chart = ax.scatter(x, y)
        plt.show()
```

We will now draw all of the widgets in sequence, as they were before:

```python
with plot_display:
    y = generate_y(x, 2, 3)
    fig, ax = plt.subplots()
    chart = ax.scatter(x, y)
    plt.show()


def update_chart(change):
    y = generate_y(x, m_slider.value, c_slider.value)
    plot_display.clear_output(wait=True)
    with plot_display:
        fig, ax = plt.subplots()
        chart = ax.scatter(x, y)
        plt.show()

display(plot_display)
display(m_slider)
display(c_slider)

m_slider.observe(update_chart, 'value')
c_slider.observe(update_chart, 'value')
```

This kind of layout works for very simple functionality, where there aren't many choice to make or a lot of things to do, but when you have multiple controls and options to select, it might make sense to group them together in order to make interacting with them a bit more intuitive and less confusing. 

Luckily there are a good number of ipywidgets which allow you to control the layouts of other widgets. For instance, by using box widgets it is possible to put different widgets and displays together in order to create cohesive and pleasing interfaces. Because these are all python objects, you simply have to put them together in lists and structures as per your preference. These boxes are known as containers, and can contain widgets, visualisations, or other containers.

Using these containers, it is possible and relatively easy to construct user interfaces based on the relative position of your widgets, containers, and visualisations. By nesting containers within other containers, you can create button or control groups on the page, panels with sub-sections, and so on. This is similar to how many websites construct their user interfaces, with nested divs and containers. 

Lets see an example with our widgets.

```python
widget_container = widgets.HBox([m_slider, c_slider])
display(widget_container)
```

Similarly, we can use the VBox widget to display the widgets vertically:

```python
widget_container = widgets.VBox([m_slider, c_slider])
display(widget_container)
```


Notice how putting these widgets in the container doesn't affect their output or relationship to the rest of the widgets and visualisations, they still interact with the charts and callbacks you have defined. 

Thinking back to the last lesson where we covered some basics of UI/Ux design, you might be able to see how using  a series of containers can allow you to build interfaces up from relatively simple parts to more cohesive experiences for the user. 

There are a large number of different layout widgets that you can use, which are available in detail on the ipywidgets [library documentation](https://ipywidgets.readthedocs.io/en/stable/examples/Widget%20List.html#container-layout-widgets). 

The best way to get experience with designing layouts is to have a go yourself, so I have included some exercises and solutions below. Feel free to get creative and try some alternative approaches to learn how the layout widgets work, and how they can be used to create quite complex interfaces. 


### Exercise 1
Create a layout with the chart on top, the sliders below on the left, and the dropdown menu on the right.  


### Exercise 2
Create a layout with two charts, one showing each of the two results from the dropdown menu (e.g. linear and exponential) on top, and
#the sliders below on the left. Do not show the dropdown menu.


### Exercise 1 Solution
```python
modal_dropdown = widgets.Dropdown(options=['Linear', 'Exponential'])
widget_container_v = widgets.VBox([m_slider, c_slider])
options_container = widgets.HBox([widget_container_v, modal_dropdown])

ui_container = widgets.VBox([plot_display, options_container])
display(ui_container)
```

### Exercise 2 Solution
```python
def generate_y(x, m, c):
    return m*x + c


def generate_y_exp(x, m, c):
    return x**m + c


m_slider = widgets.IntSlider(
    value=2,
    min=0,
    max=10,
    step=1,
    description='M:')

c_slider = widgets.IntSlider(
    value=3,
    min=0,
    max=10,
    step=1,
    description='C:')
widget_container = widgets.HBox([m_slider, c_slider])


exp_plot_display = widgets.Output()
lin_plot_display = widgets.Output()

with exp_plot_display:
    y = generate_y_exp(x, 2, 3)
    e_fig, e_ax = plt.subplots(figsize=(3, 3))
    exp_chart = e_ax.scatter(x, y)
    plt.show()

with lin_plot_display:
    y = generate_y(x, 2, 3)
    l_fig, l_ax = plt.subplots(figsize=(3, 3))
    lin_chart = l_ax.scatter(x, y)
    plt.show()

def update_chart_new(change):

    exp_plot_display.clear_output(wait=True)

    with exp_plot_display:
        y = generate_y_exp(x, m_slider.value, c_slider.value)
        e_fig, e_ax = plt.subplots(figsize=(3, 3))
        exp_chart = e_ax.scatter(x, y)
        plt.show()

    lin_plot_display.clear_output(wait=True)
    with lin_plot_display:
        y = generate_y(x, m_slider.value, c_slider.value)
        l_fig, l_ax = plt.subplots(figsize=(3, 3))
        lin_chart = l_ax.scatter(x, y)
        plt.show()



c_slider.observe(update_chart_new, 'value') 
m_slider.observe(update_chart_new, 'value')


charts_container = widgets.HBox([exp_plot_display, lin_plot_display])
two_charts_layout = widgets.VBox([charts_container, widget_container])
display(two_charts_layout)

```


Layouts and widgets

User interface and user experience design are incredibly important and very complicated topics, understanding how your users are likely to interact with your application and empathising with their concerns, objectives, and desires allows you to put yourself in their shoes and make more effective applications. In the previous lesson, you learned how to compose a number of widgets together into an interface by using containers, and by doing this you have access to a powerful set of features for creating diverse and interesting interfaces. However, the first thing you should do is design what this interface looks like in an intentional way, rather than simply putting a few widgets together in a way that looks OK. 

There are a number of tools and methods you can use for designing interfaces, and this will not be an exhaustive or detailed list, but will provide a few ideas on where to get started. 

As a first step, it is important to consider your audience, and their objectives, in particular - what makes them distinct from other groups of people? What are their specific requirements and blockers that mean they would want to use a visual app like the one you are making?

When you are presenting information it is important to consider the following:
1. What information needs to be shown? Do they need to see every chart and graph possible?
2. What options do they need? Do they need to tune every aspect of the results or just one or two parameters?
3. Why would someone want to use your application? What data are they interested in visualising and analysing, and how does that relate to their goals?

One important step, if you are able, is to sit down with someone from the target audience and work through either the analysis you are doing, the application you are developing, or even just the general topic you are working on. Through speaking to them, and listening to what questions they ask, and what they ask for, you will be much better able to develop useful tools. 

Beyond that, it is really helpful to get feedback and opinions from others on your app as soon as possible. This will allow you to understand how your design is communicating information, and what decisions you have made which either help or hinder your goals. 

When actually planning your application, it might be useful to draw out a design on pen and paper, or use tools like Figma to build prototype interfaces which then inform how you build up your application. Whilst at first it might seem like it is difficult to translate your ideas into an application, you will over time learn the skills necessary to do so. 

To learn more about UI and Ux design, there is no shortage of inspiration and resources available to you online, I will link a few below, but the best thing to do is to look at applications you enjoy using and analyse them for their strengths and weaknesses, which you can then use to inform your own design and practices. 

Because we are working on geospatial apps, I suggest beginning with Google Maps. Have a look at it in your browser and on your phone, and think about how information is displayed, what happens when you tap or click on a point of interest, and so on. Explore how many clicks it takes to get to relevant information, and how complex the path it, or think about who the target audience is and how that has affected the design of the app. 

In the next lesson, we will start to work on some actual maps! 


### Links to UI/Ux Resources
1. https://uigoodies.com
2. https://www.designcouncil.org.uk/our-resources/framework-for-innovation/
3. https://intellipaat.com/blog/ui-ux-design-tutorial/


UI/UX for beginners

<Callout type="success">

After this lesson, you will be able to:
1. Create leaflet maps and interact with them
2. Load and interact with geospatial vector data
3. Add vector data to an interactive leaflet map

</Callout>

We have worked with matplotlib and widgets, and now its time to do some mapping! Using the excellent [ipyleaflet](https://ipyleaflet.readthedocs.io) we are going to build a basic web map, at first we will just display some data, but we will build up to allowing interaction using the skills you have practiced before. A number of the same ideas, like observers and accessing the attributes of different parts of the map, are important concepts for using ipyleaflet. 

In a new Jupyter Notebook, lets start by creating a map. The code below will create a map and add a marker to the map that the user can drag around - try for yourself:

```python
#First, lets create a map and marker:
import ipyleaflet
from ipyleaflet import Map, Marker, ImageOverlay

center = (53.8008, -1.5491)

m = Map(center=center, zoom=10)

marker = Marker(location=center, draggable=True)
m.add_layer(marker)

display(m)

```

And there we have it - a map! One of the interesting things about ipyleaflet is that it uses the same widget based approach we have seen earlier, so all the interactable objects and markers can be set up with observers, callbacks, and so on. This lets you build a lot of functionality from a user's point of view, and can let you create quite advanced features. For example, loading in new data depending on the map's view extent, allowing interaction with objects drawn to the map by clicking on them, and so on. 

[Ipyleaflet](https://ipyleaflet.readthedocs.io/en/latest/) is a Python wrapper for the JavaScript library [Leaflet](https://leafletjs.com). Leaflet is a really popular web-mapping tool, which powers lots of interesting websites and apps. You can see some examples [here](https://github.com/tomickigrzegorz/leaflet-examples). 

Working interactively with ipyleaflet is a bit different to matplotlib. Where Matplotlib is essentially static, creating images which can be updated, ipyleaflet creates widgets to dispay an interactive map. This means that you don't need to worry so much about resetting and updating the data it displays, you can simply add and remove things from the map, and the map will update automatically. Maps also work with observers and some of the other features we've worked with earlier. Below we are going to use a button to update the data on the map:

```python
import ipywidgets as widgets

reset_button = widgets.Button(description="Reset Marker")

def reset_marker(button):
    marker.location = center
    m.center = center

reset_button.on_click(reset_marker)
display(reset_button)
```

Ok great- you have created a map and you can add and remove features. Think back to the earlier lessons where we built interactive features using Matplotlib; you can use the same ideas here, but with geographic data, to alter how it is displayed and to change the data itself. 

Using geopandas, we can easily load and work with geospatial vector data in a number of formats. You might be familiar with kml, shapefiles, or other file types; in this case we will be working with geojson files. Geopandas can work with a wide variety of different file types very easily, and lets you interact with this data like its a pandas dataframe. This makes things very easy, and you can add these dataframes straight to your map using ipyleaflet's geodata functions. We're going to load in some census data from Leeds, which contains the geometries of the census output areas, along with data about the population. This data is in the geojson format.

```python
from ipyleaflet import GeoData
import geopandas as gpd

vector_data = gpd.read_file('leeds_census.geojson')
vector_layer = GeoData(geo_dataframe = vector_data)
m.add_layer(vector_layer)
m
```

Much in the same way we can add and update data to our matplotlib charts from earlier, we can do the same with these maps. For example:

```python
change_colour_button = widgets.Button(description="Change Map Colour")

def change_colour(button):
    vector_layer.style = {'color': 'black', 'fillColor': 'blue'}
    
    
change_colour_button.on_click(change_colour)
display(change_colour_button)
```

You can also vary the display of the vectors on the map depending on their attributes. Lets take a closer look at that geodataframe we have created:

```python
vector_data.head()
```

You can see that a geodataframe, much like a standard pandas dataframe, contains columns and rows of data, with an extra column containing the geometry or spatial information for each feature. This means that its really easy to add new data to the frame, in the exact same way that you might do so with a pandas dataframe. 

```python
vector_data['population times ten'] = vector_data['Population'] * 10 
```

Similarly - you can save and update the file that you have been working with very easily, with the slightly added complexity of having to designate which format you want to use as there are a large number of different options for geospatial data. We'll save it here again as a geojson. 

```python
vector_data.to_file("leeds_census_update.geojson", driver="GeoJSON")
```

When you are plotting vector data, the chances are that you want to display some kind of quantitative or qualitative information, not just the geometries. In ipyleaflet there are a few different ways to do this, the approach we will use is the Chloropleth layer, which uses slightly different data management than the geodata layer. This visualisation tool works with json data directly, rather than with a dataframe. Luckily, geopandas has an easy way of getting a json string from a geodataframe. 

```python
geojson_dict = vector_data.__geo_interface__
```
We now need to create a dictionary to tell ipyleaflet what features to give what values, and use a colour map to transform these values into colours. 

```python
from branca.colormap import linear

population = dict(zip(list(vector_data.index.map(str)), list(vector_data['Population'])))

chloro_layer = ipyleaflet.Choropleth(
    geo_data=json_dict,
    choro_data=population,
    colormap=linear.YlOrRd_04)
    
m.add_layer(chloro_layer)
m
    
m.add_layer(chloro_layer)

m
```

In contrast to the geodata layer, where you are easily able to vary the visualisation parameters when you create the layer, the chloropleth visualisation parameters are linked to the data itself. Both of these layers can serve different purposes for mapping, and its good to be aware of how both of them work. 

In the next lesson, we will learn similar approaches for working with raster (image or gridded) data in ipyleaflet, including how to generate that data and vary parameters interactively. 

Mapping with Ipyleaflet Vectors

<Callout type="success">

After this lesson, you will be able to:
1. Load and display raster data to leaflet maps
2. Understand how to manage raster data in a web environment
3. Create a web app which will dynamically generate new data for the user, according to their input 

</Callout>

In the last lesson, we worked with vector data, adding it to the map and displaying changing outputs according to some user-set parameters. 

In this lesson, we will create a new notebook and a new map, and use this to work with some raster data. We will be loading in some remote sensing data covering Leeds, and will create an (unscientific!) model of air temperature which depends on solar irradiation. This is to demonstrate the process of building a model based app, rather than to create a model that accurately forecasts urban heat. 

If you are used to wokring with geospatial data, you have likely encountered geotiffs before. 

If not, geotiffs are .tif images with some geospatial information attached to them, defining their extent, location, coordinates reference system, and so on. This geospatial information allows the image to be drawn on the map in the right place and at the right scale. These images encode raster data.  

Normal images on a computer, when opened in Python, are stored in a 3 dimensional array with the shape (Height, Width, Channels). The number of channels is almost always 3, for RGB images, or sometimes 1, for greyscale images. RGB images represent their colours as integer values between 0 and 255 for each colour. So a pixel with a value of 255 for red and 255 for blue, but 0 for green will be displayed as purple on the screen, and so on. 

Raster data, in the geospatial context, can encode many kinds of information. This includes satellite or aerial imagery, satellite instrument data (e.g. radar), or gridded data like elevation, air temperature, and so on. Because of the wide variety of types of information that can be stored in .tif format, the number of channels can be very large. Hyperspectral images, for example, can have up to 220 bands each representing a small part of the electromagnetic spectrum. The values can also be very large, or very small, so dont easily map onto the 0-255 range of png or jpeg images. 

This makes displaying .tif files on the web a bit problematic. If a tif file has more than 3 channels, and/or values which go beyond 255 (or are negative!), then the values need to be converted to the correct format to be displayed. 

In addition to this, even if your .tif file has the right values and format, most web browsers cannot display them, so they must be converted to a .png or .jpg file.

```python
#We will use the rasterio library to load and work with the geotiff data
from ipyleaflet import Map, Marker, ImageOverlay
import rasterio as rio


center = (53.8008, -1.5491)

m = Map(center=center, zoom=15)

ndvi_reader = rio.open('Data/leeds_NDVI_aug_highres.tif')

metadata = ndvi_reader.profile
bounds = ndvi_reader.bounds

# ipyleaflet cant work with geotiffs directly, we have to do some covnersions before we can place the image on the map
# First, we need to convert the bounds to the correct format so the map knows where to draw the image

SW = (bounds.bottom, bounds.left)
NE = (bounds.top, bounds.right)
bounds_tuple = (SW, NE)
```


Next, we need to convert the image to a format that the map can understand. We will use the rasterio function to convert the image to a numpy array. Then, we will convert it to a png using the PIL library. This is because most browsers cannot show TIFF files, so adding a TIFF file will mean we can't see what is going on. This is a bit of a cumbersome process, but is unfortunately necessary in order to display tiff images in a web browser. 
```python
import numpy as np
from PIL import Image

array = ndvi_reader.read()
array = np.moveaxis(array, 0, -1)

nan_mask = ~np.isnan(array) * 1 
nan_mask *= 255
nan_mask = nan_mask.astype(np.uint8)
array = np.nan_to_num(array)
# We need to move the axis of the array so that the color channel is the last axis

# We need to scale the values in the array to be between 0 and 255 to be viewable as an image
array_max = np.max(array)
array_min = np.min(array)
array = np.clip((array - array_min) / (array_max - array_min) * 255, 0, 255)
array = array.astype(np.uint8)
```

Ok - now we have an array in the right format and shape. We now need to add this to the map. 

Leaflet is a web mapping tool first and foremost, so it doesn't natively work with arrays and other Python datatypes. Leaflet can take a URL to an image or file and display that, but URLs can also encode data in string format. If you encode an image in the URL, and pass this to Leaflet, then Leaflet can show the image without requiring you to manage files or storage. 

```python
# Now we can convert the array to an image
from io import BytesIO
from base64 import b64encode

image = Image.fromarray(np.squeeze(np.stack([array, array, array, nan_mask], axis=-1)), mode="RGBA")

s = BytesIO()

# We must convert the image to a series of bytes
# and encode this image in a url, which we can then
# pass to the Leaflet map 

image.save(s, 'png')
data = b64encode(s.getvalue())
data = data.decode('ascii')
imgurl = 'data:image/png;base64,' + data

image_layer = ImageOverlay(url=imgurl, bounds=bounds_tuple)
m.add_layer(image_layer)
display(m)
```

There we have it - we've added raster data to the map! 

There are many web apps which basically just allow the user to load and view many different kinds of data, so these tools can be used to create interesting apps by themselves, but we will add more interaction soon. 

```python
def add_tiff_to_map(path, map):
    reader = rio.open(path)

    metadata = reader.profile
    bounds = reader.bounds

    SW = (bounds.bottom, bounds.left)
    NE = (bounds.top, bounds.right)
    bounds_tuple = (SW, NE)

    array = reader.read()
    array = np.moveaxis(array, 0, -1)

    nan_mask = ~np.isnan(array) * 1 
    nan_mask *= 255
    nan_mask = nan_mask.astype(np.uint8)
    array = np.nan_to_num(array)


    array_max = np.max(array)
    array_min = np.min(array)
    array = np.clip((array - array_min) / (array_max - array_min) * 255, 0, 255)
    array = array.astype(np.uint8)

    image = Image.fromarray(np.squeeze(np.stack([array, array, array, nan_mask], axis=-1)), mode="RGBA")
    
    #Convert the image to bytes and encode in the url
    s = BytesIO()
    image.save(s, 'png')
    data = b64encode(s.getvalue())
    data = data.decode('ascii')
    imgurl = 'data:image/png;base64,' + data

    # Now we can add the image to the map
    image_layer = ImageOverlay(url=imgurl, bounds=bounds_tuple)
    map.add_layer(image_layer)
    
    # Close the reader
    reader.close()
```

Now, using the functions we have defined earlier, we will create a simple app, which shows a map with a dropdown menu that lets users select which image to display. 

```python
import ipywidgets as widgets


image_path_dictionary = {'NDVI':"Data/leeds_NDVI_aug_highres.tif",
 'NDBI': "Data/leeds_NDBI_aug_highres.tif", 
 'NDWI': "Data/leeds_NDWI_aug_highres.tif"}


image_type_dropdown = widgets.Dropdown(options=image_path_dictionary.keys(), description='Raster Type:')

def update_image(change):
    
    add_tiff_to_map(image_path_dictionary[image_type_dropdown.value], m)

image_type_dropdown.observe(update_image, names='value')
display(m)
display(image_type_dropdown)
```

Through using the function which adds an image to the map, along with the observer property which can be applied to the dropdown menu, the map can be updated automatically when the input is changed by the user. 

Now you have an interactive map where users can choose which data to view and explore areas interesting to them. One trick we are employing here is to just load and unload data, rather than calculating NDVI or similar indices on the fly using remote sensing images. You can apply this logic to all kinds of analysis, if your model has a relatively small number of parameters, and it is possible for you to pre-compute all the options beforehand, it might be better for your app to do this and just let users view the data interactively. This saves a lot of computing resources on mobile and web devices which might not be very powerful. It also means users dont have to wait a long time for servers to fetch and return data, perform analysis, crunch numbers, and so on. 


Now, lets add some modelling of data which we can do on the fly, making this app a bit more dynamic. We are going to define a function, which takes the images we are using as input data and produces an image representing air temperature as an output of the model. We are going to use a model based on solar irradiation, where air temperature of a pixel is a linear combination of NDVI (vegetation index), NDBI (built up index), NDWI (water index), and a constant solar irradiation value. We will encode these predictions in an array, and display it as an image in the same way we displayed the NDVI image before. 

```python
import numpy as np

# First, lets define a really simple model for the air temperature of point on the land surface. We will model this as a linear combination of 
# solar irradiance, NDVI, NDBI, and NDWI. We will also add some random noise to the model to make it more realistic. 
# This relies on the intuition of the urban heat island effect, where the emissivity and other characteristics of the land surface
# affect temperature. 

def model_airtemp(solar_irradiance, ndvi, ndbi, ndwi, c=25, ndvi_beta=-3, ndbi_beta=4, ndwi_beta=-2):
    airtemp =  ndvi_beta*ndvi + ndbi_beta*ndbi + ndwi_beta*ndwi + np.random.normal(-1, 1) + c + solar_irradiance
    return airtemp

# Fun question - why do I add the solar_arradiance 
# to the model at the end?
```

Now, we will create a map as we have done before, but this time we will use the dynamically created array as the data for the image, and add that to the map. 

```python
# First lets create a function which is a bit more general than the 
# tiff reading function from earlier, which allows any array
# to be encoded as a URL

def encode_array(array):
    array = np.moveaxis(array, 0, -1)
    nan_mask = ~np.isnan(array) * 1 
    nan_mask *= 255
    nan_mask = nan_mask.astype(np.uint8)
    array_max = np.nanmax(array)
    array_min = np.nanmin(array)


    array = np.nan_to_num(array)


    array = np.clip((array - array_min) / (array_max - array_min) * 255, 0, 255)
    array = array.astype(np.uint8)
    
    image = Image.fromarray(np.squeeze(np.stack([array, array, array, nan_mask], axis=-1)), mode="RGBA")

    
    #Convert the image to bytes and encode in the url
    s = BytesIO()
    image.save(s, 'png')
    data = b64encode(s.getvalue())
    data = data.decode('ascii')
    imgurl = 'data:image/png;base64,' + data
    
    return imgurl
```

Now, we can use this function to create and add images to maps on the fly, updating dynamically as the user interacts with the application. 

```python
#Load the rasters into memory so they can be more easily accessed
ndvi_array = rio.open('Data/leeds_NDVI_aug_highres.tif').read()
ndwi_array = rio.open('Data/leeds_NDWI_aug_highres.tif').read()
ndbi_array = rio.open('Data/leeds_NDBI_aug_highres.tif').read()

solar_irradiance_slider = widgets.FloatSlider(value=14, min=10, max=20, step=0.1, description='Solar Irradiance')
ndvi_slider = widgets.FloatSlider(value=0, min=-10, max=10, step=0.01, description='NDVI Coefficient')
ndbi_slider = widgets.FloatSlider(value=0, min=-10, max=10, step=0.01, description='NDBI Coefficient')
ndwi_slider = widgets.FloatSlider(value=0, min=-10, max=10, step=0.01, description='NDWI Coefficient')

# As before, we will define a callback function which attach
# to the observer of the leaflet map


def updateMap(change):

    new_airtemp = model_airtemp(solar_irradiance_slider.value, ndvi_array, ndbi_array, ndwi_array, 13, ndvi_slider.value, 
                  ndbi_slider.value, ndwi_slider.value)
    
    path = encode_array(new_airtemp)



    imageLayer = ImageOverlay(url=path, bounds=bounds_tuple)
    m.add_layer(imageLayer)
    
# Here we add observers to each of the control widgets we have
# created, so that whenever the user updates a parameter
# of the map, the data displayed on the map is updated

solar_irradiance_slider.observe(updateMap, 'value')
ndvi_slider.observe(updateMap, 'value')
ndbi_slider.observe(updateMap, 'value')
ndwi_slider.observe(updateMap, 'value')


# Now we lay out the widgets, and display them

irradiance_slider_container = widgets.Box([solar_irradiance_slider])
parameters_container = widgets.VBox([ndvi_slider, ndbi_slider, ndwi_slider])

controls_container = widgets.VBox([irradiance_slider_container, parameters_container])
mapDisplay = widgets.Output()

mapLayout = widgets.HBox([m, controls_container])

display(mapLayout)
```

And that's it! You have created a map which will update and dislay data in real time according to user input. This is the basis of how web apps can work, and by adding more layers of interaction and computation you can build more complex and useful applications. In the next lesson, we'll learn how to take your applications and upload them for others to share. Before that though, there are some exercises for you to complete:


#### Exercise 1
You might notice that this app slows down over time, have a look at how the code is adding information to the map and re-write the update map function to avoid this problem. Hint: use the m.layers property and the m.remove_layer method. 




#### Exercise 1 Solution

```python
def updateMap(change):

    new_airtemp = model_airtemp(solar_irradiance_slider.value, ndvi_array, ndbi_array, ndwi_array, 13, ndvi_slider.value, 
                  ndbi_slider.value, ndwi_slider.value)
    
    path = encode_array(new_airtemp)

    for l in m.layers[1:]:
        m.rmove_layer(l)
        
    imageLayer = ImageOverlay(url=path, bounds=bounds_tuple)
    m.add_layer(imageLayer)

```


Mapping with Ipyleaflet Rasters

<Callout type="success">

After this lesson, you will be able to:
1. Write functions which interact with multiple datatypes displayed on the map at the same time
2. Display from the map in multiple formats
3. Update the display and data in real time

</Callout>


In the previous lessons, we have covered how to interact with and display both raster and vector data, generating new data on the fly and using user-set parameters to determine what will be displayed. 

We are now going to use both raster and vector data together, creating interaction between different kinds of data. We will use the vector data that we worked with earlier to calcluate zonal statistics of the heatwave forecast raster, and then allow users to interact with this data in table format, showing some charts along the way. 

This might sound much more complicated than what we have done so far, but we're just going to layer the tools and methods we have already used together in order to do this. The goal will be to create a map which allows users to explore heatwave hazard by census area. We will adjust the average temperature of an area by its population, to see the total heat wave hazard in that area. 

First, lets re-define the raster functions from the last lesson here:

```python
from io import BytesIO
from base64 import b64encode
import numpy as np
import rasterio as rio
import matplotlib
import matplotlib.cm as cm
import ipywidgets as widgets
from ipyleaflet import Map, Marker, ImageOverlay
import rasterio as rio
from PIL import Image

center = (53.8008, -1.5491)
m = Map(center=center, zoom=15)

ndvi_array = rio.open('Data/leeds_NDVI_aug_highres.tif').read()
ndwi_array = rio.open('Data/leeds_NDWI_aug_highres.tif').read()
ndbi_array = rio.open('Data/leeds_NDBI_aug_highres.tif').read()
raster_reader = rio.open('Data/leeds_NDBI_aug_highres.tif')
raster_transform = raster_reader.transform
bounds = raster_reader.bounds
SW = (bounds.bottom, bounds.left)
NE = (bounds.top, bounds.right)
bounds_tuple = (SW, NE)




def model_airtemp(solar_irradiance, ndvi, ndbi, ndwi, c=25, ndvi_beta=-3, ndbi_beta=4, ndwi_beta=-2):
    airtemp =  ndvi_beta*ndvi + ndbi_beta*ndbi + ndwi_beta*ndwi + np.random.normal(-1, 1) + c + solar_irradiance
    return airtemp


def encode_array(array, filename='temp.png'):
    array = np.moveaxis(array, 0, -1)
    nan_mask = ~np.isnan(array) * 1 
    nan_mask *= 255
    nan_mask = nan_mask.astype(np.uint8)
    array_max = np.nanmax(array)
    array_min = np.nanmin(array)


    array = np.nan_to_num(array)


    array = np.clip((array - array_min) / (array_max - array_min) * 255, 0, 255)
    array = array.astype(np.uint8)
    
    image = Image.fromarray(np.squeeze(np.stack([array, array, array, nan_mask], axis=-1)), mode="RGBA")

    
    #Convert the image to bytes and encode in the url
    s = BytesIO()
    image.save(s, 'png')
    data = b64encode(s.getvalue())
    data = data.decode('ascii')
    imgurl = 'data:image/png;base64,' + data
    
    return imgurl


def image_to_8bit(array):
    array_max = np.nanmax(array)
    array_min = np.nanmin(array)

    array = np.nan_to_num(array)


    array = np.clip((array - array_min) / (array_max - array_min) * 255, 0, 255)
    array = array.astype(np.uint8)
    return array 

```


Ok. In the previous lessons we created two different systems:
1. A system for loading and displaying vector data, and varying this by parameter
2. A system for doing the same with raster data
3. A system for generating new raster data, and displaying the results

So, if we want to show the total heat exposure for each census area, we need to also:
1. Take the average value of temperatue for each vector feature
2. Multiply this by the population of each feature
3. Update the display and show a table

Lets begin by visualising and interacting with some tabular data - the population and other attributes from the census vector. 

Ipywidgets doesn't have a built in way to easily display dataframes, but can make use of the flexible and general purpose ipython display system using the output widget, in much the same way we used the output widget to display matplotlib charts in the earlier lessons. 

```python
import geopandas as gpd
vector = gpd.read_file("Data/leeds_census_final.geojson", driver='GeoJSON')

frameDis = widgets.Output()

def display_chart(vector):
    with frameDis:
        display(vector, clear=True)  
```

Ok, this is great - we can also update the display and show new data using the same widgets.

```python
import random
random_data_button = widgets.Button(description= 'Randomise!')
def randomise(b):
    vector['Random'] = vector['Population'] * random.random()
    display(display_chart(vector))


random_data_button.on_click(randomise)

display(random_data_button)
display(frameDis)
```

If we want to summarise a raster dataset by geometries, we need calculate what are called 'Zonal Statistics', we can use the rasterstats package to do this. In this project we have been working on creating a heatwave forecasting app, so lets start to examine the differences by census area. We're going to do some really overly simplistic risk modelling, by adjusting the average temperature of an area by its population. We can do this by taking the average temperature value for an area, multiplying it by the population, and then dividing by the maximum value for this new column to normalise the data. 


```python
from rasterstats import zonal_stats
def hazard_score(vector, raster, transform):
    stats = zonal_stats(vector, np.squeeze(raster), affine=transform)
    mean_list = []
    for s in stats:
        mean_list.append(s['mean'])
        
    vector['Mean Temp'] = mean_list
    vector['Hazard Score'] = vector['Mean Temp']*vector['Population']
    # Now we'll normalise the hazard score 
    vector['Hazard Score'] /= vector['Hazard Score'].max()
    return vector

    
```

Lets test this out with a randomly generated air temperature raster.

```python
airtemp_array = model_airtemp(10, ndvi_array, ndbi_array, ndwi_array, 13)

hazard_score(vector, airtemp_array, raster_transform)
```

Because we have stored (as in the earlier lesson) the vector as a geodataframe, we can simply add a new column containing the calculated mean to the dataframe, making it easy to view later.

Now - lets combine this with our previous map, and use an observer to update the data of the hazard score with the new air temperature data that we display to the map. 

```python
solar_irradiance_slider = widgets.FloatSlider(value=14, min=10, max=20, step=0.1, description='Solar Irradiance')
ndvi_slider = widgets.FloatSlider(value=0, min=-10, max=10, step=0.01, description='NDVI Coefficient')
ndbi_slider = widgets.FloatSlider(value=0, min=-10, max=10, step=0.01, description='NDBI Coefficient')
ndwi_slider = widgets.FloatSlider(value=0, min=-10, max=10, step=0.01, description='NDWI Coefficient')

# As before, we will define a callback function which attach
# to the observer of the leaflet map, but now we add
# the frame display widget as well 

frameDis = widgets.Output()


def update_map(change):
    #Remove old layers
    try:
        for layer in m.layers[1:]:
            m.remove_layer(layer)
    except:
        pass    

    new_airtemp = model_airtemp(solar_irradiance_slider.value, ndvi_array, ndbi_array, ndwi_array, 13, ndvi_slider.value, 
                  ndbi_slider.value, ndwi_slider.value)
    
    path = encode_array(new_airtemp)

    ## Now we add the code to update the dataframe
    # If we declare a variable in a function, we cant
    # access a global variable with the same name
    # so we are assigning the new vector to _vector
    _vector = hazard_score(vector, new_airtemp, raster_transform)
    display_chart(_vector)

    imageLayer = ImageOverlay(url=path, bounds=bounds_tuple)
    m.add_layer(imageLayer)
    
# Here we add observers to each of the control widgets we have
# created, so that whenever the user updates a parameter
# of the map, the data displayed on the map is updated

solar_irradiance_slider.observe(update_map, 'value')
ndvi_slider.observe(update_map, 'value')
ndbi_slider.observe(update_map, 'value')
ndwi_slider.observe(update_map, 'value')


# Now we lay out the widgets, and display them

irradiance_slider_container = widgets.Box([solar_irradiance_slider])
parameters_container = widgets.VBox([ndvi_slider, ndbi_slider, ndwi_slider])

controls_container = widgets.VBox([irradiance_slider_container, parameters_container])
mapDisplay = widgets.Output()

mapLayout = widgets.HBox([m, controls_container])
#We will add the frame display beneath the map
mapChartLayout = widgets.VBox([mapLayout, frameDis])
display(mapChartLayout)


```

And that's it! We have added automatic interaction between the two different systems that we have built over the entire course, and displayed it in a multi-model format, displaying both a raster map and a table. 

The next step is up to you! Alongside the table, there are a few things for you to add to make the display of data more interesting. 

### Exercise 1

Using the skills you learned in the earlier lessons of this course, please replace the table with a histogram chart which shows the distribution of average temperature for each feature in the vector dataset, and update it when parameters of the function are changed. 

### Exercise 1 Solution
Update the display_chart function to the following:
```python
import matplotlib.pyplot as plt

def display_chart(_v):
    with frameDis:
        frameDis.clear_output()
        _h = plt.hist(_v['Hazard Score'])
        plt.show(_h)
```

Advanced mapping with Ipyleaflet



<Callout type="success">

After this lesson, you will be able to:
1. Share you applications with others
2. Host Jupyter Notebooks on binder for free
3. Use Voila to display your widget based apps 

</Callout>

Ok, so you have an app, congratulations! The next step is to share it. Luckily, that's a relatively easy process, thanks to online tools like Binder. 

Binder is a free online computing service which allows you to host jupyter notebooks as interactable webpages. It is, in fact, what has been powering this course if you have used the interactive coding environment available on these pages. 

We are also using a tool called Voila, which allows you to display notebook without seeing any of the code blocks, and which executes all the code on startup. This allows them to function like applications, hiding the code from the user. 

All you need to do is host your notebook, a requirements, and a config file in a github repository, and then use the binder service to set up an interactive web app using voila. 

For this lesson, we will use an example application I have already written as a Jupyter Notebook, which collects all of the topics we have covered over the course. Once you have practiced with the example, you are free to use your own notebooks and applications for the same process. 

In the files for this course, in the Python folder there should be three files and directory
1. requirements.txt
2. voila_demo.ipynb
3. Data/

Copy all of these to a new directory and create a new github repository. If you have not done this before, the easiest way is to download [GitHub Desktop](https://desktop.github.com), initalize a new repository, and push your files to GitHub. Once you have done this, make sure your repository is public and navigate to its webpage on your profile. 

Once you have done this, in a new tab navigate to https://mybinder.org, and paste the url to your github repository in the top input box. In the 'path to a notebook file' box, use the dropdown on the right to select 'URL' instead of 'File' and paste /voila/render/voila_demo.ipynb to ensure the service opens your notebook in voila. 

Click Launch, and wait. After a few minutes, your app should be usable! 

Congratulations, you have built and deployed a geospatial web app in Python. You can share the URL to your binder with anyone in order to share the results with others. We have built a very basic app together, and there are many more possibilities and functions which you are able to develop, especially if you also learn HTML or Javascript, I encourage you to explore the other options available and use what you have learned in order to create apps which showcase your own research, this is just the beginning! 

Building a Geospatial Web App in Python

Course Description

Lessons

1. Introduction to Geospatial Web Apps

2. Setting up

3. Basics of interaction

4. Layouts and widgets

5. UI/UX for beginners

6. Mapping with Ipyleaflet Vectors

7. Mapping with Ipyleaflet Rasters

8. Advanced mapping with Ipyleaflet

9. Sharing with Voila