Neatline & Basemaps with CyclOSM won't display

I’ve been defeated yet again. Neatline doesn’t provide Tile Map Servers, so I tried Wayne’s basemaps addition, but it hasn’t been updated in 5 years. I am editing the osm.json and providers.js file, but I can’t seem to get the URLs right for the tile server? Or maybe I need to correct the id in osm.json? I am so out of my depth. (I would ask CyclOSM on github but I think they only support running your own tile server?)

I can get some other basemaps to load so I know Wayne’s mod is basically functional. But I can’t get CyclOSM to load, it’s just a white blank with the map interface.

I’ve tried both

https://{s}.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png

listed on github, and

https://dev.{s}.tile.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png

found online elsewhere by a CyclOSM dev.

Snippet from providers.js

OpenStreetMap: {
			url: '//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
			options: {
				maxZoom: 19,
				attribution:
					'&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
			},
			variants: {
				Mapnik: {},
				BlackAndWhite: {
					url: 'http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png',
					options: {
						maxZoom: 18
					}
				},
				DE: {
					url: 'http://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png',
					options: {
						maxZoom: 18
					}
				},
				France: {
					url: 'http://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png',
					options: {
						attribution: '&copy; Openstreetmap France | {attribution.OpenStreetMap}'
					}
				},
				HOT: {
					url: 'http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png',
					options: {
						attribution: '{attribution.OpenStreetMap}, Tiles courtesy of <a href="http://hot.openstreetmap.org/" target="_blank">Humanitarian OpenStreetMap Team</a>'
					}
				},
				CyclOSM: {
					url: 'https://dev.{s}.tile.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png',
					options: {
						attribution: '&copy; Openstreetmap France | {attribution.OpenStreetMap}'
					}
				}
			}
		},

and from osm.json for the admin settings dropdown:

{
      "title": "CyclOSM",
      "id": "osm.cycl",
      "type": "XYZ",
      "properties": {
        "urls": [
          "https://dev.a.tile.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png",
		  "https://dev.b.tile.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png",
		  "https://dev.c.tile.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png"
        ]
      }
    }

Any insight from anyone who knows about mapping or Neatline?

I’m sorry this is giving you trouble. The code you’ve provided for the osm.json file seems correct, in the sense that the layer shows up as a selectable option for a Neatline exhibit. When I load this into a test exhibit, the URLs for those tiles all return a 404 Not Found error in the browser console. So, the code parsing this is correct, but the URLs don’t appear to work.

Do you have any links to documentation from CyclOSM that you could share? It just seems like you need the correct. URLs for the tileset, and something about your current URLs seems amiss.

Poking around a little more, I found the correct (or, at least, working) URLs from the OpenStreetMap wiki page for Tile Servers. Here’s the full JSON I’m using, in a separate cyclosm.json file in the Neatline/layers directory, from a gist I shared on Github:

Good luck, let me know if this works for you!

Jeremy, thank you so much for the help! It now loads map tiles but…it’s not the same map that’s on view from https://www.cyclosm.org/#map=12/52.3728/4.8936/cyclosm

You can see the link has much bolder blue lines for bicycle paths. How odd! I have no idea what they’re doing over there on the project.

OK, I think I found the right tile address on the CyclOSM Github Try this:

It looks like a different tile set, with. additional geometries similar to the cycling data they seem to provide.

Thank you again; it looks functional now. It must be that I didn’t use $ in the z/x/y portion, because this otherwise matches the first URL I tried.