Allow pinpointing of locations on Explore map #583
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
struan
reviewed
Jul 16, 2024
Uses the Leaflet GeoSearch plugin, and OSM Nominatim geocoder, to allow users to place a marker on the map, at the requested location. Handy when you know the name of a place, but not which constituency it’s in! Once the marker is plotted onto the map, we zoom to it. This revealed the same Vue.js proxying issue we’ve encountered in other projects. Namely: when you store a `Leaflet.Map` instance in the Vue.js state (making it accessible inside your Vue methods as, say, `this.map`), Vue _actually_ stores a wrapped version of the original instance, to enable its clever reactive features. This “proxy” object, though, breaks some internal Leaflet stuff, including `animateZoom` (see https://stackoverflow.com/questions/65981712), which results in broken zooming/panning. The recommendation from the Vue.js docs is to “un-wrap” that proxy object when you need to work with it, replacing `this.map` with `toRaw(this.map)`. I didn’t _need_ to use `toRaw()` in every place that I’ve used it here (just inside the `geosearch/showlocation` callback would have done, because that’s the only place we _currently_ zoom to bounds), but I figure it’s simpler to use it _everywhere_ we refer to `this.map` than to use it inconsitently and force future maintainers to keep making the decision as to whether it’s needed or not.
zarino
force-pushed
the
in-map-location-search
branch
from
01ae69a to
04656f9
Compare
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.
Uses the Leaflet GeoSearch plugin, and OSM Nominatim geocoder, to allow users to place a marker on the map, at the requested location.
Handy when you know the name of a place, but not which constituency it’s in!
Part of this work required me to have access to
this.mapinside a callback function, which revealed the same Vue.js proxying issue we’ve encountered in other projects. The fix is to ensure we “un-proxy” all referencesthis.mapwithtoRaw(this.map).