From 6cbe62bad2fd3c0188c7cb0eee9410d5ee56e42d Mon Sep 17 00:00:00 2001 From: Jonny Barnes Date: Thu, 26 Jan 2017 19:51:11 +0000 Subject: [PATCH] allow multiple maps to be added on a page --- resources/assets/es6/mapbox-utils.js | 163 ++++++++++---------- resources/assets/es6/nearby-places.js | 4 +- resources/assets/es6/newnote-getlocation.js | 2 +- 3 files changed, 82 insertions(+), 87 deletions(-) diff --git a/resources/assets/es6/mapbox-utils.js b/resources/assets/es6/mapbox-utils.js index 8dbc265a..2c31be8e 100644 --- a/resources/assets/es6/mapbox-utils.js +++ b/resources/assets/es6/mapbox-utils.js @@ -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; } diff --git a/resources/assets/es6/nearby-places.js b/resources/assets/es6/nearby-places.js index 5d71df64..130928ae 100644 --- a/resources/assets/es6/nearby-places.js +++ b/resources/assets/es6/nearby-places.js @@ -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); diff --git a/resources/assets/es6/newnote-getlocation.js b/resources/assets/es6/newnote-getlocation.js index 502d4a9a..769291c2 100644 --- a/resources/assets/es6/newnote-getlocation.js +++ b/resources/assets/es6/newnote-getlocation.js @@ -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); }); }