hopAPI
Guide

Query and map postcode areas from selected German and French cities with Overpass API and Leaflet.

This guide uses the hopAPI demo Overpass endpoint to request live postcode boundary relations for a selected city, reads the embedded relation geometry in the browser, and renders the polygons with individual colors on a Leaflet map plus a matching result table.

Jump to the live map Back to guides

Overview

The dropdown below switches between ten cities whose OpenStreetMap data already contains explicit boundary=postal_code relations that can be queried directly with Overpass. The live request currently returns 14 postcode polygons for Braunschweig.

City Selector
Endpoint

https://overpassdemo.r.hopapi.net/api/interpreter

Format

Overpass JSON fetched with an HTTP GET request and parsed directly client-side.

Output

Leaflet polygons, a postcode legend, and a table of the returned relations.

What The Query Does

  • Loads Braunschweig’s administrative relation with OSM relation ID 62531.
  • Converts that relation into an Overpass search area using map_to_area.
  • Finds all postcode boundary relations inside that city area.
  • Returns only the postcode relations with embedded geometry via out geom.

Overpass Request

The raw Overpass query below is passed to the hopAPI interpreter endpoint via the data query parameter of a GET request. 

[out:json][timeout:60];
rel(62531);
map_to_area->.searchArea;
relation["boundary"="postal_code"](area.searchArea);
out geom;

Why out geom is enough here

Overpass embeds the member way coordinates directly into each postcode relation, so the browser can reconstruct the polygon rings without issuing a recursive fetch for separate way or node elements.

Browser Logic

The page-specific script in assets/js/guide-postcode-areas.js fetches the relation-only Overpass JSON, stitches member way segments into closed rings, and then builds GeoJSON features for Leaflet plus the result table. 

const overpassJson = await response.json();
const postcodeItems = overpassJson.elements
  .filter((element) => element.type === "relation")
  .map((relation) => relationToFeature(relation));
Leaflet

Provides the base map, vector styling, popups, and map bounds handling.

Ring Stitching

Member way geometries are joined into closed polygon rings before rendering.

Table Output

The same sorted postcode list feeds both the map legend and the result table.

Live Map

Braunschweig postcode polygons

The map below is rendered from a live GET request against the hopAPI Overpass demo endpoint.

Loading postcode boundaries from hopAPI …

Endpoint used

https://overpassdemo.r.hopapi.net/api/interpreter

This guide intentionally uses a GET request so the page source remains easy to inspect and adapt for other cities with postcode boundary relations in OSM.

Postcode legend

The legend is generated from the live result set.

Result Table

Returned postcode relations

The table lists the postcode, OSM relation identifier, note tag, and an approximate map center derived from the polygon bounds for the selected city.

Postcode OSM Relation Note Approx. Center
The table will populate after the Overpass request finishes.

The live counts may change over time if postcode boundaries are updated in OpenStreetMap.