I added map functionality and added the map to the index page. The layout and color scheme still needs to updated for the map though.

Author: benjamin-chavez

Gemfile

@@ -17,6 +17,7 @@ gem 'sassc-rails'
 gem 'simple_form'
 gem 'uglifier'
 gem 'webpacker'
+gem 'geocoder'
 
 group :development do
   gem 'web-console', '>= 3.3.0'

Gemfile.lock

@@ -77,6 +77,7 @@ GEM
     ffi (1.12.2)
     font-awesome-sass (5.6.1)
       sassc (>= 1.11)
+    geocoder (1.6.1)
     globalid (0.4.2)
       activesupport (>= 4.2.0)
     http-accept (1.7.0)
@@ -221,6 +222,7 @@ DEPENDENCIES
   devise
   dotenv-rails
   font-awesome-sass (~> 5.6.1)
+  geocoder
   jbuilder (~> 2.0)
   listen (~> 3.0.5)
   pg (~> 0.21)

app/controllers/masks_controller.rb

@@ -11,6 +11,14 @@ def index
     else
       @masks = Mask.all
     end
+    @masks = Mask.geocoded #returns mask with coordinates
+
+    @markers = @masks.map do |mask|
+      {
+        lat: mask.latitude,
+        lng: mask.longitude
+      }
+    end
   end
 
   def show

app/javascript/packs/application.js

@@ -7,3 +7,10 @@ loadDynamicBannerText();
 
 import { toggleDateInputs } from '../plugins/flatpickr'
 toggleDateInputs();
+
+// import "bootstrap";
+import 'mapbox-gl/dist/mapbox-gl.css'; // <-- you need to uncomment the stylesheet_pack_tag in the layout!
+
+import { initMapbox } from '../plugins/init_mapbox';
+
+initMapbox();

app/javascript/packs/map.js

@@ -0,0 +1,37 @@
+import mapboxgl from 'mapbox-gl';
+
+const mapElement = document.getElementById('map');
+
+const buildMap = () => {
+  mapboxgl.accessToken = mapElement.dataset.mapboxApiKey;
+  return new mapboxgl.Map({
+    container: 'map',
+    style: 'mapbox://styles/mapbox/streets-v10'
+    // style: 'mapbox://styles/bmchavez1991/ck759mmsp0ath1imoksa292rw'
+  });
+};
+
+const addMarkersToMap = (map, markers) => {
+  markers.forEach((marker) => {
+    new mapboxgl.Marker()
+      .setLngLat([ marker.lng, marker.lat ])
+      .addTo(map);
+  });
+};
+
+const fitMapToMarkers = (map, markers) => {
+  const bounds = new mapboxgl.LngLatBounds();
+  markers.forEach(marker => bounds.extend([ marker.lng, marker.lat ]));
+  map.fitBounds(bounds, { padding: 70, maxZoom: 15 });
+};
+
+const initMapbox = () => {
+  if (mapElement) {
+    const map = buildMap();
+    const markers = JSON.parse(mapElement.dataset.markers);
+    addMarkersToMap(map, markers);
+    fitMapToMarkers(map, markers);
+  }
+};
+
+export { initMapbox };

app/javascript/plugins/init_mapbox.js

@@ -8,6 +8,8 @@ class Mask < ApplicationRecord
   validates :photo, attached: true
   validates :category, presence: true
   validates :address, presence: true
+  geocoded_by :address
+  after_validation :geocode, if: :will_save_change_to_address?
 
   def unavailable_dates
     bookings.pluck(:start_date, :end_date).map do |range|
@@ -16,3 +18,4 @@ def unavailable_dates
   end
 
 end
+

app/models/mask.rb

@@ -9,7 +9,6 @@
     <%= csrf_meta_tags %>
     <%= action_cable_meta_tag %>
     <%= stylesheet_link_tag 'application', media: 'all' %>
-
     <%#= stylesheet_pack_tag 'application', media: 'all' %>
     <!-- Uncomment if you import CSS in app/javascript/packs/application.js -->
     <%= stylesheet_pack_tag 'application'%> <!-- Uncomment if you import CSS in app/javascript/packs/application.js -->
@@ -29,3 +28,4 @@
 
 </html>
 
+

app/views/layouts/application.html.erb

@@ -23,7 +23,13 @@
   <a class="submit-button" href="">Submit</a>
 </div>
 
-
+<div
+  id="map"
+  style="width: 100%;
+  height: 600px;"
+  data-markers="<%= @markers.to_json %>"
+  data-mapbox-api-key="<%= ENV['MAPBOX_API_KEY'] %>"
+></div>
 
 <!-- if statement because of Heroku -->
 

app/views/masks/index.html.erb

@@ -33,4 +33,3 @@
             </div>
     </div>
 </div>
-

app/views/pages/search.html.erb

@@ -0,0 +1,22 @@
+Geocoder.configure(
+  # Geocoding options
+  # timeout: 3,                 # geocoding service timeout (secs)
+  lookup: :nominatim,         # name of geocoding service (symbol)
+  # ip_lookup: :ipinfo_io,      # name of IP address geocoding service (symbol)
+  # language: :en,              # ISO-639 language code
+  # use_https: false,           # use HTTPS for lookup requests? (if supported)
+  # http_proxy: nil,            # HTTP proxy server (user:pass@host:port)
+  # https_proxy: nil,           # HTTPS proxy server (user:pass@host:port)
+  api_key: 'pk.eyJ1IjoiYm1jaGF2ZXoxOTkxIiwiYSI6ImNrNzU1ZnJpNDA4YmMzZXBmd3c5NmRoOXgifQ.hNPXY1Tt34Ps_WNT_qDjjA',               # API key for geocoding service
+  # cache: nil,                 # cache object (must respond to #[], #[]=, and #del)
+  # cache_prefix: 'geocoder:',  # prefix (string) to use for all cache keys
+
+  # Exceptions that should not be rescued by default
+  # (if you want to implement custom error handling);
+  # supports SocketError and Timeout::Error
+  # always_raise: [],
+
+  # Calculation options
+  units: :km,                 # :km for kilometers or :mi for miles
+  # distances: :linear          # :spherical or :linear
+)

config/initializers/geocoder.rb

@@ -0,0 +1,4 @@
+class AddCoordinatesTomask < ActiveRecord::Migration[5.2]
+  def change
+  end
+end

db/migrate/20200227192258_add_coordinates_tomask.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 2020_02_27_110721) do
+ActiveRecord::Schema.define(version: 2020_02_27_192258) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"

db/schema.rb

@@ -6,6 +6,7 @@
     "bootstrap": "^4.4.1",
     "flatpickr": "^4.6.3",
     "jquery": "^3.4.1",
+    "mapbox-gl": "^1.8.1",
     "popper.js": "^1.16.1",
     "typed.js": "^2.0.11"
   },