Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

101 Restyle map for a more muted appearance using vector tiles from Maptile #72

Merged
merged 2 commits into from
Oct 31, 2024

Conversation

edavey
Copy link
Collaborator

@edavey edavey commented Oct 31, 2024

NB: this is to be merged after the big caching PR 71. This work
comprises just the final 3 commits!


Show "Positron" style of OpenStreetMap vector tiles

We now display our OpenStreetMap layer in
vector form rather than with raster tiles. This makes for a smoother
UX but comes at a small cost of increased processing on the user's
device -- so we need to verify that performance is acceptable for
all users.

See:

https://www.maptiler.com/news/2019/02/what-are-vector-tiles-and-why-you-should-care/

For more details on using Maptiler, particularly with
Leaflet:

Other styles

Another muted style which we looked at is "Dataviz": https://www.maptiler.com/maps/#style=dataviz&mode=2d&position=10.44/51.5031/-0.0756

Dependencies

  • set MAPTILER_API_KEY on Heroku. The production key is limited to our Heroku host (air-text-3e4548b53179.herokuapp.com)

Screenshots

Essex

essex

Zoomed in to Chelmsford

chelmsford

@maptiler/leaflet-maptilersdk

This will allow us to display our OpenStreetMap layer in
vector form rather than with raster tiles. See:

https://www.maptiler.com/news/2019/02/what-are-vector-tiles-and-why-you-should-care/

For more details on using Maptiler, particularly with
Leaflet:

- https://docs.maptiler.com/leaflet/examples/vector-tiles-in-leaflet-js/
- https://docs.maptiler.com/sdk-js/
- https://github.com/maplibre/maplibre-gl-leaflet/
- https://github.com/maptiler/leaflet-maptilersdk
We use the "positron" style:

https://www.maptiler.com/maps/#style=positron&mode=2d&position=10.44/51.5031/-0.0756

We introduce a new `MAPTILER_API_KEY` environment variable
for our Maptiler service. The production key for Heroku will
only work for request originating from our host:

`air-text-3e4548b53179.herokuapp.com`

The development key is in 1Password
@edavey
Copy link
Collaborator Author

edavey commented Oct 31, 2024

Copy link
Contributor

@patrickjfl patrickjfl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool 🚀

@edavey edavey merged commit 275674b into develop Oct 31, 2024
2 checks passed
@edavey edavey deleted the 101-style-map branch October 31, 2024 16:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants