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

refactor: remove redundancy between js maps

Browse Source
This commit is contained in:
James Graham
2021-01-15 16:33:34 +00:00
parent 59f717829a
commit f94627e4c8
2 changed files with 46 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,17 +1,6 @@
const marker_fill_alpha = 1.0;
const marker_edge_colour = 'white';
const marker_fill_colour = 'gray';
// Size of the arrow markers used on the map
const marker_scale = 9;
// Offset for the place type icon (multiplier for marker scale)
const marker_label_offset = 0.27 * marker_scale;
// Width and transparency for the edges of the markers
const marker_edge_alpha = 1.0;
const marker_edge_width = 1.0;
let marker = null; let marker = null;
let map = null; let search_markers = []
/** /**
* Position a map marker at the clicked location and update lat/long form fields. * Position a map marker at the clicked location and update lat/long form fields.
@@ -43,31 +32,13 @@ function selectLocation(event) {
document.getElementById('id_longitude').value = pos.lng(); document.getElementById('id_longitude').value = pos.lng();
} }
/** function displaySearchResults() {
* Initialise Google Maps element after library is loaded.
*/
function initMap() {
const centre_latlng = new google.maps.LatLng(settings.centre_lat | 0, settings.centre_lng | 0);
map = new google.maps.Map(
document.getElementById('map'), { zoom: settings.zoom, center: centre_latlng });
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() const places = search_box.getPlaces()
if (places.length === 0) return if (places.length === 0) return
for (const marker of markers) marker.setMap(null) for (const marker of markers) marker.setMap(null)
markers = [] search_markers = []
const bounds = new google.maps.LatLngBounds() const bounds = new google.maps.LatLngBounds()
for (const place of places) { for (const place of places) {
@@ -83,7 +54,7 @@ function initMap() {
scaledSize: new google.maps.Size(25, 25), scaledSize: new google.maps.Size(25, 25),
} }
markers.push( search_markers.push(
new google.maps.Marker({ new google.maps.Marker({
map, icon, title: place.name, position: place.geometry.location map, icon, title: place.name, position: place.geometry.location
}) })
@@ -98,7 +69,23 @@ function initMap() {
} }
map.fitBounds(bounds) map.fitBounds(bounds)
}
/**
* Initialise Google Maps element as a location picker.
*/
function initPicker() {
map = initMap()
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())
}) })
search_box.addListener('places_changed', displaySearchResults)
map.addListener('click', selectLocation) map.addListener('click', selectLocation)
} }

3
people/static/js/map.js
View File

@@ -64,7 +64,6 @@ function createMarker(map, marker_data) {
// The function called when Google Maps starts up // The function called when Google Maps starts up
function initMap() { function initMap() {
map = new google.maps.Map( map = new google.maps.Map(
// document.getElementById('map'), { zoom: settings.zoom, center: centre_latlng });
document.getElementById('map')); document.getElementById('map'));
const bounds = new google.maps.LatLngBounds() const bounds = new google.maps.LatLngBounds()
@@ -89,6 +88,8 @@ function initMap() {
} }
setTimeout(setMaxZoom, 100) setTimeout(setMaxZoom, 100)
return map
} }
/** /**