allow multiple maps to be added on a page
This commit is contained in:
parent
264078d058
commit
6cbe62bad2
3 changed files with 82 additions and 87 deletions
|
@ -38,11 +38,7 @@ const makeMapMenu = (map) => {
|
|||
}
|
||||
|
||||
//the main function
|
||||
export default function addMap(position = null, places = null) {
|
||||
//console.log(position);
|
||||
//console.log(places);
|
||||
let mapDivs = document.querySelectorAll('.map');
|
||||
for (let div of mapDivs) {
|
||||
export default function addMap(div, position = null, places = null) {
|
||||
let dataLatitude = div.dataset.latitude;
|
||||
let dataLongitude = div.dataset.longitude;
|
||||
let dataId = div.dataset.id;
|
||||
|
@ -82,10 +78,8 @@ export default function addMap(position = null, places = null) {
|
|||
});
|
||||
}
|
||||
}
|
||||
if (! dataLongitude) {
|
||||
if (position != null) {
|
||||
let dataLongitude = position.coords.longitude;
|
||||
}
|
||||
if (! dataLatitude) {
|
||||
let dataLatitude = position.coords.latitude;
|
||||
}
|
||||
let map = new mapboxgl.Map({
|
||||
|
@ -116,6 +110,7 @@ export default function addMap(position = null, places = null) {
|
|||
}
|
||||
});
|
||||
});
|
||||
if (position != null) {
|
||||
map.on('click', function (e) {
|
||||
let features = map.queryRenderedFeatures(e.point, {
|
||||
layer: ['points']
|
||||
|
@ -128,6 +123,7 @@ export default function addMap(position = null, places = null) {
|
|||
selectPlaceInForm(features[0].properties.uri);
|
||||
}
|
||||
});
|
||||
}
|
||||
if (data.features && data.features.length > 1) {
|
||||
let bounds = new mapboxgl.LngLatBounds();
|
||||
for (let feature of data.features) {
|
||||
|
@ -137,5 +133,4 @@ export default function addMap(position = null, places = null) {
|
|||
}
|
||||
|
||||
return map;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -45,7 +45,7 @@ const makeOptionsForForm = (map, position, places = null) => {
|
|||
}
|
||||
|
||||
//position is output of navigator.geolocation call
|
||||
export default function addMapWithPlaces(position) {
|
||||
export default function addMapWithPlaces(div, position) {
|
||||
fetch('/places/near/' + position.coords.latitude + '/' + position.coords.longitude + '?u=' + position.coords.accuracy, {
|
||||
credentials: 'same-origin',
|
||||
method: 'get'
|
||||
|
@ -65,7 +65,7 @@ export default function addMapWithPlaces(position) {
|
|||
if (json.places.length > 0) {
|
||||
places = json.places;
|
||||
}
|
||||
let map = addMap(position, places);
|
||||
let map = addMap(div, position, places);
|
||||
//create a containting div for flexbox styling purposes
|
||||
let flexboxDiv = document.createElement('div');
|
||||
let options = makeOptionsForForm(map, position, places);
|
||||
|
|
|
@ -11,6 +11,6 @@ export default function getLocation() {
|
|||
mapDiv.dataset.latitude = position.coords.latitude;
|
||||
mapDiv.dataset.longitude = position.coords.longitude;
|
||||
mapDiv.dataset.accuracy = position.coords.accuracy;
|
||||
addMapWithPlaces(position);
|
||||
addMapWithPlaces(mapDiv, position);
|
||||
});
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue