jonny/jonnybarnes.uk
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases 5 Packages Wiki Activity Actions

allow multiple maps to be added on a page

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

163
resources/assets/es6/mapbox-utils.js
View file

@ -38,84 +38,79 @@ 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) {
let dataLatitude = div.dataset.latitude;
let dataLongitude = div.dataset.longitude;
let dataId = div.dataset.id;
let data = window['geojson'+dataId];
if (data == null) {
data = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [dataLongitude, dataLatitude]
},
"properties": {
"title": "Current Location",
"icon": "circle-stroked",
"uri": "current-location"
}
}]
};
}
if (places != null) {
for (let place of places) {
let placeLongitude = parseLocation(place.location).longitude;
let placeLatitude = parseLocation(place.location).latitude;
data.features.push({
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [placeLongitude, placeLatitude]
},
"properties": {
"title": place.name,
"icon": "circle",
"uri": place.slug
}
});
}
}
if (! dataLongitude) {
let dataLongitude = position.coords.longitude;
}
if (! dataLatitude) {
let dataLatitude = position.coords.latitude;
}
let map = new mapboxgl.Map({
container: div,
style: 'mapbox://styles/mapbox/streets-v9',
center: [dataLongitude, dataLatitude],
zoom: 15
});
if (position == null) {
map.scrollZoom.disable();
}
map.addControl(new mapboxgl.NavigationControl());
div.appendChild(makeMapMenu(map));
map.on('load', function () {
map.addSource('points', {
"type": "geojson",
"data": data
});
map.addLayer({
"id": "points",
"interactive": true,
"type": "symbol",
"source": "points",
"layout": {
"icon-image": "{icon}-15",
"text-field": "{title}",
"text-offset": [0, 1]
export default function addMap(div, position = null, places = null) {
let dataLatitude = div.dataset.latitude;
let dataLongitude = div.dataset.longitude;
let dataId = div.dataset.id;
let data = window['geojson'+dataId];
if (data == null) {
data = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [dataLongitude, dataLatitude]
},
"properties": {
"title": "Current Location",
"icon": "circle-stroked",
"uri": "current-location"
}
}]
};
}
if (places != null) {
for (let place of places) {
let placeLongitude = parseLocation(place.location).longitude;
let placeLatitude = parseLocation(place.location).latitude;
data.features.push({
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [placeLongitude, placeLatitude]
},
"properties": {
"title": place.name,
"icon": "circle",
"uri": place.slug
}
});
}
}
if (position != null) {
let dataLongitude = position.coords.longitude;
let dataLatitude = position.coords.latitude;
}
let map = new mapboxgl.Map({
container: div,
style: 'mapbox://styles/mapbox/streets-v9',
center: [dataLongitude, dataLatitude],
zoom: 15
});
if (position == null) {
map.scrollZoom.disable();
}
map.addControl(new mapboxgl.NavigationControl());
div.appendChild(makeMapMenu(map));
map.on('load', function () {
map.addSource('points', {
"type": "geojson",
"data": data
});
map.addLayer({
"id": "points",
"interactive": true,
"type": "symbol",
"source": "points",
"layout": {
"icon-image": "{icon}-15",
"text-field": "{title}",
"text-offset": [0, 1]
}
});
});
if (position != null) {
map.on('click', function (e) {
let features = map.queryRenderedFeatures(e.point, {
layer: ['points']
@ -128,14 +123,14 @@ 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) {
bounds.extend(feature.geometry.coordinates);
}
map.fitBounds(bounds, { padding: 65});
}
return map;
}
if (data.features && data.features.length > 1) {
let bounds = new mapboxgl.LngLatBounds();
for (let feature of data.features) {
bounds.extend(feature.geometry.coordinates);
}
map.fitBounds(bounds, { padding: 65});
}
return map;
}

4
resources/assets/es6/nearby-places.js
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);

2
resources/assets/es6/newnote-getlocation.js
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);
});
}