Drive zone forecast with map search #131
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
When switching between the map and other views, Turbo caches the map. This leads to ghost versions of the map being retained, and in some cases the use of the forward and back buttons on the browser not working. This change stops Turbo from caching the page at all, fixing the problem.
Currently we have a single turbo frame that contains all of the forecast content. This allows us to update everything in one go. However, it also means replacing the map unnecessarily. That was fine previously, but now we want to use map panning and zooming to trigger changes to the forecast that won't work anymore. This change splits the frame into two, a top and a bottom (with the map inbetween them). We use a Turbo stream, triggered by the location selector form to update these frames.
When the map is panned or zoomed, get the new centre coordinates and look them up in the zone polygons. This may return more than one zone where there are overlapping zones of different levels. We choose between them using the zoom. The forecast is then updated to match that zone.
jdudley1123
force-pushed
the
integrated-search
branch
from
011370e to
f44a505
Compare
Remove the zone dropdown and instead drive zone selection with the search function of the map.
jdudley1123
force-pushed
the
integrated-search
branch
from
f44a505 to
dc83fa8
Compare
We need the zone to be a top level zone because the map starts zoomed out.
jdudley1123
force-pushed
the
integrated-search
branch
from
d6c2074 to
972f25a
Compare
|
To automatically rebase, you need to add a personal access token with the name Once this is done, you can try the |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Context
Currently the user specifies the location they want a forecast for by using a dropdown select. Separately there is a search control on the map to find places of interest. These two are not connected.
Trello: https://trello.com/c/00JLpGKY/110-location-search, https://trello.com/c/wk90EFVM/79-investigate-how-map-zooming-panning-might-impact-page-content
There is also an issue with ghost maps being retained when switching between views with Turbo, and in some cases the use of the forward and back buttons on the browser not working. Trello: https://trello.com/c/rhN3V2Fa/128-fix-ghost-maps-on-turbo-back-and-forth
Changes in this PR
This PR removes the zone select and makes the map search and pan change the forecast zone.
To achieve this we first have to change the way we render updates on the page. Currently we have a single Turbo frame that contains all of the forecast content. This allows us to update everything in one go when the location selector form changes. However, it also means replacing the map unnecessarily, and that is a unuseable when the map is driving those changes in the first place.
This PR splits the frame into two, a top and a bottom (with the map inbetween them). We use a Turbo stream, triggered by the location selector form to update these frames.
We then add two listeners, one for search and one for pan/zoom. When the map is panned or zoomed, get the new centre coordinates and look them up in the zone polygons. When the map is searched we get the coordinates of the selected search result. This may return more than one zone where there are overlapping zones of different levels. We choose between them using the zoom. If the coordinate falls outside of a zone, we ignore it and stay on the zone we were one before.
Screenshots of UI changes
Before
After