Merge branch 'release/0.1.4'
This commit is contained in:
commit
5847a26507
10 changed files with 91 additions and 93 deletions
|
@ -1,5 +1,8 @@
|
|||
# Changelog
|
||||
|
||||
## Version 0.1.4 (2017-01-27)
|
||||
- Fix: refactor code slightly to allow multiple maps to be added to a page
|
||||
|
||||
## Version 0.1.3 (2017-01-26)
|
||||
- cleanup frontend assets, update compressed versions
|
||||
|
||||
|
|
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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
Add a link
Reference in a new issue