Feature/add contributions to map

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 ## [Unreleased]
+### Enhancements
+* Add map to contributions page that dynamically adds pins for Asks/Offers
+
 ### Breaking changes
 * Users can now register themselves (was previously blocked by #660)
 

app/assets/stylesheets/application.scss

@@ -8,6 +8,7 @@
 @import './listings';  // TODO: remove this once listings/new is refactored
 
 @import './mapbox-gl';
+@import './maps';
 
  // TODO: use has-text-centered instead
 .text-center {

app/assets/stylesheets/maps.scss

@@ -0,0 +1,30 @@
+#map {
+  width: 100%;
+  height: 500px;
+}
+
+.marker {
+  background-size: cover;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.ask-marker {
+  background-image: url('~./../images/ask.png');
+}
+
+.offer-marker {
+  background-image: url('~./../images/offer.png');
+}
+
+.mapboxgl-popup {
+  max-width: 200px;
+}
+
+.mapboxgl-popup-content {
+  text-align: center;
+  font-family: 'Open Sans', sans-serif;
+  h3 { font-weight: bold; }
+}

app/blueprints/contribution_blueprint.rb

@@ -1,14 +1,15 @@
 class ContributionBlueprint < Blueprinter::Base
   identifier :id
   association :categories_for_tags, name: :category_tags, blueprint: DefaultBlueprint
-  association :service_area, blueprint: DefaultBlueprint
+  association :service_area, blueprint: ServiceAreaBlueprint, view: :with_location
   association :contact_types, blueprint: DefaultBlueprint do |contribution, _options|
     [contribution.person.preferred_contact_method]
   end
   association :urgency, blueprint: DefaultBlueprint do |contribution, _options|
     UrgencyLevel.find(contribution.urgency_level_id)
   end
-  fields :title, :description, :inexhaustible
+  association :location, blueprint: LocationBlueprint
+  fields :title, :description, :inexhaustible, :name
   field :created_at do |contribution, _options|
     contribution.created_at.to_f * 1000 # Javascript wants miliseconds, not seconds
   end

app/blueprints/service_area_blueprint.rb

@@ -1,7 +1,7 @@
 class ServiceAreaBlueprint < Blueprinter::Base
   identifier :id
 
-  fields :name, :description
+  fields :name, :description, :location
 
   view :with_location do
     association :location, blueprint: LocationBlueprint

app/javascript/pages/Browse.vue

@@ -18,7 +18,7 @@
       <section>
         <BrowserSelector :browser="browser" @clicked="browser = $event" />
       </section>
-      <component :is="browser" :contributions="activeContributions" class="row" />
+      <component :is="browser" :contributions="activeContributions" class="row" accessToken="pk.eyJ1IjoibXV0dWFsLWFpZC1hcHAiLCJhIjoiY2tmZTBvd3UwMDBhbTJ4cDlic2JmMWZoaiJ9.rWscBjdl1SMT5N0yekIJYg"/>
     </section>
   </div>
 </template>
@@ -28,6 +28,7 @@ import BrowserSelector from './browse/BrowserSelector'
 import Filters from './browse/Filters'
 import ListBrowser from './browse/ListBrowser'
 import TileBrowser from './browse/TileBrowser'
+import MapBrowser from './browse/MapBrowser'
 import ContributionFetcher from './browse/ContributionFetcher'
 
 export default {
@@ -36,6 +37,7 @@ export default {
     Filters,
     ListBrowser,
     TileBrowser,
+    MapBrowser,
   },
   props: {
     contributions: {type: Array},

app/javascript/pages/browse/MapBrowser.vue

@@ -2,105 +2,131 @@
   <section class="MapBrowser">
     <!-- FIXME Pull access-token via environment variable -->
     <mapbox
-        access-token="pk.eyJ1IjoibXV0dWFsLWFpZC1hcHAiLCJhIjoiY2tmZTBvd3UwMDBhbTJ4cDlic2JmMWZoaiJ9.rWscBjdl1SMT5N0yekIJYg"
-        :map-options="{
-          style: 'mapbox://styles/mapbox/streets-v11',
-          center: [-75.1635262, 39.9527237],
-          zoom: 9,
-        }"
-        :geolocate-control="{
-          show: true,
-          position: 'top-left',
-        }"
-        @map-load="loaded"
-        @map-zoomend="zoomend"
-        @map-click:points="clicked"
-        @geolocate-error="geolocateError"
-        @geolocate-geolocate="geolocate"
-      />
+      :access-token= this.accessToken
+      :map-options="{
+        style: 'mapbox://styles/mapbox/streets-v11',
+        center: [-96, 37.8],
+        zoom: 4,
+      }"
+      :geolocate-control="{
+        show: true,
+        position: 'top-left',
+      }"
+      @map-load="loaded"
+      @map-zoomend="zoomend"
+      @map-click:points="clicked"
+      @geolocate-error="geolocateError"
+      @geolocate-geolocate="geolocate"
+    />
   </section>
 </template>
 
 <script>
-import Mapbox from 'mapbox-gl-vue'
+  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 {
-  components: { Mapbox },
-  methods: {
-    loaded(map) {
-      var geojson = {
-        'type': 'FeatureCollection',
-        'features': [
-          {
-            'type': 'Feature',
-            'properties': {
-              'message': 'Foo',
-              'icon': 'harbor',
-              'iconSize': [60, 60]
-            },
-            'geometry': {
-              'type': 'Point',
-              'coordinates': [-75.1635262, 39.9527237]
-            }
-          },
-        ]
-      }
+  export default {
+    props: {
+      accessToken: String,
+      contributions: {type: Array, default: () => []},
+      filters: Object,
+    },
+    components: { Mapbox },
+    methods: {
+      loaded(map) {
+        let geojson = {
+          'type': 'FeatureCollection',
+          'features': []
+        }
 
-      map.addLayer({
-        id: 'points',
-        type: 'symbol',
-        source: {
-          type: 'geojson',
-          data: geojson,
-        },
-        layout: {
-          'icon-image': '{icon}-15',
-          'text-field': '{title}',
-          'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
-          'text-offset': [0, 0.6],
-          'text-anchor': 'top',
-        },
-      })
+        const buildGeoJson = () => {
+          return new Promise((resolve) => {
+            let forwarded = 0
 
-      geojson.features.forEach(function (marker) {
-        var el = document.createElement('div');
-        el.className = 'marker';
-        el.style.backgroundImage =
-        'url(https://placekitten.com/g/5/5/)';
-        el.style.width = marker.properties.iconSize[0] + 'px';
-        el.style.height = marker.properties.iconSize[1] + 'px';
+            this.contributions.forEach(contribution => {
+              geoCodingService.forwardGeocode({
+                query: `${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
 
-        el.addEventListener('click', function () {
-          window.alert(marker.properties.message);
-        });
+                  const match = response.body;
 
-        new mapboxgl.Marker(el)
-          .setLngLat(marker.geometry.coordinates)
-          .addTo(map);
-      });
-    },
-    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}`
-      )
-    },
-  },
-}
-</script>
+                  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()
+                })
+              })
+            })
+        }
+
+        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',
+              },
+            })
+
+            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';
 
-<style>
-  #map {
-    width: 100%;
-    height: 500px;
+              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)
+            })
+          })
+      },
+      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}`
+        )
+      },
+    },
   }
-</style>
+</script>

app/models/system_setting.rb

@@ -69,6 +69,7 @@ def peer_to_peer?
 #  confirmation_page_text_footer      :string
 #  confirmation_page_text_header      :string
 #  confirmation_page_text_link_header :string
+#  display_navbar                     :boolean          default(FALSE)
 #  donations_module                   :boolean          default(TRUE), not null
 #  exchange_type                      :string           default("peer_to_peer"), not null
 #  landing_page_text_how              :text

package.json

@@ -7,6 +7,7 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.13.0",
+    "@mapbox/mapbox-sdk": "^0.11.0",
     "@rails/ujs": "^6.0.0",
     "@rails/webpacker": "4.2.2",
     "@vue/composition-api": "^0.5.0",

spec/factories/system_settings.rb

@@ -17,6 +17,7 @@
 #  confirmation_page_text_footer      :string
 #  confirmation_page_text_header      :string
 #  confirmation_page_text_link_header :string
+#  display_navbar                     :boolean          default(FALSE)
 #  donations_module                   :boolean          default(TRUE), not null
 #  exchange_type                      :string           default("peer_to_peer"), not null
 #  landing_page_text_how              :text