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.

Sign up for GitHub

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

Jump to bottom

Mapbox performance #18

Closed
mgmeedendorp opened this issue Oct 7, 2018 · 10 comments
Closed

Mapbox performance #18

mgmeedendorp opened this issue Oct 7, 2018 · 10 comments
Assignees
@mgmeedendorp
Labels
enhancement Enhancement to an existing feature

Comments

@mgmeedendorp
Copy link
Contributor

mgmeedendorp commented Oct 7, 2018 •
edited
Loading

De kaart is (met Holter internet iig) iets waar ik bij elke pagina op moet wachten. De tiles worden niet offline gecached. Dit schijnt mogelijk te zijn met service workers, zie mapbox/mapbox-gl-js#4326

Er wordt een voorbeeld bij genoemd, die op mijn telefoon en stuk sneller laad na de eerste keer
@mgmeedendorp mgmeedendorp added the enhancement Enhancement to an existing feature label Oct 7, 2018
@Atema
Copy link
Contributor

Atema commented Oct 7, 2018 via email

@Atema
Copy link
Contributor

Atema commented Oct 7, 2018 via email

@mgmeedendorp mgmeedendorp self-assigned this Oct 12, 2018
@mgmeedendorp
Copy link
Contributor Author

mgmeedendorp commented Oct 12, 2018 •
edited
Loading

Ik ben hier gisteren en vandaag mee bezig geweest, maar ik krijg de types niet voor elkaar, er lijkt vrijwel geen ondersteuning voor te zijn in typescript, omdat het een experimental feature is. Zou jij hier misschien nog naar willen kijken? De service worker moet gecompiled worden naar een apart .js bestand wat de browser apart weer gaat downloaden. Ik heb het toegevoegd aan de gulp bestanden.

Het cachen is het makkelijkste via de Cache API, alleen beschikbaar voor service workers.

Resources over service workers:
MDN | Service Worker API
MDN | Using Service Workers
MDN | Cache Web API

@mgmeedendorp
Copy link
Contributor Author

mgmeedendorp commented Oct 12, 2018 •
edited
Loading

Alle requests naar tiles.mapbox.com en api.mapbox.com worden nu gecached door de service worker (als gulp naar behoren werkt). Zie: f1ed211

Het cachen versnelt het laden van de pagina enorm op langzame internetverbindingen.

Ondanks het cachen duurt het nog steeds erg lang (soms > 10s) voordat de kaart voor het eerst getekend wordt, en in mijn ervaring blijft de kaart aardig langzaam. Voorbeelden van snellere kaarten die ik op andere websites tegenkom gebruiken dan ook veelal geen mapbox-gl-js, maar openlayers (voorbeeld) of mapquest (voorbeeld met caching), die beide ook kunnen werken icm met mapbox vector tiles.

Zie ook (mapbox/mapbox-gl-js#3153)

Het lijkt me een goed idee om te kijken naar (snellere) alternatieven voor mapbox, helemaal omdat we nu nog niet zoveel met de kaart doen en nog makkelijk kunnen veranderen.

@mgmeedendorp mgmeedendorp changed the title Mapbox caching Mapbox performance Oct 12, 2018
@mgmeedendorp
Copy link
Contributor Author

mgmeedendorp commented Oct 13, 2018 •
edited
Loading

Het is met openlayers ook mogelijk om de kaart als een globe weer te geven, wat ik persoonlijk ook heel mooi vind. Zie: link. Dan is het echter weer niet mogelijk om mapbox tiles te gebruiken :(

@mgmeedendorp
Copy link
Contributor Author

mgmeedendorp commented Oct 15, 2018 •
edited
Loading

Nadat ik - terwijl ik andere dingen moest doen - wat over kaarten gelezen heb lijkt me dit de mooiste oplossing:

De kaart layer van Mapbox, met de API van OpenLayers, getekend op een globe met Cesium-OL (voorbeeld, selecteer rechtsboven mapbox layer)

Het is ook mogelijk om een terrain layer toe te voegen, waardoor bergen en sommige gebouwen ook in relief komen.

@Atema, wat denk jij van dit hele verhaal?

@mgmeedendorp
Copy link
Contributor Author

Andere opties zijn vrijwel onmogelijk met mapbox styles.

@mgmeedendorp
Copy link
Contributor Author

Ik zie dat wij mapbox-gl versie 0.51.2 gebruiken, terwijl onderhand 1.3.1 al uit is. Met wat geluk helpt dit in de performance.

Ik lees in de changelog ook dat er standaard tile caching in mapbox zit, wat onze service worker misschien wat overkill maakt. Hier moet ook naar worden gekeken.

@mgmeedendorp mgmeedendorp reopened this Sep 12, 2019
@mgmeedendorp
Copy link
Contributor Author

Na de links in de eerste comment van deze issue gelezen te hebben lijken service workers nog steeds een goede aanvulling op de default caching

Atema added a commit that referenced this issue Dec 2, 2019
@Atema
Get rid of websockets, use http request instead
d0d66ef 
- Binary http request to /:expeditie/kaart/binary
- ServiceWorker caches kaart/binary requests using location count
  and last location id (resolves #37)
- Removed service worker for tile caching (double caching, see #18,
  perhaps re-implement differently later)
- Map starts further zoomed in for better performance (fewer tiles
  to load before jumping)
@Atema
Copy link
Contributor

Atema commented Dec 2, 2019

Na d0d66ef is het sneller

@Atema Atema closed this as completed Dec 2, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mgmeedendorp mgmeedendorp

Labels
enhancement Enhancement to an existing feature
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Atema @mgmeedendorp