Merge pull request #720 from rubyforgood/feature/mapbox

Contributions Page Map

app/assets/stylesheets/application.scss

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

app/javascript/pages/browse/BrowserSelector.vue

@@ -6,12 +6,16 @@
     <button :disabled="showingList"  @click="showList"  id="show-list"  class="button is-small">
       List view
     </button>
+    <button :disabled="showingMap"  @click="showMap"  id="show-map"  class="button is-small">
+      Map view
+    </button>
   </div>
 </template>
 
 <script>
 import ListBrowser from './ListBrowser'
 import TileBrowser from './TileBrowser'
+import MapBrowser from './MapBrowser'
 
 export default {
   props: {
@@ -24,6 +28,9 @@ export default {
     showingList() {
       return this.browser === ListBrowser
     },
+    showingMap() {
+      return this.browser === MapBrowser
+    }
   },
   methods: {
     showTiles() {
@@ -32,6 +39,9 @@ export default {
     showList() {
       this.$emit('clicked', ListBrowser)
     },
+    showMap() {
+      this.$emit('clicked', MapBrowser)
+    }
   }
 }
 </script>

app/javascript/pages/browse/MapBrowser.vue

@@ -0,0 +1,106 @@
+<template>
+  <section class="MapBrowser">
+    <mapbox
+        // FIXME Pull access-token via environment variable
+        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"
+      />
+  </section>
+</template>
+
+<script>
+import Mapbox from 'mapbox-gl-vue'
+
+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]
+            }
+          },
+        ]
+      }
+
+      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',
+        },
+      })
+
+      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';
+
+        el.addEventListener('click', function () {
+          window.alert(marker.properties.message);
+        });
+
+        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>
+
+<style>
+  #map {
+    width: 100%;
+    height: 500px;
+  }
+</style>

app/views/layouts/_head.html.erb

@@ -4,6 +4,7 @@
   <%= csp_meta_tag %>
 
   <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
 
   <%= stylesheet_pack_tag 'application' %>
   <%= javascript_pack_tag 'application' %>

grep

@@ -0,0 +1 @@
+{"type":"FeatureCollection","query":["219","main","st","unionville","ct"],"features":[{"id":"address.2206369181761334","type":"Feature","place_type":["address"],"relevance":1,"properties":{"accuracy":"parcel"},"text":"Main Street","place_name":"219 Main Street, Unionville, Connecticut 06085, United States","center":[-72.893499,41.762479],"geometry":{"type":"Point","coordinates":[-72.893499,41.762479]},"address":"219","context":[{"id":"postcode.14464467621402050","text":"06085"},{"id":"place.13144747332333240","text":"Unionville"},{"id":"region.9926898961180480","wikidata":"Q779","short_code":"US-CT","text":"Connecticut"},{"id":"country.19678805456372290","wikidata":"Q30","short_code":"us","text":"United States"}]},{"id":"address.2480284386001292","type":"Feature","place_type":["address"],"relevance":0.862963,"properties":{"accuracy":"point"},"text":"Main Street","place_name":"219 Main Street, Farmington, Connecticut 06032, United States","center":[-72.840366,41.710103],"geometry":{"type":"Point","coordinates":[-72.840366,41.710103]},"address":"219","context":[{"id":"neighborhood.280951","text":"Pinnacle Heights Housing"},{"id":"postcode.13181339919821940","text":"06032"},{"id":"place.6380740233344310","wikidata":"Q743287","text":"Farmington"},{"id":"region.9926898961180480","wikidata":"Q779","short_code":"US-CT","text":"Connecticut"},{"id":"country.19678805456372290","wikidata":"Q30","short_code":"us","text":"United States"}]},{"id":"address.2484010684165444","type":"Feature","place_type":["address"],"relevance":0.772222,"properties":{"accuracy":"street"},"text":"Main Street","place_name":"Main Street, Unionville, Connecticut 06013, United States","center":[-72.9408282654938,41.7297867404612],"geometry":{"type":"Point","coordinates":[-72.9408282654938,41.7297867404612]},"context":[{"id":"neighborhood.279666","text":"Whigville"},{"id":"postcode.4089879986057040","text":"06013"},{"id":"place.3080439089333241","text":"Unionville"},{"id":"region.9926898961180480","wikidata":"Q779","short_code":"US-CT","text":"Connecticut"},{"id":"country.19678805456372290","wikidata":"Q30","short_code":"us","text":"United States"}]},{"id":"address.7817717338256888","type":"Feature","place_type":["address"],"relevance":0.725926,"properties":{"accuracy":"interpolated"},"text":"Coe Hill Road","place_name":"219 Coe Hill Road, Ctr Harbor, New Hampshire 03226, United States","matching_text":"Main Street","matching_place_name":"219 Main Street, Ctr Harbor, New Hampshire 03226, United States","center":[-71.473197,43.696059],"geometry":{"type":"Point","coordinates":[-71.473197,43.696059],"interpolated":true,"omitted":true},"address":"219","context":[{"id":"postcode.16046397562401600","text":"03226"},{"id":"place.16305096151974080","text":"Ctr Harbor"},{"id":"region.3337369023309770","wikidata":"Q759","short_code":"US-NH","text":"New Hampshire"},{"id":"country.19678805456372290","wikidata":"Q30","short_code":"us","text":"United States"}]},{"id":"address.772586749633468","type":"Feature","place_type":["address"],"relevance":0.658333,"properties":{"accuracy":"street"},"text":"Main Street","place_name":"Main Street, Canton, Connecticut 06019, United States","center":[-72.9210656847062,41.8109182147672],"geometry":{"type":"Point","coordinates":[-72.9210656847062,41.8109182147672]},"context":[{"id":"neighborhood.295455","text":"Collinsville"},{"id":"postcode.9417529660006990","text":"06019"},{"id":"place.7857735088607040","wikidata":"Q1033861","text":"Canton"},{"id":"region.9926898961180480","wikidata":"Q779","short_code":"US-CT","text":"Connecticut"},{"id":"country.19678805456372290","wikidata":"Q30","short_code":"us","text":"United States"}]}],"attribution":"NOTICE: © 2020 Mapbox and its suppliers. All rights reserved. Use of this data is subject to the Mapbox Terms of Service (https://www.mapbox.com/about/maps/). This response and the information it contains may not be retained. POI(s) provided by Foursquare."}

loc

@@ -0,0 +1 @@
+{"type":"FeatureCollection","query":["219","main","st","unionville","ct"],"features":[{"id":"address.2206369181761334","type":"Feature","place_type":["address"],"relevance":1,"properties":{"accuracy":"parcel"},"text":"Main Street","place_name":"219 Main Street, Unionville, Connecticut 06085, United States","center":[-72.893499,41.762479],"geometry":{"type":"Point","coordinates":[-72.893499,41.762479]},"address":"219","context":[{"id":"postcode.14464467621402050","text":"06085"},{"id":"place.13144747332333240","text":"Unionville"},{"id":"region.9926898961180480","wikidata":"Q779","short_code":"US-CT","text":"Connecticut"},{"id":"country.19678805456372290","wikidata":"Q30","short_code":"us","text":"United States"}]},{"id":"address.2480284386001292","type":"Feature","place_type":["address"],"relevance":0.862963,"properties":{"accuracy":"point"},"text":"Main Street","place_name":"219 Main Street, Farmington, Connecticut 06032, United States","center":[-72.840366,41.710103],"geometry":{"type":"Point","coordinates":[-72.840366,41.710103]},"address":"219","context":[{"id":"neighborhood.280951","text":"Pinnacle Heights Housing"},{"id":"postcode.13181339919821940","text":"06032"},{"id":"place.6380740233344310","wikidata":"Q743287","text":"Farmington"},{"id":"region.9926898961180480","wikidata":"Q779","short_code":"US-CT","text":"Connecticut"},{"id":"country.19678805456372290","wikidata":"Q30","short_code":"us","text":"United States"}]},{"id":"address.2484010684165444","type":"Feature","place_type":["address"],"relevance":0.772222,"properties":{"accuracy":"street"},"text":"Main Street","place_name":"Main Street, Unionville, Connecticut 06013, United States","center":[-72.9408282654938,41.7297867404612],"geometry":{"type":"Point","coordinates":[-72.9408282654938,41.7297867404612]},"context":[{"id":"neighborhood.279666","text":"Whigville"},{"id":"postcode.4089879986057040","text":"06013"},{"id":"place.3080439089333241","text":"Unionville"},{"id":"region.9926898961180480","wikidata":"Q779","short_code":"US-CT","text":"Connecticut"},{"id":"country.19678805456372290","wikidata":"Q30","short_code":"us","text":"United States"}]},{"id":"address.7817717338256888","type":"Feature","place_type":["address"],"relevance":0.725926,"properties":{"accuracy":"interpolated"},"text":"Coe Hill Road","place_name":"219 Coe Hill Road, Ctr Harbor, New Hampshire 03226, United States","matching_text":"Main Street","matching_place_name":"219 Main Street, Ctr Harbor, New Hampshire 03226, United States","center":[-71.473197,43.696059],"geometry":{"type":"Point","coordinates":[-71.473197,43.696059],"interpolated":true,"omitted":true},"address":"219","context":[{"id":"postcode.16046397562401600","text":"03226"},{"id":"place.16305096151974080","text":"Ctr Harbor"},{"id":"region.3337369023309770","wikidata":"Q759","short_code":"US-NH","text":"New Hampshire"},{"id":"country.19678805456372290","wikidata":"Q30","short_code":"us","text":"United States"}]},{"id":"address.772586749633468","type":"Feature","place_type":["address"],"relevance":0.658333,"properties":{"accuracy":"street"},"text":"Main Street","place_name":"Main Street, Canton, Connecticut 06019, United States","center":[-72.9210656847062,41.8109182147672],"geometry":{"type":"Point","coordinates":[-72.9210656847062,41.8109182147672]},"context":[{"id":"neighborhood.295455","text":"Collinsville"},{"id":"postcode.9417529660006990","text":"06019"},{"id":"place.7857735088607040","wikidata":"Q1033861","text":"Canton"},{"id":"region.9926898961180480","wikidata":"Q779","short_code":"US-CT","text":"Connecticut"},{"id":"country.19678805456372290","wikidata":"Q30","short_code":"us","text":"United States"}]}],"attribution":"NOTICE: © 2020 Mapbox and its suppliers. All rights reserved. Use of this data is subject to the Mapbox Terms of Service (https://www.mapbox.com/about/maps/). This response and the information it contains may not be retained. POI(s) provided by Foursquare."}

package.json

@@ -15,6 +15,7 @@
     "bulma": "^0.8.2",
     "css-loader": "^3.5.2",
     "file-loader": "^6.0.0",
+    "mapbox-gl-vue": "^2.0.4",
     "null-loader": "^4.0.0",
     "sass-loader": "8.0.2",
     "style-loader": "^1.1.4",

yarn.lock

@@ -5605,6 +5605,11 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+mapbox-gl-vue@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/mapbox-gl-vue/-/mapbox-gl-vue-2.0.4.tgz#225fc85fd13fdd8ccc6f40048d2c29424bcf9f39"
+  integrity sha512-vJKoZh4tlvZnGxgJfWNjSjeKmzIKl2AFWXfRsEIt7Itb1efAGsMc9BzTb6C/nalel+z3cDVIpIo/Q8AmDPqC7w==
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"