Add marker for leaflet maps, and use asset pipeline to serve file

app/assets/images/spade-marker.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="48pt" height="48pt" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <g id="surface7" transform="matrix(0.701232, -0.712932, 0.712932, 0.701232, -9.812447, 24.226824)">
+    <path style=" stroke:none;fill-rule:nonzero;fill:rgb(32.941176%,43.137255%,47.843137%);fill-opacity:1;" d="M 25.554688 33.894531 C 25.554688 33.894531 22.074219 37.398438 20.546875 38.933594 C 19.027344 40.46875 12.011719 43.109375 6.960938 41.089844 C 4.402344 35.449219 7.585938 28.945312 9.109375 27.414062 C 10.632812 25.882812 14.113281 22.378906 14.113281 22.378906 Z M 38.425781 15.179688 L 32.703125 9.421875 L 35.5625 6.539062 L 41.285156 12.300781 Z M 38.425781 15.179688 "/>
+    <path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,75.686275%,2.745098%);fill-opacity:1;" d="M 29.84375 15.179688 L 18.402344 26.695312 C 17.84375 27.257812 12.792969 32.574219 14.21875 34 C 15.644531 35.425781 20.703125 30.136719 21.261719 29.574219 L 32.703125 18.058594 L 31.988281 17.335938 Z M 29.84375 15.179688 "/>
+    <path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,75.686275%,2.745098%);fill-opacity:1;" d="M 31.132812 18.488281 L 30.84375 16.476562 L 31.84375 16.332031 C 31.890625 16.324219 36.574219 15.601562 39.855469 12.300781 L 40.570312 11.578125 L 42 13.019531 L 41.285156 13.738281 C 37.511719 17.535156 32.347656 18.316406 32.132812 18.347656 Z M 31.132812 18.488281 "/>
+    <path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,75.686275%,2.745098%);fill-opacity:1;" d="M 31.414062 17.050781 L 29.414062 16.761719 L 29.558594 15.753906 C 29.589844 15.535156 30.363281 10.335938 34.132812 6.539062 L 34.847656 5.820312 L 36.277344 7.261719 L 35.5625 7.980469 C 32.28125 11.285156 31.566406 15.996094 31.558594 16.042969 Z M 31.414062 17.050781 "/>
+  </g>
+</svg>

app/assets/javascripts/places.js.erb

@@ -1,20 +1,23 @@
 if (document.getElementById("placesmap") !== null) {
-  places_base_path = "/places";
-  mapbox_map_id = "<%= Rails.env == 'test' ? 0 : Rails.application.config.mapbox_map_id %>";
-  mapbox_access_token = "<%= Rails.env == 'test' ? 0 : Rails.application.config.mapbox_access_token %>";
-  mapbox_base_url = "https://a.tiles.mapbox.com/v4/" + mapbox_map_id + "/{z}/{x}/{y}.png?access_token=" + mapbox_access_token;
-  nominatim_base_url = 'https://nominatim.openstreetmap.org/search/';
-  nominatim_user_agent_email = "<%= Rails.env == 'test' ? 0 : Rails.application.config.user_agent_email %>";
+  var places_base_path = "/places";
+  var mapbox_map_id = "<%= Rails.env == 'test' ? 0 : Rails.application.config.mapbox_map_id %>";
+  var mapbox_access_token = "<%= Rails.env == 'test' ? 0 : Rails.application.config.mapbox_access_token %>";
+  var mapbox_base_url = "https://a.tiles.mapbox.com/v4/" + mapbox_map_id + "/{z}/{x}/{y}.png?access_token=" + mapbox_access_token;
+  var nominatim_base_url = 'https://nominatim.openstreetmap.org/search/';
+  var nominatim_user_agent_email = "<%= Rails.env == 'test' ? 0 : Rails.application.config.user_agent_email %>";
 
   L.Icon.Default.imagePath = '/assets'
 
+  var placesmap;
+
   if (location.pathname === places_base_path) { //places index page
     placesmap = L.map('placesmap').setView([0.0, -0.0], 2);
     showMap(placesmap);
-  } else { // specific place page
-    place = location.pathname.replace(places_base_path + "/", '');
-    nominatim_query_url = nominatim_base_url + place;
-    nominatim_options = {
+  }
+  else { // specific place page
+    var place = location.pathname.replace(places_base_path + "/", '');
+    var nominatim_query_url = nominatim_base_url + place;
+    var nominatim_options = {
       format: "json",
       callback: "placeholder",
       limit: 1,
@@ -32,15 +35,21 @@ function showMap(placesmap) {
     attribution: 'Map data &copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors under <a href="https://www.openstreetmap.org/copyright">ODbL</a> | Map imagery &copy; <a href="https://mapbox.com">Mapbox</a>',
     maxZoom: 18
   }).addTo(placesmap);
-  markers = new L.MarkerClusterGroup({showCoverageOnHover: false, maxClusterRadius: 20 });
+  var markers = new L.MarkerClusterGroup({showCoverageOnHover: false, maxClusterRadius: 20 });
 
-  things_to_map = location.pathname + '.json';
+  var things_to_map = location.pathname + '.json';
+  var default_marker_icon = L.icon({
+    iconUrl: "<%=image_url('spade-marker.svg')%>",
+    iconSize: [48, 48],
+    iconAnchor: [24, 48],
+    popupAnchor: [0, -46],
+  });
   $.getJSON(things_to_map, function(members) {
     $.each(members, function(i, m) {
       if (m.latitude && m.longitude) {
-        marker = new L.Marker(new L.LatLng(m.latitude, m.longitude));
-        link = "<p><a href='/members/" + m.slug + "'>" + m.login_name + "</a></p>";
-        where = "<p><i>" + m.location + "</i></p>";
+        var marker = new L.Marker(new L.LatLng(m.latitude, m.longitude), {icon: default_marker_icon});
+        var link = "<p><a href='/members/" + m.slug + "'>" + m.login_name + "</a></p>";
+        var where = "<p><i>" + m.location + "</i></p>";
         marker.bindPopup(link + where).openPopup();
         markers.addLayer(marker);
       }

app/assets/stylesheets/leaflet_overrides.scss

@@ -1,13 +1,13 @@
 .leaflet-popup-content-wrapper,
 .leaflet-popup-tip {
-  border: none;
+  border: 0;
 }
 
 .thumbnail {
-  background: #fff !important;
-  border: solid 1px whitesmoke;
-}
+  background: $white;
+  border: solid 1px $white;
 
-.thumbnail .crop-thumbnail .cropinfo {
-  padding-top: 14px;
+  .crop-thumbnail .cropinfo {
+    padding-top: 14px;
+  }
 }

app/views/places/index.html.haml

@@ -1,3 +1,6 @@
 - content_for :title, t(".title", site_name: ENV['GROWSTUFF_SITE_NAME'])
+
+%h2=t(".title", site_name: ENV['GROWSTUFF_SITE_NAME'])
+
 = render partial: 'search_form'
 #placesmap.map