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 //the main function
export default function addMap(position = null, places = null) { export default function addMap(div, position = null, places = null) {
//console.log(position); let dataLatitude = div.dataset.latitude;
//console.log(places); let dataLongitude = div.dataset.longitude;
let mapDivs = document.querySelectorAll('.map'); let dataId = div.dataset.id;
for (let div of mapDivs) { let data = window['geojson'+dataId];
let dataLatitude = div.dataset.latitude; if (data == null) {
let dataLongitude = div.dataset.longitude; data = {
let dataId = div.dataset.id; "type": "FeatureCollection",
let data = window['geojson'+dataId]; "features": [{
if (data == null) { "type": "Feature",
data = { "geometry": {
"type": "FeatureCollection", "type": "Point",
"features": [{ "coordinates": [dataLongitude, dataLatitude]
"type": "Feature", },
"geometry": { "properties": {
"type": "Point", "title": "Current Location",
"coordinates": [dataLongitude, dataLatitude] "icon": "circle-stroked",
}, "uri": "current-location"
"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;
if (places != null) { data.features.push({
for (let place of places) { "type": "Feature",
let placeLongitude = parseLocation(place.location).longitude; "geometry": {
let placeLatitude = parseLocation(place.location).latitude; "type": "Point",
data.features.push({ "coordinates": [placeLongitude, placeLatitude]
"type": "Feature", },
"geometry": { "properties": {
"type": "Point", "title": place.name,
"coordinates": [placeLongitude, placeLatitude] "icon": "circle",
}, "uri": place.slug
"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]
} }
}); });
}
}
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) { map.on('click', function (e) {
let features = map.queryRenderedFeatures(e.point, { let features = map.queryRenderedFeatures(e.point, {
layer: ['points'] layer: ['points']
@ -128,14 +123,14 @@ export default function addMap(position = null, places = null) {
selectPlaceInForm(features[0].properties.uri); 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 //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, { fetch('/places/near/' + position.coords.latitude + '/' + position.coords.longitude + '?u=' + position.coords.accuracy, {
credentials: 'same-origin', credentials: 'same-origin',
method: 'get' method: 'get'
@ -65,7 +65,7 @@ export default function addMapWithPlaces(position) {
if (json.places.length > 0) { if (json.places.length > 0) {
places = json.places; places = json.places;
} }
let map = addMap(position, places); let map = addMap(div, position, places);
//create a containting div for flexbox styling purposes //create a containting div for flexbox styling purposes
let flexboxDiv = document.createElement('div'); let flexboxDiv = document.createElement('div');
let options = makeOptionsForForm(map, position, places); 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.latitude = position.coords.latitude;
mapDiv.dataset.longitude = position.coords.longitude; mapDiv.dataset.longitude = position.coords.longitude;
mapDiv.dataset.accuracy = position.coords.accuracy; mapDiv.dataset.accuracy = position.coords.accuracy;
addMapWithPlaces(position); addMapWithPlaces(mapDiv, position);
}); });
} }