German version

Initial Situation

In the forum, a user reports that a road on Crete is not being displayed completely. It quickly becomes clear that the German style is being used for rendering.

Openstreetmap.de operates two tile servers. On both of them, the tiles are faulty. It would be quite a coincidence if this were a hardware issue or a specific data import problem. Therefore, it is very likely that the cause lies within the German style itself.

The only difference between the two road segments is that the visible part contains one additional tag, namely maxspeed:

• https://www.openstreetmap.org/way/1340290929
• https://www.openstreetmap.org/way/1340291113

First Attempt

In the first attempt, I added a tag, namely the surface surface, to the missing segment and forced the German server to re-render the tiles. As a result, the previously missing part of the road appeared. This brought me one step closer, but it is not a solution yet.

Second Attempt

The German style is based on the standard openstreetmap-carto style, which is used on openstreetmap.org for OpenStreetMap maps. It adopts the basic rendering but selectively modifies certain elements to make them more readable for Germans.

I was curious whether the missing road segments were also absent in the original style. Therefore, I rendered them using that style. For this, I used render_single_tile.py and retrieved the necessary information by right-clicking on the corresponding tile at https://tile.openstreetmap.de.

First, I rendered with the German style, where – as expected – the road section was missing:

render_single_tile.py --zxy 17 74577 51762 --stylefile openstreetmap-carto-de/osm-de.xml --outputfile site/rendersinglefile/1.png

Then with the original style, where the rendered tile was also incomplete:

render_single_tile.py --zxy 17 74577 51762 --stylefile openstreetmap-carto/mapnik.xml --outputfile site/rendersinglefile/3.png

… See full entry

The #30DayMapChallenge is a social media event where map enthusiasts create daily maps based on a set theme throughout November. You can find more details on the website 30daymapchallenge.com.

After observing the challenge for many years, I participated for the first time in 2025.

I wanted to use the challenge to better understand fundamental mapping concepts. It wasn’t primarily about creating especially beautiful or eye-catching maps. Rather, I am working on a small project where I create vector tiles for small areas—mostly using free software and open formats like Shortbread and Versatiles. At the same time, I am increasingly experimenting with self-created vector tiles and custom styles. So far, I have used Tilekiln or Tilemaker for the tiles, and for styling, I used Glug for the first time. Since I also enjoy Leaflet, I include a Leaflet map wherever it fits better.

In this article, I want to experiment with my designs and work on questions that are still open in my to-do list, or simply try out something new.

… See full entry

I like to enable creating Notes in a MapLibre map. This should be possible both anonymously and while logged in. The following documents the learning steps using plain vanilla JavaScript. Improvements or feedback welcome.

In OpenStreetMap, a note allows users to leave feedback, report missing information, or provide hints directly on the map without editing it themselves. In other words, it serves as feedback or comments that other mappers can see and later act upon.

OAuth and Notes in OpenStreetMap

OAuth

OAuth on OpenStreetMap is a mechanism that allows third-party applications to perform specific actions in a user’s OSM account without requiring the user’s password.

The first step is to create a token.

Creating a Token

1. First, I log in to my account or register if you do not have one: https://www.openstreetmap.org/login
2. Then I go to the OAuth application management page:

https://www.openstreetmap.org/user/<your_username>/oauth_clients/new

1. Enter the application details.

A form with several fields appears, as shown in the image below. It is important that the redirect URL exactly matches the one used in your application. Special attention is required: it must match the registered app exactly, including the trailing slash. For local testing, 127.0.0.1 can be used; unlike localhost, HTTPS is not enforced here.

… See full entry

In Leaflet, I really enjoy using Leaflet.Control.Layers.Tree and find its possibilities amazing. That’s why I’ve named the control I describe here Layertree. For now, I want to start small and document the learning steps I’ve taken with vanilla JavaScript. Since I don’t have much experience yet, feedback or suggestions for improvement are very welcome! I hope this post will be helpful to others who are learning as well.

Layertree Control

Base Layers

A base layer is the lowest map layer that provides the general background or geographic context — things like:

• Streets, buildings, rivers, landscapes
• Satellite imagery or simple map drawings

It serves as the foundation on which other data can be displayed as overlays (e.g., markers, routes, thematic layers).

There is already an official control, maplibre-basemaps, which, however, only supports raster sources. I want to make it possible to use vector sources as basemaps as well.

Here’s a simple code example showing how to create a custom basemap layer switcher in MapLibre GL JS to switch between different base maps (layers) — whether vector or raster.

… See full entry

You can find a German version of this article here: Navigation Control oder Zoom Control in MapLibre

In this post, I’m considering how to customize the Navigation Control and Zoom Control in MapLibre for different scenarios—such as depending on whether a pointer is available or the size of the screen. I’m also wondering whether CSS or JavaScript would be the better approach.

My goal is to display the Navigation Control only on devices where it makes sense and provides a good user experience. Since I’m new to this topic, I welcome any thoughts, feedback, or suggestions for improvement.

Navigation Control or Zoom Control in MapLibre

I’ll start with a simple example:

<!DOCTYPE html>
<html lang="de">
  <head>
    <title>Demo Navigation Control</title>
    <meta charset="utf-8">
    <meta name="viewport" content="https://wiki.openstreetmap.org/wiki/Tag:width=device-width, https://wiki.openstreetmap.org/wiki/Tag:initial-scale=1">

    <meta name="description" content="Demo Navication Control 1">
    <link
      href="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css"
      rel="stylesheet"
    >
    <script
      src="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js"
    ></script>
    <link rel="stylesheet" href="index.css">
    <script type="module" src="index.js" defer></script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

const map = new maplibregl.Map({
  container: "map",
  center: [12, 50],
  zoom: 6,
  style: "https://tiles.versatiles.org/assets/styles/colorful/style.json",
});

map.addControl(new maplibregl.NavigationControl({}));

body {
  margin: 0;
  padding: 0;
}

html,
body,
#map {
  height: 100%;
}

… See full entry

You can find a German version of this article here: Kreise in MapLibre

I want to integrate a Geolocate control into a MapLibre map and customize it both visually and functionally to fit my app.

At first, I considered using the GeolocateControl that comes standard with MapLibre. However, I quickly discarded this approach because adapting it to my needs seemed too cumbersome without a lot of fiddling.

My goal is that when the button is clicked, the display of the current location is toggled—so it can be turned on and off.

MapLibre itself offers several ways to draw circles on the map, depending on whether they should be pixel-accurate or meter-accurate.

Circles on a MapLibre Map

My starting point is a simple map.

… See full entry

Ausgangszustand

Wir haben via der nachfolgenden Aufrufe

• eine Vagrant Maschine mit dem Test-Import vom Hackathon in Karlsruhe aus dem Snapshot wiederhergestellt,
• den Branch mit dem neuen Playbook geladen
• das Datum in der virtuellen Maschine auf den aktuellen Stand gesetzt
• Datenbank Updates in der virtuellen Maschine getestet
• und die Aktualisierung der Datenbank gestoppt und deaktiviert.

… See full entry

TL;DR: Testupdate von osm2pgsql 1.8 auf 2.0 gemacht, um zu prüfen, ob ein Neueinlesen der Daten nötig ist: Wir haben uns für ein Neueinlesen entschieden.

Testupdate von osm2pgsql 1.8 zu osm2pgsql 2.0

Ausgangspunkt

Ausgangspunkt ist eine Vagrant-Maschine, auf der mittels Ansible genau wie beim “echten” Tile Server die Installation durchgeführt wurde.

In unserem Fall via:

vagrant up bookworm
./init_vagrant_inventory.sh bookworm
ansible-playbook -v -i vagrant.ini site.yml -u vagrant > | tee tile.txt

(mit Memory 8196 ).

Daten

Anstelle der ganzen Welt importieren wir unter Vagrant für den Test lediglich die Daten für Monaco.

… See full entry