Merge branch 'release/0.1.4'

changelog.md

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

resources/assets/es6/mapbox-utils.js

@@ -38,84 +38,79 @@ const makeMapMenu = (map) => {
 }
 
 //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) {
             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;
 }

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

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