×

OpenWeather
Meteorological Service

Dan Hart Speak to the Chief
Meteorologist Dan Hart and
his team!

Map Editor 2.0: Map with bike routes

Map Editor 2.0: Map with bike routes

Posted on 01 Jul 2016

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.


We use cookies to personalize content and to analyze our traffic. Please decide if you are willing to accept cookies from our website.