Going Interactive

Preparing the Data

To follow along with this chapter, we are heading to Zurich, Switzerland. Please download the following datasets and place them in your data folder. They contain geographic information about the city’s bicycle infrastructure and administrative boundaries.

1. Introduction to Folium¶

Interactive maps allow users to engage with spatial content directly. Instead of trying to cram every single data attribute onto a static legend, interactive maps let you hide complex information behind clickable markers and hover effects.

The gold standard for interactive web mapping is a JavaScript library called Leaflet.js. However, learning JavaScript just to make a map can be a daunting detour for a data scientist.

This is where Folium comes in. Folium is a fantastic Python library that acts as a bridge to Leaflet. It allows you to write standard Python code, which Folium then seamlessly translates into the HTML and JavaScript required to render a fully interactive Leaflet map in your browser or Jupyter Notebook.

Because the output is standard HTML, you can easily save these maps as standalone files to share with colleagues or embed in websites. Even better, modern versions of GeoPandas have built-in support for Folium, allowing you to generate these interactive web maps directly from your GeoDataFrames!

2. Initializing a Web Map¶

Creating an interactive canvas with Folium is incredibly straightforward. You initialize a map object using the folium.Map() class.

You can customise it by providing a starting location (passed as a list containing [latitude, longitude]) and an initial zoom level via the zoom_start parameter. Higher numbers zoom in closer to the street level, while lower numbers zoom out toward a global view. You can also define a basemap using tiles to change the OpenStreetMap default.

Changing the Basemap¶

The background style of your map is controlled via the tiles argument. Folium includes several built-in background map tiles (such as "OpenStreetMap", "CartoDB Positron", or "CartoDB DarkMatter"). When using these built-in options, Folium automatically adds the required attribution to the bottom right corner of the map.

There is a vast ecosystem of tile providers available online. You can explore the various styles using the interactive Leaflet Providers Preview below:

Explore different map styles by selecting providers on the right. For improved visibility of the explorer, follow this link.

If you find a style you like that is not built into Folium, you can use it by passing a custom URL directly to the tiles argument. Important: When using a custom URL, Folium cannot automatically guess the attribution. You must explicitly provide the copyright and map credits using the attr parameter.

Because we will be overlaying a lot of dense bicycle infrastructure data in this chapter, standard basemaps with heavy text labels can make the final visualization look cluttered and confusing. To maximize mapping clarity, let us create a clean, minimalist map using a specialized basemap called CartoDB Positron (No Labels):

3. Building a Map Layer by Layer¶

Now that we have a blank interactive canvas, it is time to add our spatial data. Building a production-ready web map often requires fine-grained control over individual elements like markers, popups, and styling. To achieve this, we will construct our Folium map layer by layer from scratch.

In this walkthrough, we will take the dataset of bicycle parking spots in Zurich (Zurich_bike_parking.gpkg) and incrementally transform it from a basic plot into an interactive, data-driven web-map.

A Quick Note on Projections: Web map tiles are served in Web Mercator (EPSG:3857), but libraries like Folium expect input coordinates in geographic latitude and longitude (EPSG:4326). If your data is stored in a projected coordinate system (e.g., EPSG:2056 or EPSG:3857), you must convert it to EPSG:4326 before passing it to Folium. Internally, Leaflet will then reproject these coordinates to align with the Web Mercator tile grid.

Concept Check: The Coordinate Trap¶

Scenario: You successfully loaded a shapefile of Zurich’s bike paths, which natively uses the highly accurate Swiss metric grid (EPSG:2056). You immediately pass it into folium.GeoJson(bike_paths). However, when you render the map in your notebook, the screen is completely blank and the bike paths are nowhere to be found. What is the most likely cause?

A) Folium cannot read shapefiles directly; you must convert it to a CSV first.

B) The base map tiles failed to load from the internet.

C) You forgot to project the data to EPSG:4326.

Step 1: Adding a Basic Layer¶

The simplest way to add a GeoDataFrame to a Folium map is by passing it to the folium.GeoJson() class.

Step 2: Giving the User Control¶

If you plan to add multiple datasets (like bike lanes and pumping stations) to a single map, the user needs a way to toggle them on and off. We can achieve this by giving our layer a explicit name and appending a LayerControl object to the map.

Step 3: Adding Tooltips¶

Right now, our markers are blind. To make the map informative, we need to reveal the underlying data. Our dataset contains a column named anzahl_pp, which represents the number of parking spaces at each location. We can attach a GeoJsonTooltip to display this information on hover.

Step 4: Custom Icons¶

Standard blue teardrop markers are generic. We can customize the aesthetics by passing a folium.Marker object equipped with a specific icon. Folium supports the FontAwesome (fa) icon library, giving us access to hundreds of intuitive symbols.

Step 5: Managing Clutter with Marker Clusters¶

We have a problem: Zurich has thousands of bike parking locations. Drawing them all at once creates a messy, overlapping visualization that is difficult to read and slow to load in the browser.

We can solve this using the MarkerCluster plugin.

Step 6: Scaling Symbols (advanced)¶

Our map is looking highly professional, but we can push it one step further. Right now, a parking rack with 2 spaces looks identical to a massive parking garage with 500 spaces.

Instead of using a generic icon, we can dynamically scale the size of our custom icon based on the actual anzahl_pp data value. To do this, we use folium.DivIcon to inject raw HTML and CSS styling directly into the map marker, calculating the size on the fly using a square-root mathematical scaling (which correctly scales the visual area of the circle).

4. Interactive Thematic Maps¶

In previous chapters, you learned how to create static choropleth maps using GeoPandas and Matplotlib. Now, we will bring those thematic maps to life using Folium.

Folium provides a dedicated Choropleth class that binds your tabular data (like Pandas DataFrames or Series) to your spatial geometries. Just like the GeoJson class, you can pass a GeoDataFrame directly to it to generate a thematic map.

Step 1: The Basic Choropleth¶

Let us start by creating a simple choropleth map that visualizes the geographic area of each administrative quarter in Zurich.

The most critical parameter to understand here is key_on. Folium needs to know exactly how to match the rows in your data table to the polygons in your spatial geometry. By default, GeoPandas stores your column data inside a nested JSON structure under feature.properties. If your matching column is named name, you must tell Folium to look for feature.properties.name.

Step 2: Spatial Joins and Density¶

Visualizing raw area is a good start, but spatial data science is about uncovering hidden patterns. A much more interesting question is: Which Zurich quarter has the highest density of bicycle parking?

To answer this, we must first perform a spatial join to count how many parking spots fall within each quarter, and then divide that count by the quarter’s area.

Because area calculations and spatial joins require location accuracy, we should perform these mathematical operations in the accurate Swiss projected coordinate system (EPSG:2056). Once the math is done, we will project the final results back to standard latitude and longitude (EPSG:4326) so Folium can render it on the web map.

Step 3: Multi-Layer Choropleths with Tooltips¶

Now we will map our new density data. We will actually add two choropleth layers to our map: one for Area, and one for Density.

To prevent the map from looking messy when it first loads, we can disable the Area layer from showing on the initial load by passing the show=False parameter directly to the Choropleth object. Users can still turn it on via the LayerControl menu.

Finally, we encounter a quirk of Folium. The folium.Choropleth class does not natively support hover tooltips as easily as standard point markers do. To solve this, we use a cartographic hack: we add a completely invisible GeoJson layer directly on top of our map. This invisible layer handles all the mouse hover interactions, triggering our helpful tooltips!

5. The Magic of .explore()¶

In the previous section, we built a multi-layered choropleth map from scratch. While building maps layer by layer provides more control over every single element, you probably noticed that it requires a substantial amount of code. Creating an invisible GeoJSON layer just to get tooltips working can feel like a tedious workaround.

For rapid spatial data exploration, we need a faster way to visualize data interactively.

Enter the magic of .explore(). Just as GeoPandas uses .plot() to instantly generate static Matplotlib figures, it provides the .explore() method to instantly generate fully interactive Folium web maps. GeoPandas handles all the complex JavaScript translation, GeoJSON conversion, and tooltip linking behind the scenes.

Let us recreate our parking density map using the quarters_4326 GeoDataFrame we prepared in the previous section, but this time, we will use .explore().

.explore(), Pure Folium, and the Hybrid Approach¶

If .explore() is so much faster, why would we ever write pure Folium code? The answer comes down to the classic programming tradeoff: Convenience vs. Control.

However, as you will see, these two tools are not mutually exclusive. Here is a quick guide on how to approach interactive mapping depending on your needs:

1. Standalone GeoPandas .explore():

• Exploratory Data Analysis (EDA): Best when you are actively analyzing data and need to quickly check if a spatial join worked, spot outliers, or view the distribution of a single dataset.

• Speed: When you need a functional, interactive map with an automatic legend and comprehensive tooltips in exactly one line of code.

2. Pure Folium (folium.Map, folium.GeoJson, folium.Choropleth):

• Pixel-Perfect Control: When you are building a final product for a client and need absolute control over the aesthetics, missing values (NaN), and legend placement.

• Custom Interactivity: When you need to utilize advanced Leaflet plugins (like our dynamically scaled MarkerCluster icons), inject custom CSS/HTML into popups, or use specialized clustering logic that .explore() cannot natively handle.

3. The Hybrid Approach (The Best of Both Worlds): You do not have to choose just one! You can actually combine the speed of .explore() with the structural control of Folium. By initializing a blank folium.Map() first, you can pass it to the m parameter inside .explore().

This is the perfect approach for building Multi-Layer Dashboards. It allows you to rapidly add multiple GeoDataFrames to the exact same canvas and easily append a LayerControl menu:

6. Exercise: The EV Charging Web Map¶

It is time to bring all these interactive concepts together. For this exercise, you will step out of Zurich and map infrastructure for the entire country. As a spatial data scientist, you have been tasked with visualizing Switzerland’s electric vehicle (EV) charging network.

Because charging stations are numerous, you must use clustering to prevent visual clutter. Furthermore, to make the map visually striking, you will use a dark-themed basemap and specialized icons.

Your Tasks:

1. Load the EV_charging_stations.gpkg dataset. Remember to project it to the standard web coordinate system (EPSG:4326) before passing it to Folium.

2. Initialize a Folium map centered on Switzerland (roughly [46.8, 8.2]) with a zoom_start of 8. To make the markers stand out, use the "CartoDB DarkMatter" tileset.

3. Initialize a MarkerCluster object, give it a logical name, and add it to your map.

4. Iterate over the rows in your GeoDataFrame. For each row:

• Extract the latitude (geometry.y) and longitude (geometry.x).

• Create a folium.Marker.

• Set the tooltip to show a string containing the station’s power output (e.g., "Power: 50 kW" using the "power" column).

• Customize the marker using folium.Icon. Set the color to "green" and use an appropriate FontAwesome icon (e.g., icon="bolt" or icon="plug", with prefix="fa").

• Add this marker directly to your MarkerCluster.

1. Add a LayerControl to the map and display your final interactive map.

import geopandas as gpd
import folium
from folium.plugins import MarkerCluster

# 1. Load and reproject the data to Lat/Lon (EPSG:4326)
ev_stations = gpd.read_file("data/EV_charging_stations.gpkg").to_crs(epsg=4326)

# 2. Initialize the map centered on Switzerland
map = folium.Map(
    location=[46.8, 8.2], 
    zoom_start=8, 
    tiles="CartoDB DarkMatter" # Dark basemap for contrast
)

# 3. Create the cluster and add it to the map
cluster = MarkerCluster(name="EV Charging Stations").add_to(map)

# 4. Iterate through the data and build the markers
for idx, row in ev_stations.iterrows():
    lat = row.geometry.y
    lon = row.geometry.x
    
    # Format the tooltip
    power_output = f"Power: {row['power']} kW"
    
    # Create marker with a green lightning bolt icon and add to cluster
    folium.Marker(
        location=[lat, lon],
        tooltip=power_output,
        icon=folium.Icon(color="green", icon="bolt", prefix="fa") 
    ).add_to(cluster)

# 5. Add Layer Control and display the map
folium.LayerControl().add_to(map)
map

7. Summary: Web Mapping¶

In this chapter, you bridged the gap between static data science outputs and modern web development. You transitioned from plotting unmoving pixels in Matplotlib to generating dynamic, interactive HTML canvases that users can explore.

• Folium: You learned that Folium acts as a Python wrapper for the powerful Leaflet.js library, allowing you to build web maps layer by layer without writing a single line of JavaScript.

• Thematic Maps: You built complex, multi-layered choropleths that combine spatial geometries with tabular data, using clever cartographic techniques (like invisible layers) to trigger detailed tooltips.

• The Magic of .explore(): You used GeoPandas to instantly render interactive choropleths and point maps with a single command, ideal for rapid exploratory data analysis.

• UX Design (Tooltips and Icons): You improved the user experience by replacing generic teardrops with data-driven thematic icons, and by hiding complex attribute data behind interactive hovers and clicks to keep the visual layout clean.

• Managing Scale: You utilized the MarkerCluster plugin to intelligently group thousands of geometries together. This ensures your maps remain performant, legible, and visually appealing, regardless of how far the user zooms out.