755 : Map view does not update

app/javascript/pages/Browse.vue

@@ -2,8 +2,9 @@
   <div>
     <div class="intro">
       <h1 class="title">Community Contributions</h1>
-      <p class="subtitle is-5">Below are contributions (asks, offers, and community resources) that are available.
-        <br>You can filter through them by choosing filter options on the side.
+      <p class="subtitle is-5">
+        Below are contributions (asks, offers, and community resources) that are available.
+        <br />You can filter through them by choosing filter options on the side.
       </p>
     </div>
 
@@ -18,7 +19,12 @@
       <section>
         <BrowserSelector :browser="browser" @clicked="browser = $event" />
       </section>
-      <component :is="browser" :contributions="activeContributions" class="row" accessToken="pk.eyJ1IjoibXV0dWFsLWFpZC1hcHAiLCJhIjoiY2tmZTBvd3UwMDBhbTJ4cDlic2JmMWZoaiJ9.rWscBjdl1SMT5N0yekIJYg"/>
+      <component
+        :is="browser"
+        :contributions="activeContributions"
+        class="row"
+        accessToken="pk.eyJ1IjoibXV0dWFsLWFpZC1hcHAiLCJhIjoiY2tmZTBvd3UwMDBhbTJ4cDlic2JmMWZoaiJ9.rWscBjdl1SMT5N0yekIJYg"
+      />
       <section class="has-text-centered mt-2">
         <h2 class="is-size-4 mb-1">Can't find what you're looking for?</h2>
         <div>
@@ -48,12 +54,14 @@ export default {
   },
   props: {
     contributions: {type: Array},
-    filterGroupings: {type: Array, default: ()=>[]},
+    filterGroupings: {type: Array, default: () => []},
     initialFilters: {
       type: Array,
       default: function () {
         return [].concat(
-          ...this.filterGroupings.map((fGrouping) => fGrouping.filter_options.map((filter_option) => filter_option.id))
+          ...this.filterGroupings.map((fGrouping) =>
+            fGrouping.filter_options.map((filter_option) => filter_option.id)
+          )
         )
       },
     },
@@ -92,7 +100,7 @@ export default {
 </script>
 
 <style scoped>
-  a {
-    margin: 0 0.5em;
-  }
-</style>
+a {
+  margin: 0 0.5em;
+}
+</style>

app/javascript/pages/browse/MapBrowser.vue

@@ -2,7 +2,7 @@
   <section class="MapBrowser">
     <!-- FIXME Pull access-token via environment variable -->
     <mapbox
-      :access-token= this.accessToken
+      :access-token="this.accessToken"
       :map-options="{
         style: 'mapbox://styles/mapbox/streets-v11',
         center: [-96, 37.8],
@@ -17,119 +17,169 @@
       @map-click:points="clicked"
       @geolocate-error="geolocateError"
       @geolocate-geolocate="geolocate"
+      @map-init="initialized"
+      v-if="contributions.length > 0"
     />
+
+    <div v-if="contributions.length === 0">
+      <p style="text-align: center;">No match found.</p>
+    </div>
   </section>
 </template>
 
 <script>
-  import Mapbox from 'mapbox-gl-vue'
-  const mbxClient = require('@mapbox/mapbox-sdk');
-  const geoCoding = require('@mapbox/mapbox-sdk/services/geocoding');
-  //  FIXME Attempt to pass accessToken in script tag as seen in line 6
-  const baseClient = mbxClient({ accessToken: "pk.eyJ1IjoibXV0dWFsLWFpZC1hcHAiLCJhIjoiY2tmZTBvd3UwMDBhbTJ4cDlic2JmMWZoaiJ9.rWscBjdl1SMT5N0yekIJYg"});
-  const geoCodingService = geoCoding(baseClient)
+import Mapbox from 'mapbox-gl-vue'
+const mbxClient = require('@mapbox/mapbox-sdk')
+const geoCoding = require('@mapbox/mapbox-sdk/services/geocoding')
+//  FIXME Attempt to pass accessToken in script tag as seen in line 6
+const baseClient = mbxClient({
+  accessToken:
+    'pk.eyJ1IjoibXV0dWFsLWFpZC1hcHAiLCJhIjoiY2tmZTBvd3UwMDBhbTJ4cDlic2JmMWZoaiJ9.rWscBjdl1SMT5N0yekIJYg',
+})
+const geoCodingService = geoCoding(baseClient)
 
-  export default {
-    props: {
-      accessToken: String,
-      contributions: {type: Array, default: () => []},
-      filters: Object,
+export default {
+  props: {
+    accessToken: String,
+    contributions: {type: Array, default: () => []},
+    filters: Object,
+  },
+  components: {Mapbox},
+  methods: {
+    zoomend(map, e) {
+      console.log('Map zoomed')
     },
-    components: { Mapbox },
-    methods: {
-      loaded(map) {
-        let geojson = {
-          'type': 'FeatureCollection',
-          'features': []
-        }
-
-        const buildGeoJson = () => {
-          return new Promise((resolve) => {
-            let forwarded = 0
+    clicked(map, e) {
+      const title = e.features[0].properties.title
+      console.log(title)
+    },
+    geolocateError(control, positionError) {
+      console.log(positionError)
+    },
+    geolocate(control, position) {
+      console.log(`User position: ${position.coords.latitude}, ${position.coords.longitude}`)
+    },
+    geocode(contributions) {
+      let geojson = {
+        type: 'FeatureCollection',
+        features: [],
+      }
 
-            this.contributions.forEach(contribution => {
-              geoCodingService.forwardGeocode({
-                query: `${contribution.location && contribution.location.street_address ? contribution.location.street_address : ""} ${contribution.service_area.location.city} ${contribution.service_area.location.state} ${contribution.service_area.location.zip_code}`,
-                limit: 1
-              }).send()
-                .then(response => {
-                  ++forwarded
+      return new Promise((resolve) => {
+        let forwarded = 0
+        if (contributions.length == 0) resolve(geojson)
+        contributions.forEach((contribution) => {
+          geoCodingService
+            .forwardGeocode({
+              query: `${
+                contribution.location && contribution.location.street_address
+                  ? contribution.location.street_address
+                  : ''
+              } ${contribution.service_area.location.city} ${
+                contribution.service_area.location.state
+              } ${contribution.service_area.location.zip_code}`,
+              limit: 1,
+            })
+            .send()
+            .then((response) => {
+              ++forwarded
 
-                  const match = response.body;
+              const match = response.body
 
-                  geojson.features = [ ...geojson.features, {
-                    'type': 'Feature',
-                    'properties': {
-                      'title': contribution.name,
-                      'description': contribution.description ? contribution.description : "",
-                      'categoryTag': contribution.category_tags[0].name,
-                      'urgency': contribution.urgency ? contribution.urgency : "",
-                      'icon': 'harbor',
-                      'iconSize': [50, 50],
-                      'contributionType': contribution.contribution_type,
-                    },
-                    'geometry': {
-                      'type': 'Point',
-                      'coordinates': match.features[0].center
-                    }
-                  } ]
-                })
-                .then(() => {
-                  if (forwarded === this.contributions.length) resolve()
-                })
-              })
+              geojson.features = [
+                ...geojson.features,
+                {
+                  type: 'Feature',
+                  properties: {
+                    title: contribution.name,
+                    description: contribution.description ? contribution.description : '',
+                    categoryTag: contribution.category_tags[0].name,
+                    urgency: contribution.urgency ? contribution.urgency : '',
+                    icon: 'harbor',
+                    iconSize: [50, 50],
+                    contributionType: contribution.contribution_type,
+                  },
+                  geometry: {
+                    type: 'Point',
+                    coordinates: match.features[0].center,
+                  },
+                },
+              ]
             })
-        }
-
-        buildGeoJson()
-          .then(() => {
-            map.addLayer({
-              id: 'points',
-              type: 'symbol',
-              source: {
-                type: 'geojson',
-                data: geojson,
-              },
-              layout: {
-                'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
-                'text-offset': [0, 0.6],
-                'text-anchor': 'top',
-              },
+            .then(() => {
+              if (forwarded === contributions.length) resolve(geojson)
             })
+            .catch((e) => console.log(e))
+        })
+      })
+    },
+    add_markers: function (geojson, map) {
+      if (map.getLayer('points')) {
+        map.removeLayer('points')
+      }
 
-            var bounds = new mapboxgl.LngLatBounds();
-            geojson.features.forEach(function (marker) {
-              var el = document.createElement('div');
-              el.className = 'marker ' + marker.properties.contributionType.toLowerCase() + '-marker';
-              el.style.width = marker.properties.iconSize[0] + 'px';
-              el.style.height = marker.properties.iconSize[1] + 'px';
+      if (map.getSource('points')) {
+        map.removeSource('points')
+      }
+      map.addLayer({
+        id: 'points',
+        type: 'symbol',
+        source: {
+          type: 'geojson',
+          data: geojson,
+        },
+        layout: {
+          'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
+          'text-offset': [0, 0.6],
+          'text-anchor': 'top',
+        },
+      })
 
-              const newMarker = new mapboxgl.Marker(el)
-                .setLngLat(marker.geometry.coordinates)
-                .setPopup(new mapboxgl.Popup({ offset: 35 })
-                .setHTML('<h3>' + marker.properties.title + '</h3><p>' + marker.properties.categoryTag + '</p><p>' + marker.properties.description + '</p>'))
+      var bounds = new mapboxgl.LngLatBounds()
+      geojson.features.forEach((marker) => {
+        var el = document.createElement('div')
+        el.className = 'marker ' + marker.properties.contributionType.toLowerCase() + '-marker'
+        el.style.width = marker.properties.iconSize[0] + 'px'
+        el.style.height = marker.properties.iconSize[1] + 'px'
 
-              newMarker.addTo(map)
-              bounds.extend(marker.geometry.coordinates);
-            })
-            map.fitBounds(bounds, { padding: 50 });
-          })
-      },
-      zoomend(map, e) {
-        console.log('Map zoomed')
-      },
-      clicked(map, e) {
-        const title = e.features[0].properties.title
-        console.log(title)
-      },
-      geolocateError(control, positionError) {
-        console.log(positionError)
-      },
-      geolocate(control, position) {
-        console.log(
-          `User position: ${position.coords.latitude}, ${position.coords.longitude}`
-        )
-      },
+        const newMarker = new mapboxgl.Marker(el)
+          .setLngLat(marker.geometry.coordinates)
+          .setPopup(
+            new mapboxgl.Popup({offset: 35}).setHTML(
+              '<h3>' +
+                marker.properties.title +
+                '</h3><p>' +
+                marker.properties.categoryTag +
+                '</p><p>' +
+                marker.properties.description +
+                '</p>'
+            )
+          )
+
+        newMarker.addTo(map)
+        bounds.extend(marker.geometry.coordinates)
+      })
+      map.fitBounds(bounds, {padding: 50})
+    },
+
+    loaded: function () {
+      this.geocode(this.contributions).then((geojson) => this.add_markers(geojson, this.map))
+    },
+    initialized: function (map) {
+      this.map = map
+    },
+  },
+  data() {
+    return {
+      map: null,
+    }
+  },
+  watch: {
+    contributions: function (new_val, old_val) {
+      if (new_val.length > 0 && !(JSON.stringify(new_val) === JSON.stringify(old_val))) {
+        this.geocode(new_val).then((geojson) => this.add_markers(geojson, this.map))
+      }
     },
-  }
+  },
+}
 </script>