allow multiple maps to be added on a page

This commit is contained in:
Jonny Barnes 2017-01-26 19:51:11 +00:00
parent 264078d058
commit 6cbe62bad2
3 changed files with 82 additions and 87 deletions

View file

@ -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;
}
}

View file

@ -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);

View file

@ -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);
});
}