Sounds very interesting, will have a closer look! Is this just about visualizing the route or the whole / parts of the graph ? For the purposes I was looking for in #1456 this here is my (probably still incomplete) wish list. Do you think we can do all (or most of) this using the mvt approach (<- sorry no idea atm what the possiblities/limitations are) ?

• draw bounding box and show graph (including node/edge infos like id, weight, distance, ch level etc., possibly by clicking or hovering as a popup as otherwise it becomes hard to see anything)
• show turn restrictions
• zoom/fly to coordinate
• zoom to a given node/edge id and/or draw bounding box around a certain node/edge id
• somehow visualize loops and duplicate edges (this I have found is not so easy would have to split/slightly offset edges that lie on top of each other, or use some 3D features)
• show more/less details depending on zoom level
• show/hide details via UI (enable/disable checkbox, move slider etc.)

Update Looking at the screenshot it looks like the whole graph is already drawn and there is possibility for a popup showing the name of the road :)

Is this just about visualizing the route or the whole / parts of the graph ?

Whole graph

draw bounding box and show graph

no bounding box necessary as everything that is visible is shown (for every "tile" it does a request and the server response gives MVT data)

and there is possibility for a popup showing the name of the road :)

You can actually show every data you like be it as a color or if you click on the road via a popup, yes :)

show turn restrictions

👍 ... a bit tricky from the GH perspective but easy as this should be just 2 roads we have to transmit :)

show more/less details depending on zoom level

This can be easily done. And is done already. E.g. for the overview it just returns junction nodes and deeper zooms gives full way geometry

somehow visualize loops and duplicate edges (this I have found is not so easy would have to split/slightly offset edges that lie on top of each other, or use some 3D features)

Could be color-encoded or something, sure.

zoom/fly to coordinate

As we can easily integrate this into GH Maps as overlay or basemap this should be possible like with normal leaflet functionality: https://graphhopper.com/maps/?point=41.95949%2C2.790527

show/hide details via UI (enable/disable checkbox, move slider etc.)

Definitely possible.

We could pack all data we have into the MVT and evaluate them on the client side. The current problem is for many points it takes long to convert our data into MVT on the server side. Still it already works reasonable fast, especially if you have just a few cities or even less.

Cool!

The current problem is for many points it takes long to convert our data into MVT on the server side. Still it already works reasonable fast, especially if you have just a few cities or even less.

A single or even a part of a single city would be sufficient for debugging routing problems I think.

show turn restrictions ... this get tricky though :)

Ok but why ? Could they not be somehow attached as metadata ? At a minimum we should be able to use an extra endpoint that serves turn restriction information (for example per node id or bounding box) and use this as an extra layer (<- can we draw an extra layer on top of the vector tiles from the client side?)

Ok but why ? Could they not be somehow attached as metadata ?

Sorry, my wording was bad. I just meant the graphhopper part ... currently we would have to loop through all edges to find if there are turn costs instead of saying "please give me all turn cost in this area". If we have this data we can easily return this as e.g. a multiline with turn_restriction=true or something

can we draw an extra layer on top of the vector tiles from the client side

Yes, this should be possible. But multiple layers are not necessary as we can use a single layer and evaluate properties of it feature by feature

currently we would have to loop through all edges to find if there are turn costs instead of saying

but with locationIndex.query(bbox) we can get all nodes in a bbox and then we retrieve all turn restrictions for these node ids ?

But multiple layers are not necessary as we can use a single layer and evaluate properties of it feature by feature

Ok yes if we collect all data on the server with a single request we create one layer.

quite regularly. Any idea ?

Highly likely those exceptions are the result of tiles that the browser initially asked for, but then due to zoom level or bbox changes they are not needed anymore and explicitly rejected from the browser (connection dropped or something).

So it should not happen if you zoom so slow that all tiles can render. Would be nice if we can somehow properly "fix" them.

It is basically this (satellite + your speed-colored road layers)

Ah, thanks! (For firefox I had a minor glitched due to mixed content and so I had to replace localhost with 127.0.0.1: http://127.0.0.1:8989/mvt/{z}/{x}/{y}.mvt)

gh-mvt-style.zip

but then due to zoom level or bbox changes they are not needed anymore and explicitly rejected from the browser (connection dropped or something).

Yes, the client usually cancels these requests. You can see that the easily in the network tab in the developer tools.

Yes, the client usually cancels these requests. You can see that the easily in the network tab in the developer tools.

Maybe there is an option to delay the client-side requests so not to many requests are sent before the zooming 'stops' at the point one really wants to zoom to ?

Maybe there is an option to delay the client-side requests so not to many requests are sent before the zooming 'stops' at the point one really wants to zoom to ?

IMHO both the client and GH work correctly. The problem seems to be that dropwizard does not catch this exception gracefully. Also see #1558

I really like the vector tiles.

Here is an example using the mvt endpoint with openlayers for R

devtools::install_github("crazycapivara/openlayers")

library(openlayers)

map_source <- "http://localhost:8989/mvt/{z}/{x}/{y}.mvt"

# Basic example
ol() %>%
  add_vector_tiles(map_source) %>%
  set_view(9.503174, 52.583026, 12)

Adding some styles from here:

fn <- "https://gist.github.com/crazycapivara/5efd362173604e25b985ce1cf68f2dad/raw/069281132f093ce11a874daaf6293e0397770408/gh-ol-mvt-style.js"
style <- read_js_function(fn)

ol() %>%
  add_vector_tiles(map_source, style = style) %>%
  set_view(9.503174, 52.583026, 12)

# Add a raster layer as well ...
ol() %>%
  add_stamen_tiles("toner", options = list(name = "stamen")) %>%
  add_vector_tiles(map_source, style = style, options = list(name = "gh")) %>%
  set_view(9.503174, 52.583026, 12) %>%
  add_layer_switcher()

@crazycapivara nice, thanks!

Here it is now also possible to include more information. On the server side you need the graph.encoded_values property, see https://github.com/graphhopper/graphhopper/blob/master/config-example.yml#L19

And on the client side you request a sub set of them, see bf3ece8#diff-fdabf1e86cc9047458301bd084fc7a8b

Additionally we now include a different level of details in different zoom levels based on the road_class (OSM highway tag)

(Please note that in the screenshots still a background layer is used that draws the layers like city names and road names)

This just got a little bit more detailed :)

Thanks @easbar 87d8038