app/views/layouts/_markers.html.erb

   1 <svg width="0" height="0" class="end-100 position-absolute">
   2   <defs>
   3     <linearGradient id="fill" x1="0" x2="0" y1="0" y2="40" gradientUnits="userSpaceOnUse">
   4       <stop offset="0" stop-color="#aaa6" />
   5       <stop offset="1" stop-color="#2224" />
   6     </linearGradient>
   7     <linearGradient id="stroke" x1="0" x2="0" y1="0" y2="20" gradientUnits="userSpaceOnUse">
   8       <stop offset="0" stop-color="#6666" />
   9       <stop offset="1" stop-color="#4448" />
  10     </linearGradient>
  11     <clipPath id="pin-clip">
  12       <path id="pin-path" d="M12.5 40 2.94 21.6448C1.47 18.8224 0 16 0 12.5a12.5 12.5 0 0 1 25 0c0 3.5-1.47 6.3224-2.94 9.1448z" />
  13     </clipPath>
  14     <image id="pin-shadow" x="-1" href="<%= image_path("leaflet/dist/images/marker-shadow.png") %>" />
  15
  16     <% markers = {
  17          "plus" => { :"stroke-linecap" => "round", :d => "M5.75 13h13.5m-6.75-6.75v13.5" },
  18          "tick" => { :"stroke-linecap" => "round", :"stroke-linejoin" => "round", :fill => "none", :d => "M7.157 14.649Q8.9 16 11.22 18.761 14.7 11.7 17.843 8.239" },
  19          "cross" => { :"stroke-linecap" => "round", :d => "m7.5 8 10 10m0-10-10 10" },
  20          "minus" => { :"stroke-linecap" => "round", :d => "M5.75 13h13.5" },
  21          "play" => { :"stroke-linejoin" => "round", :fill => "#fff", :d => "M10 17.5v-9l7 4.5z" },
  22          "stop" => { :"stroke-linejoin" => "round", :fill => "#fff", :d => "M9 9.5h7v7H9z" },
  23          "dot" => { :"stroke-linecap" => "round", :fill => "#fff", :d => "M11.5 10a1 1 0 0 0 2 5 1 1 0 0 0-2-5" }
  24        } %>
  25
  26     <% types.filter { |type| markers[type] }.each do |type| %>
  27       <path id="<%= type %>-path" <%= tag.attributes(markers[type]) %> />
  28       <g id="pin-<%= type %>" clip-path="url(#pin-clip)">
  29         <use href="#pin-path" fill="currentColor" />
  30         <use href="#pin-path" fill="url(#fill)" />
  31         <g stroke="#fff" opacity="0.122">
  32           <use href="#pin-path" fill="none" stroke-width="4.4" />
  33           <use href="#<%= type %>-path" stroke-width="7.2" />
  34         </g>
  35         <g stroke="currentColor">
  36           <use href="#pin-path" fill="none" stroke-width="2.2" />
  37           <use href="#<%= type %>-path" stroke-width="5" />
  38         </g>
  39         <g stroke="url(#stroke)">
  40           <use href="#pin-path" fill="none" stroke-width="2.2" />
  41           <use href="#<%= type %>-path" stroke-width="5" />
  42         </g>
  43         <use href="#<%= type %>-path" stroke="#fff" stroke-width="2.8" />
  44       </g>
  45     <% end %>
  46   </defs>
  47 </svg>