How do I open the CyclOSM style on Maputnik?

Background: I accidentally stumbled upon a tool called Maputnik that gives people a visual way to generate geojson files for custom map styling (I hope I’m saying that right). Now I really wanna derp around with some map styles, ideally without installing any new tools (not yet anyway). I’ve watched a Maputnik tutorial and I get how to start with one of the pre-loaded styles (click Open in the top toolbar, then select one of the options under Gallery Styles).

Where I need help: I’d really like to start with the CyclOSM style because I mostly care about bicycle stuff. In Maputnik on that “Open Styles” dialog I see there’s an option to “Load from URL.” Over on the CyclOSM GitHub, it says “The tile server url is https://{s}.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png.” When I copy this URL into Maputnik’s “Open Styles” dialog and click “Load from URL,” it says “Failed to load: ‘https://{s}.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png’.” :disappointed:

What am I doing wrong?

Edit: Thanks for your responses. I now have a better understanding of the different types of map tiles (raster vs vector). Thanks again!

1 Like

Maputnik is a way of styling vector tiles of the relevant vector tile format (probably .mvt?).

The vector tiles contain features that the creators of the tile schema/format think people might want to show at a given zoom level, but without any style information. The style is provided separately to the browser/application and they are styled locally on the users device.

The URL you have provided is a URL scheme for raster tiles, which are just plain images with all the styling ‘baked in’ at the time they were rendered. Which is a fundamentally different way of displaying a map and not generally customisable later.

To use the Maputnik to customise the CyclOSM style you would need the style information for CyclOSM in a format that Maputnik understands. You would also need the tile schema to include the relevant information.

The CyclOSM style is available online under an open licence, but I have no idea if it’s compatible with Maputnik. They both have Mapbox heritage but that’s no guarantee of anything or that CyclOSM isn’t bringing in additional features that the vector tiles might not normally have.

2 Likes

Maputnik is a vector editor, you cannot use a raster URL (CyclOSM)
The best use of Maputnik is to create or edit .json styles, It is an aid for those who do not know the json syntax that can be manipulated directly with a code editor.
CyclOSM provides a basic json style that you can use in Maputnik.
Go to the site Github CyclOSM and download the last file from the list (json style)
You must upload this file to Maputnik to see the rendering, the json style development has been archived/abandoned but you will get a basic rendering to work on.
Now, the style needs the correct URLs for it to work (sprite, glyphs AND vector).
The easiest and fastest thing you can do is open a free account in MapTiler and obtain your Apikey and then obtain the URLs where you can request the data.
The CyclOSM json style is very basic and simple, it is a limited imitation of the raster style. With Maputnik you can add the sprites and glyphs or you can do it directly with a code editor.

1 Like

To use this option you must provide a URL where the json style is hosted, try the following link (CyclOSM RAW json style)
It’s the same URL I suggested above.

https://raw.githubusercontent.com/cyclosm/cyclosm-basic-gl-style/master/style.json

You must keep in mind that the json style was archived and the CartoCSS style continued its evolution, you will see many differences between the raster and the vector, but everything has a solution and you can add the missing lines of code with Maputnik to emulate the raster style.

Raster=


Vector=

1 Like