Fix API key required for CartoDB map tiles

[mszell]

CartoDB now requires an API key, otherwise they display "API KEY REQUIRED" on their map tiles:
https://docs.bikenetkit.org/GrowBikeNet/mwe/

We cannot have tiles API handling in the public docs (especially mwe or basic usage which have to be as minimal as possible), so if docs are not possible without that we need to switch to another tile provider. Figure out with @MoritzStefaner what is best, so the docs maps are as close as possible to the viz maps.

[mszell]

Maybe bikenetkit could use in all its packages the tiles from the viz server, then it wouldn't be just similar but identical? @MoritzStefaner is that possible? And if they break we know where they broke and it's not just some provider disappearing or changing its terms.

For the docs relevant, see:

• https://geopandas.org/en/stable/docs/reference/api/geopandas.GeoDataFrame.explore.html
• https://xyzservices.readthedocs.io/en/stable/api.html#xyzservices.TileProvider

But I guess in the docs this would require some technical overhead again, so maybe not great. At least one can hide cells in the docs, so that could help.

[mszell]

Not high priority though, can wait for weeks but would be good to fix before launch.

[MoritzStefaner]

Yes, I would also not recommend relying on carto for the docs. I can look into how you could use the approach from the website also in the docs!

[MoritzStefaner]

So, I looked into it, basically, there are two possible approaches documented here:
https://github.com/BikeNetKit/docs-map-demo

I'd recommend the maplibre solution, as it requires no workarounds like the leaflet version, and it's closest to what we use on the website, so it will profit from any improvements and updates there.

Let me know if it works for you, and don't hesitate to ask in case there are any issues. This implementation is just a quick sketch.

[mszell]

Very nice, thank you. In the meanwhile API key support was added to leaflet but I would prefer an option that is stable in the long-term, so the maplibre solution could work better. Whenever I work on the docs again I will try it out.

[mszell]

So, I like the maplibre solution, but it seems suited just for rendering one gdf, right?
We also need layer control and the ability to load multiple gdfs (points, lines, polygons maybe at some point), see: https://docs.bikenetkit.org/GrowBikeNet/usage_06_data_imports_for_prioritizing_growth/
I guess this is not part of the maplibre solution, right? I would not want you to try to come up with a whole new package or fancy templates that implement those things, so in that case I would try the folium solution.

However, the folium solution one is a bit ugly, as it seems the user/docs will need to contain these extra lines of code, which I would not want to do:

m = folium.Map(location=[45.758, 4.835], zoom_start=12, tiles=None, control_scale=True)

# Load protomaps-leaflet, and paint the map pane the BikeNetKit paper color.
m.get_root().header.add_child(Element(f'<script src="{PML_JS}"></script>'))
m.get_root().header.add_child(Element('<style>.folium-map{background:#f7f7f0}</style>'))
m.add_child(BikeNetKitBasemap(PMTILES))

# Network on top, plain single color — the point here is the base layer, not the data styling.
folium.GeoJson(gdf, style_function=lambda f: {"color": "#00676f", "weight": 2, "opacity": 0.9}).add_to(m)

But I guess I could wrap them into a function, and then the folium solution could become a one-liner? (while keeping the option open to add layer control etc)
If you think yes, then I would attempt to do that I think.

I did not understand what it means that "The downside is that labels need to be drawn manually."

[mszell]

Ok there is another issue I didn't think about.... if we provide such a new option to the user, then the maptiles need to cover the whole planet, not just Europe. Let's discuss whether this is feasible.

[MoritzStefaner]

So, I like the maplibre solution, but it seems suited just for rendering one gdf, right?

Yes, but you could extend the function. It's just a proof of concept. Maplibre is quite capable: https://maplibre.org/maplibre-gl-js/docs/examples/