Interactive maps#

Online maps have been interactive for a long time: virtually all online maps allow to zoom in and out, to pan the map extent, and to select map features, or otherwise query information about them.

Interactive content in web pages, such as online maps, are typically implemented using JavaScript/ECMAScript, a scripting language originally targeted at web pages, primarily, but used for many other applications.

In the open source realm, there exist a number of different JavaScript libraries for interactive web cartography, including Leaflet, which we will use in this lesson, and OpenLayers.

No worries, we will not have to write a single line of JavaScript; this is a Python course, after all. Rather, we will take advantage of the Folium Python package: it helps create interactive Leaflet maps from data stored in geopandas.GeoDataFrames.

Folium resources

Find more information about the capabilities of the Folium package on its official web pages:

Create a simple interactive web map#

We will start by creating a simple interactive web map that contains nothing but a base map. This is so we get acustomed to how Folium’s syntax works, and which steps we have to take.

We create a folium.Map object, and specify centred around which location and at which initial zoom level (~0-20) a map shall be displayed. By setting control_scale to True, we make Folium display a scale bar.

import pathlib
NOTEBOOK_PATH = pathlib.Path().resolve()
DATA_DIRECTORY = NOTEBOOK_PATH / "data"

# We will export HTML pages during this lesson,
# let’s also prepare an output directory for them:
HTML_DIRECTORY = NOTEBOOK_PATH / "html"
HTML_DIRECTORY.mkdir(exist_ok=True)

import folium

interactive_map = folium.Map(
    location=(60.2, 24.8),
    zoom_start=10,
    control_scale=True
)

interactive_map

Make this Notebook Trusted to load map: File -> Trust Notebook

Save the resulting map#

To save this map to an HTML file that can be opened in any web browser, use folium.Map.save():

interactive_map.save(HTML_DIRECTORY / "base-map.html")

Change the base map#

If you want to use a different base layer than the default OpenStreetMap, folium.Map accepts a parameter tiles, that can either reference one of the built-in map providers.

While we’re at it, let’s also vary the centre location and the zoom level of the map:

interactive_map = folium.Map(
    location=(60.2, 25.00),
    zoom_start=12,
    tiles="cartodbpositron"
)
interactive_map

Make this Notebook Trusted to load map: File -> Trust Notebook

Or we can point to a custom tileset URL:

interactive_map = folium.Map(
    location=(60.2, 25.00),
    zoom_start=12,
    tiles="https://mt1.google.com/vt/lyrs=r&x={x}&y={y}&z={z}",
    attr="Google maps",
)
interactive_map

Make this Notebook Trusted to load map: File -> Trust Notebook

Add a point marker#

To add a single marker to a Folium map, create a folium.Marker. Supply a folium.Icon as a parameter icon to influence how the marker is styled, and set tooltip to display a text when the mouse pointer hovers over it.

interactive_map = folium.Map(
    location=(60.2, 25.0),
    zoom_start=12
)

kumpula = folium.Marker(
    location=(60.204, 24.962),
    tooltip="Kumpula Campus",
    icon=folium.Icon(color="green", icon="ok-sign")
)
kumpula.add_to(interactive_map)

interactive_map

Make this Notebook Trusted to load map: File -> Trust Notebook

Add a layer of points#

Folium also supports to add entire layers, for instance, as geopandas.GeoDataFrames. Folium implements Leaflet’s geoJSON layers in its folium.features.GeoJson class. We can initialise such a class (and layer) with a geo-data frame, and add it to a map. In the example below, we use the addresses.gpkg data set we create in lesson 3.

import geopandas

addresses = geopandas.read_file(DATA_DIRECTORY / "addresses.gpkg")
addresses.head()

	address	geometry
0	Ruoholahti, 14, Itämerenkatu, Salmisaari, Ruoh...	POINT (24.91556 60.16320)
1	Kamppi, 1, Kampinkuja, Kamppi, Eteläinen suurp...	POINT (24.93166 60.16905)
2	Kauppakeskus Citycenter, 8, Kaivokatu, Keskust...	POINT (24.94179 60.16989)
3	Hermannin rantatie, Verkkosaari, Kalasatama, S...	POINT (24.97846 60.19206)
4	9, Tyynenmerenkatu, Jätkäsaari, Länsisatama, E...	POINT (24.92151 60.15662)

interactive_map = folium.Map(
    location=(60.2, 25.0),
    zoom_start=12
)

addresses_layer = folium.features.GeoJson(
    addresses,
    name="Public transport stops"
)
addresses_layer.add_to(interactive_map)

interactive_map

Make this Notebook Trusted to load map: File -> Trust Notebook

We can also add a pop-up window to our map which would show the addresses at the point of interest upon clicking:

interactive_map = folium.Map(
    location=(60.2, 25.0),
    zoom_start=12
)

popup = folium.GeoJsonPopup(
    fields=["address"],
    aliases=["Address"],
    localize=True,
    labels=True,
    style="background-color: yellow;",
)

addresses_layer = folium.features.GeoJson(
    addresses,
    name="Public transport stops",
    popup=popup
)
addresses_layer.add_to(interactive_map)

interactive_map

Make this Notebook Trusted to load map: File -> Trust Notebook

Add a polygon layer#

In the following section we are going to revisit another data set with which we have worked before: the Helsinki Region population grid we got to know in lesson 2, and which you used during exercise 3. We can load the layer directly from HSY’s open data WFS endpoint:

# To ignore the SSL certificate issue
import ssl
ssl._create_default_https_context = ssl._create_unverified_context
population_grid = (
    geopandas.read_file(
        "https://kartta.hsy.fi/geoserver/wfs"
        "?service=wfs"
        "&version=2.0.0"
        "&request=GetFeature"
        "&typeName=asuminen_ja_maankaytto:Vaestotietoruudukko_2020"
        "&srsName=EPSG:4326"
        "&bbox=24.6,60.1,25.2,60.4,EPSG:4326"
    )
    .set_crs("EPSG:4326")
)
population_grid.head()

	gml_id	index	asukkaita	asvaljyys	ika0_9	ika10_19	ika20_29	ika30_39	ika40_49	ika50_59	ika60_69	ika70_79	ika_yli80	geometry
0	Vaestotietoruudukko_2020.174	3952	7	86	99	99	99	99	99	99	99	99	99	POLYGON ((24.59351 60.26574, 24.59348 60.26798...
1	Vaestotietoruudukko_2020.175	3958	17	105	99	99	99	99	99	99	99	99	99	POLYGON ((24.59367 60.25227, 24.59365 60.25452...
2	Vaestotietoruudukko_2020.176	3959	13	65	99	99	99	99	99	99	99	99	99	POLYGON ((24.59370 60.25003, 24.59367 60.25227...
3	Vaestotietoruudukko_2020.177	3960	29	65	99	99	99	99	99	99	99	99	99	POLYGON ((24.59373 60.24779, 24.59370 60.25003...
4	Vaestotietoruudukko_2020.178	3961	14	70	99	99	99	99	99	99	99	99	99	POLYGON ((24.59376 60.24554, 24.59373 60.24779...

Let’s first clean the data frame: drop all columns we don’t need, and rename the remaining ones to English.

population_grid = population_grid[["index", "asukkaita", "geometry"]]
population_grid = population_grid.rename(columns={
    "asukkaita": "population"
})

Index column for choropleth maps

We will use the folium.Choropleth to display the population grid. Choropleth maps are more than simply polygon geometries, which could be displayed as a folium.features.GeoJson layer, just like we used for the address points, above. Rather, the class takes care of categorising data, adding a legend, and a few more small tasks to quickly create beautiful thematic maps.

The class expects an input data set that has an explicit, str-type, index column, as it treats the geospatial input and the thematic input as separate data sets that need to be joined (see also, below, how we specify both geo_data and data).

A good approach to create such a column is to copy the data frame’s index into a new column, for instance id.

population_grid["id"] = population_grid.index.astype(str)

Now we can create the polygon choropleth layer, and add it to a map object. Due to the slightly complex architecture of Folium, we have to supply a number of parameters:

geo_data and data, the geospatial and thematic input data sets, respectively. Can be the same geopandas.GeoDataFrame.
columns: a tuple of the names of relevant columns in data: a unique index column, and the column containing thematic data
key_on: which column in geo_data to use for joining data (this is basically identical to columns, except it’s only the first value)

interactive_map = folium.Map(
    location=(60.17, 24.94),
    zoom_start=12
)

population_grid_layer = folium.Choropleth(
    geo_data=population_grid,
    data=population_grid,
    columns=("id", "population"),
    key_on="feature.id"
)
population_grid_layer.add_to(interactive_map)

interactive_map

Make this Notebook Trusted to load map: File -> Trust Notebook

Interactive maps

Contents

Interactive maps#

Create a simple interactive web map#

Save the resulting map#

Change the base map#

Add a point marker#

Add a layer of points#

Add a polygon layer#