me/breccia-mapper
1
0
Fork 0
mirror of https://github.com/Southampton-RSG/breccia-mapper.git synced 2026-03-03 03:17:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add location search to picker

Browse Source 
Requires API key with Google Places API access
Currently untested
This commit is contained in:
James Graham
2020-12-16 12:09:10 +00:00
parent 9e6d1a495e
commit 1a27774177
2 changed files with 61 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
people/static/js/location_picker.js
View File

@@ -12,6 +12,10 @@ const marker_edge_width = 1.0;
let marker = null;
/**
* Position a map marker at the clicked location and update lat/long form fields.
* @param {Event} event - Click event from a Google Map.
*/
function selectLocation(event) {
if (marker === null) {
// Generate a new marker
@@ -34,16 +38,66 @@ function selectLocation(event) {
}
const pos = marker.getPosition();
console.log(pos.lat(), pos.lng());
document.getElementById('id_latitude').value = pos.lat();
document.getElementById('id_longitude').value = pos.lng();
}
// The function called when Google Maps starts up
/**
* Initialise Google Maps element after library is loaded.
*/
function initMap() {
const centre_latlng = new google.maps.LatLng(settings.centre_lat, settings.centre_lng);
const centre_latlng = new google.maps.LatLng(settings.centre_lat | 0, settings.centre_lng | 0);
const map = new google.maps.Map(
document.getElementById('map'), { zoom: settings.zoom, center: centre_latlng });
google.maps.event.addListener(map, 'click', selectLocation)
const search_input = document.getElementById('location-search')
const search_box = new google.maps.places.SearchBox(search_input)
map.controls[google.maps.ControlPosition.TOP_LEFT].push(search_input)
map.addListener('bounds_changed', () => {
search_box.setBounds(map.getBounds())
})
let markers = []
search_box.addListener('places_changed', () => {
const places = search_box.getPlaces()
if (places.length === 0) return
for (const marker of markers) marker.setMap(null)
markers = []
const bounds = new google.maps.LatLngBounds()
for (const place of places) {
if (!place.geometry) {
console.error('Place contains no geometry')
continue
}
const icon = {
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25),
}
markers.push(
new google.maps.Marker({
map, icon, title: place.name, position: place.geometry.location
})
)
if (place.geometry.viewport) {
bounds.union(place.geometry.viewport)
} else {
bounds.extend(place.geometry.location)
}
}
map.fitBounds(bounds)
})
map.addListener('click', selectLocation)
}