feature: use maplibre-gl instead of leaflet

[mustaphaturhan]

Closes #245
Closes #158

There are a lot of AI changes in it. I mıght decline the PR completely and try again. Just wanted to test how it looks in production.

Some missing points:

• Heightgraph is not beautiful as it is currently.
• There is no route information popup when user hover a route
• There is no address popup when user hover a waypoint
• Waypoint is so much different then leaflet so probably need to update it
• The polygon exclusion seems to take no effect, looks like you're passing the GeoJSON geometry instead of just the coordinates
• The maneuver highlighting does not highlight parts of the lines, just the start point
• Icons of drawing are not visible
• when selecting a polygon, we should probably mute the normal left-click behavior if possible; currently the normal pop-up overlaps the polygon one selects
• when one polygon out of multiple is selected and the "delete polygon" button is clicked, it should probably only delete the selected one instead of all polygons; or alternatively (and feasible) have it similar as currently: activate the "delete" button and every polygon one clicks on will be removed unfortunately, alternative method is not feasible for terradraw library.
• we don't have layers yet

[gisops-bot]

Preview is ready! 🚀 You can view it here: https://valhalla-app-tests.gis-ops.com/258

[nilsnolde]

I think this is the first time I saw OSM vector tiles and I must say, I do like the raster ones better, both in style as in zoom-dependent features. One has to be awfully closely zoomed in to see pedestrian paths e.g. in parks and the map style is fairly bad IMO. This is not a review of the work being done, either way we should switch to vector tiles and I guess most of that could be tweaked by us if we wanted to, or we can eventually include more base map/style options like Stadia's styles.

[nilsnolde]

Why did they decide to make actual forest a light green?! I'll give it the benefit of the early-stage doubt I guess

[mustaphaturhan]

@nilsnolde I believe when you get raster ones, you get the maps already styled for you. But when you get vector tiles, you can create your own configuration with style configuration. I mean if you download the style.json file from my commit and try to open it https://maputnik.github.io editor, you will see that everything is customizable.

You can see some styled maps from https://maps.black, for example I like openstreetmap-protomaps/protomaps/seafoam

[nilsnolde]

Yep that's one of the beauties of vector tiles. However, those style jsons are data dependent, and osm just released their own data. I doubt there's many styles available at this point, but maybe if we dig a little. We can certainly make small tweaks to existing ones, but creating one from scratch is a big-ish exercise.

@ianthetechie you're a vector tiles guru:) did you hear anything about pretty and reasonable OSM vector tile style.json?

[ianthetechie]

Ooh, good question! IIRC the tiles that the OSMF is deploying use the Shortbread schema. There are a few styles here that I think look better: https://shortbread-tiles.org/styles/.

The only challenge with some of these might be (I haven't inspected them deeply) lack of details like pedestrian paths, crossings, gates, etc. that can be useful for routing. The classic OSM carto style may be ugly and Leaflet may be funky, but they are probably the most detailed view, and there are cases where that's nice.

I'd love to see a style switcher; MapLibre can display raster maps just as well too. And there's a React wrapper too IIRC.

[nilsnolde]

Thanks @ianthetechie :) yeah my impression was as well that it requires wayyyy too high zoom levels to see ped paths.

+1 for base map or even style selection at runtime!

[mustaphaturhan]

style selection at runtime is definitely easy to do -of course we should find style options for it- but i am confused how to continue with maplibre as current state. there is no change with the plan, right?

[chrstnbwnkl]

Nice, apart from the default OSM style I think this looks really promising!

Some things I noticed:

• the polygon exclusion seems to take no effect, looks like you're passing the GeoJSON geometry instead of just the coordinates
• the maneuver highlighting does not highlight parts of the lines, just the start point
• the zooming behavior is a bit erratic when a route is re-calculated (zooms in quickly then out again)

But I think overall it's great, rendering is super smooth, and the drawing with terra draw seems very ergonomic (I was a bit surprised that you're still in edit mode after finishing a polygon, but I think this is the better user experience; it's common to draw more than one! maybe we can add a little dot at the tip of the cursor to let the user know they're in draw mode the cursor is already different, never mind)

[mustaphaturhan]

@nilsnolde @chrstnbwnkl can you test again?

[nilsnolde]

thanks @mustaphaturhan , looks & feels good IMO! the only 2 minor things I observed:

• when selecting a polygon, we should probably mute the normal left-click behavior if possible; currently the normal pop-up overlaps the polygon one selects
• when one polygon out of multiple is selected and the "delete polygon" button is clicked, it should probably only delete the selected one instead of all polygons; or alternatively (and feasible) have it similar as currently: activate the "delete" button and every polygon one clicks on will be removed

it's not the most used feature I'd say, so never mind the last point if it's not fairly trivial code changes.

[nilsnolde]

oh I just saw that the polygons are not yet taken into account when requesting. the request should contain an array exclude_polygons with the coords from the drawn ones.

[mustaphaturhan]

fetch("https://valhalla1.openstreetmap.de/route?json=%7B%22costing%22:%22bicycle%22,%22costing_options%22:%7B%22bicycle%22:%7B%22maneuver_penalty%22:5,%22use_ferry%22:1,%22use_living_streets%22:0.5,%22service_penalty%22:15,%22service_factor%22:1,%22shortest%22:false,%22bicycle_type%22:%22Hybrid%22,%22cycling_speed%22:20,%22use_roads%22:0.5,%22use_hills%22:0.5,%22avoid_bad_surfaces%22:0.25,%22gate_penalty%22:300,%22gate_cost%22:30%7D%7D,%22exclude_polygons%22:[[[32.621060165,39.981296641],[32.626804314,39.978900627],[32.627618215,39.981497511],[32.621060165,39.981296641]],[[32.622082202,39.976421781],[32.620708759,39.978451526],[32.619091242,39.977835937],[32.622082202,39.976421781]]],%22locations%22:[%7B%22lon%22:32.63118839310215,%22lat%22:39.99197696200778,%22type%22:%22break%22%7D,%7B%22lon%22:32.61458916478651,%22lat%22:39.975735174943225,%22type%22:%22break%22%7D],%22units%22:%22kilometers%22,%22alternates%22:0,%22id%22:%22valhalla_directions%22%7D"
});

@nilsnolde are we looking at the same thing? 🤔 because in the latest deploy, I am sending exclude_polygons in the query parameters.