Map Editor 2.0: Map with bike routes

By: Sergey Bobrovskikh
Back-end Developer, OpenWeatherMap

There are many online map services for those who prefer active leisure. For example, here is a map with bike routes: http://www.thunderforest.com/maps/opencyclemap/. You can read about it here: https://habrahabr.ru/post/131466.

Route maps are extremely useful! Also, while choosing a route it would be beneficial to know the weather in the region you will be travelling in. And what if we combine a bike route map with weather data from OpenWeatherMap? Eureka!

Map Editor 2.0 can help us with that!

Let’s see how it works.

On a page with a bike route map, we can find the address of the tile-server: https://[abc].tile.thunderforest.com/cycle/{z}/{x}/{y}.png. With the help of that, we can create a corresponding layer in Map Editor. For that, choose the “Layers” option in the upper menu line. A window for editing of layers then opens. Press the “New” button to add a new layer.

This screenshot shows how to create a new layer:

Here are some details about the lines that are filled in:

Label – a name of our layer (remember it to find it later)

Projection – the type of projection used (the Mercator projection in this case)

URL – address of tile-server in OSM format (unfortunately subdomains are not supported at the moment, so we enter a link like this: https://tile.thunderforest.com/cycle/{z}/{x}/{y}.png)

Band – a channel of image (we use colour images, so it is important to fill all channels; put “-1” in this field)

Type – a type of sourcing data (as we’re receiving a bitmap, the “gdal” format is needed here)

Format – the format of files received from the tile-server (we receive PNG-format pictures, so put “png” in this line).

Save this new layer, and then you can create a project: http://openweathermap.org/map_editor_2.

In the new project, add a previously created layer. In the “Style of layer” field, put “raster-opacity:1” – this means it will be totally non-transparent.

Done! We have combined a bike route map and our project.

Now it’s time to add one of the existing weather layers – for example, a layer with information about rain.

Press “Add layer”, choose “Rain” and let’s look at what we get:

You can easily zoom maps to see the routes. Hmm, it looks like Luxembourg is not the best place to cycle at the moment.