transitive overlay uses fonts which might not be available on the tile server (leg geometries are sometimes not displayed / incomplete / rendering glitch?)

[amenk]

We are using OTP react redux in the dev branch with vector tiles.

The trip leg geometries are not displayed reliably. Tested in a recent Chrome and Firefox browser.

The green part is added for illustration - here the blue line is missing.

However, when zooming in the part appears:

When zooming out, other parts disappear.

Is this a known issue? I could not find similar issues in the search.

[miles-grant-ibigroup]

I have yet to see this issue! It might be a priority issue with the tiles? We use default priority on the custom overlays, but your tiles may have something else set to a higher priority? This is my only guess as to what could be going on. We have never seen this before.

[amenk]

@miles-grant-ibigroup okay, thanks. That could be it.

Do you have a hint how those priorities can be checked?

For the record: We use https://africa.tiles.openplaceguide.org/ ( a makinamaps instance) on https://web.addismaptransit.com where we spot this issue.

[miles-grant-ibigroup]

I wish I knew enough about MapLibre to tell you... I do know that if you peek at the transitive overlay you'll see where we define the layers and in that React layer component you should be able to set a priority or importance or similar. Hopefully that fixes things for you! I think we'd accept that change as well, since it would increase the layer's compatibility with different base tiles!

[amenk]

Okay, maybe we need to set a sort-key https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#layout-line-line-sort-key
somewhere around here: https://github.com/opentripplanner/otp-ui/blob/master/packages/transitive-overlay/src/index.tsx#L237

[miles-grant-ibigroup]

Yes this is what I was thinking of! Thanks for figuring that one out. Please let me know if this fixes the issue for you!

[amenk]

@miles-grant-ibigroup which vector tile provider are you using in your installations where this is working?

I tried a some things, for example adding

"line-sort-key": 1000000 

here https://github.com/opentripplanner/otp-ui/blob/2f45f1e2369ff1d78028a0936776c182928dc578/packages/transitive-overlay/src/index.tsx#L259

but no effect.

It looks like the Canvas is hard to debug, a while ago Chrome and Firefox had Canvas debuggers but they were all removed.

The layers at transitive overlay all don't define any priority, so I believe everything should equally be displayed on top of the base map. Maybe this is a bug in Maplibre GL?

[amenk]

Asked over there: maplibre/maplibre-gl-js#2172

[amenk]

Okay, not a bug in maplibre-gl-js :)

The overlay generated by OTP-ReactRedux requests "text-font": ["Open Sans Bold", "Arial Unicode MS Bold"], which is not available on the tileserver we use, this caused the hick-ups in the rendering. If I use a font which is present on the server, it works flawlessly.

https://github.com/opentripplanner/otp-ui/blob/2f45f1e2369ff1d78028a0936776c182928dc578/packages/transitive-overlay/src/index.tsx#L73

there is also a fixme there - so we actually should use a fond which is available on the tile server or make this configurable?

[amenk]

There is already a config option for the font:

  transitive:
    styles:
      labels:
        font-family: Hind, sans-serif

otp-react-redux/example-config.yml

Line 137 in a7c1c57

# font-family: Hind, sans-serif

But I think this is not used - maybe this is from pre-vectortiles-times?

[amenk]

I was able to solve this using serveAllFonts (maptiler/tileserver-gl#391)
Even I cannot add the Arial Unicode MS to the tile server, because it's a licensed font (openmaptiles/fonts#1) it is not really necessary. The fontstack fallback will just serve Open Sans. It did not do this before because - I believe - it's not used in the base map'S styles. But the serveAllFonts option fixes that.

[miles-grant-ibigroup]

Thanks for all your detailed reporting! We'll try to set some more sensible defaults in the example config! Please let us know/open a PR if there's any other changes you think might be sensible!

[amenk]

Unfortunately the used font face seems to be not configurable at the moment.

[miles-grant-ibigroup]

Ah that makes sense good to know -- the long term plan is to fully transition https://github.com/conveyal/transitive.js/ to MapLibre. We'll keep this in mind for when this happens!