Skip to content

Commit 05ef75f

Browse files
hlfanhlfan
committed
Update and inline markers
1 parent ca88543 commit 05ef75f

File tree

11 files changed

+93
-32
lines changed

11 files changed

+93
-32
lines changed

‎app/assets/javascripts/dashboard.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ $(function () {
2525
$("[data-user]").each(function () {
2626
const user = $(this).data("user");
2727
if (user.lon && user.lat) {
28-
L.marker([user.lat, user.lon], { icon: OSM.getMarker({ icon: user.icon }) }).addTo(map)
28+
L.marker([user.lat, user.lon], { icon: OSM.getMarker({ color: user.color }) }).addTo(map)
2929
.bindPopup(user.description, { minWidth: 200 });
3030
}
3131
});

‎app/assets/javascripts/index/directions.js

+10-6
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@ OSM.Directions = function (map) {
2424
};
2525

2626
const endpoints = [
27-
OSM.DirectionsEndpoint(map, $("input[name='route_from']"), { icon: "MARKER_GREEN" }, endpointDragCallback, endpointChangeCallback),
28-
OSM.DirectionsEndpoint(map, $("input[name='route_to']"), { icon: "MARKER_RED" }, endpointDragCallback, endpointChangeCallback)
27+
OSM.DirectionsEndpoint(map, $("input[name='route_from']"), { color: "#9cef11" }, endpointDragCallback, endpointChangeCallback),
28+
OSM.DirectionsEndpoint(map, $("input[name='route_to']"), { color: "#f6110a" }, endpointDragCallback, endpointChangeCallback)
2929
];
3030

3131
const expiry = new Date();
@@ -156,14 +156,18 @@ OSM.Directions = function (map) {
156156
getRoute(true, true);
157157
});
158158

159-
$(".routing_marker_column img").on("dragstart", function (e) {
159+
$(".routing_marker_column svg").on("dragstart", function (e) {
160160
const dt = e.originalEvent.dataTransfer;
161161
dt.effectAllowed = "move";
162-
const dragData = { type: $(this).data("type") };
163-
dt.setData("text", JSON.stringify(dragData));
162+
const jqthis = $(this);
163+
dt.setData("text", JSON.stringify(jqthis.data()));
164164
if (dt.setDragImage) {
165-
const img = $("<img>").attr("src", $(e.originalEvent.target).attr("src"));
165+
const img = jqthis.clone()
166+
.toggleClass("img-fluid position-absolute bottom-100 end-100")
167+
.attr({ width: "25", height: "40" })
168+
.appendTo(document.body);
166169
dt.setDragImage(img.get(0), 12, 21);
170+
setTimeout(() => img.remove(), 0);
167171
}
168172
});
169173

‎app/assets/javascripts/leaflet.map.js

+14-15
Original file line numberDiff line numberDiff line change
@@ -381,23 +381,22 @@ OSM.isDarkMap = function () {
381381
return window.matchMedia("(prefers-color-scheme: dark)").matches;
382382
};
383383

384-
OSM.getMarker = function ({ icon = "MARKER_RED", shadow = true, height = 41 }) {
385-
const options = {
386-
iconUrl: OSM[icon] || OSM.MARKER_RED,
387-
iconSize: [25, height],
388-
iconAnchor: [12, height],
384+
OSM.getMarker = function ({ icon = "dot", color = "#f6110a", shadow = true }) {
385+
const html = `<svg viewBox="0 0 25 40"${
386+
shadow ? " overflow='visible'" : ""
387+
}>${
388+
shadow ? "<use href='#pin-shadow' />" : ""
389+
}<use href="#pin-${icon}" color="${color}" /></svg>`;
390+
return L.divIcon({
391+
html,
392+
iconSize: [25, 40],
393+
iconAnchor: [12, 40],
389394
popupAnchor: [1, -34]
390-
};
391-
if (shadow) {
392-
options.shadowUrl = OSM.MARKER_SHADOW;
393-
options.shadowSize = [41, 41];
394-
options.shadowAnchor = [12, 41];
395-
}
396-
return L.icon(options);
395+
});
397396
};
398397

399398
OSM.noteMarkers = {
400-
"closed": OSM.getMarker({ icon: "CLOSED_NOTE_MARKER", shadow: false, height: 40 }),
401-
"new": OSM.getMarker({ icon: "NEW_NOTE_MARKER", shadow: false, height: 40 }),
402-
"open": OSM.getMarker({ icon: "OPEN_NOTE_MARKER", shadow: false, height: 40 })
399+
"closed": OSM.getMarker({ icon: "tick", color: "#9cef11", shadow: false }),
400+
"new": OSM.getMarker({ icon: "plus", color: "#0b8ef1", shadow: false }),
401+
"open": OSM.getMarker({ icon: "cross", color: "#f6110a", shadow: false })
403402
};

‎app/assets/stylesheets/common.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -596,7 +596,7 @@ tr.turn {
596596
margin-right: .35rem;
597597
width: 15px;
598598

599-
img {
599+
svg {
600600
cursor: move;
601601
}
602602
}

‎app/assets/stylesheets/leaflet-all.scss

+5
Original file line numberDiff line numberDiff line change
@@ -23,3 +23,8 @@ div.leaflet-marker-icon.location-filter.move-marker {
2323
.site .leaflet-popup p {
2424
margin: 0 0 20px 0;
2525
}
26+
27+
div.leaflet-div-icon {
28+
background: none;
29+
border: none;
30+
}

‎app/views/dashboards/_contact.html.erb

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<% user_data = {
22
:lon => contact.home_lon,
33
:lat => contact.home_lat,
4-
:icon => type == "following" ? "MARKER_BLUE" : "MARKER_GREEN",
4+
:color => type == "following" ? "#0b8ef1" : "#9cef11",
55
:description => render(:partial => "popup", :object => contact, :locals => { :type => type })
66
} %>
77
<%= tag.div :class => "row", :data => { :user => user_data } do %>

‎app/views/dashboards/show.html.erb

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<h1><%= t ".title" %></h1>
33
<% end %>
44

5+
<%= render :partial => "layouts/markers", :locals => { :types => %w[dot] } %>
56
<div class="row">
67
<div class="col-md order-md-last">
78
<% if !current_user.home_location? %>
@@ -15,7 +16,7 @@
1516
<% user_data = {
1617
:lon => current_user.home_lon,
1718
:lat => current_user.home_lat,
18-
:icon => "MARKER_RED",
19+
:color => "#f6110a",
1920
:description => render(:partial => "popup", :object => current_user, :locals => { :type => "your location" })
2021
} %>
2122
<%= tag.div "", :id => "map", :class => "content_map border border-secondary-subtle rounded z-0", :data => { :user => user_data } %>

‎app/views/layouts/_markers.html.erb

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
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+
"dot" => { :"stroke-linecap" => "round", :fill => "#fff", :d => "M11.5 10a1 1 0 0 0 2 5 1 1 0 0 0-2-5" }
21+
} %>
22+
23+
<% types.each do |type| %>
24+
<% if markers[type] %>
25+
<path id="<%= type %>-path" <%= tag.attributes(markers[type]) %> />
26+
<g id="pin-<%= type %>" clip-path="url(#pin-clip)">
27+
<use href="#pin-path" fill="currentColor" />
28+
<use href="#pin-path" fill="url(#fill)" />
29+
<g stroke="#fff" opacity="0.122">
30+
<use href="#pin-path" fill="none" stroke-width="4.4" />
31+
<use href="#<%= type %>-path" stroke-width="7.2" />
32+
</g>
33+
<g stroke="currentColor">
34+
<use href="#pin-path" fill="none" stroke-width="2.2" />
35+
<use href="#<%= type %>-path" stroke-width="5" />
36+
</g>
37+
<g stroke="url(#stroke)">
38+
<use href="#pin-path" fill="none" stroke-width="2.2" />
39+
<use href="#<%= type %>-path" stroke-width="5" />
40+
</g>
41+
<use href="#<%= type %>-path" stroke="#fff" stroke-width="2.8" />
42+
</g>
43+
<% end %>
44+
<% end %>
45+
</defs>
46+
</svg>

‎app/views/layouts/_search.html.erb

+6-2
Original file line numberDiff line numberDiff line change
@@ -42,13 +42,17 @@
4242
<div class="d-flex flex-column gap-1 flex-grow-1">
4343
<div class="d-flex gap-2 align-items-center">
4444
<div class="routing_marker_column position-absolute">
45-
<%= image_tag "marker-green.png", :class => "img-fluid", :data => { :type => "from" }, :draggable => "true" %>
45+
<svg viewBox="0 0 25 40" class="img-fluid" data-type="from" draggable="true">
46+
<use href="#pin-dot" color="#9cef11" />
47+
</svg>
4648
</div>
4749
<%= text_field_tag "route_from", params[:from], :placeholder => t("site.search.from"), :autocomplete => "on", :class => "form-control py-1 px-2 ps-4", :dir => "auto" %>
4850
</div>
4951
<div class="d-flex gap-2 align-items-center">
5052
<div class="routing_marker_column position-absolute">
51-
<%= image_tag "marker-red.png", :class => "img-fluid", :data => { :type => "to" }, :draggable => "true" %>
53+
<svg viewBox="0 0 25 40" class="img-fluid" data-type="to" draggable="true">
54+
<use href="#pin-dot" color="#f6110a" />
55+
</svg>
5256
</div>
5357
<%= text_field_tag "route_to", params[:to], :placeholder => t("site.search.to"), :autocomplete => "on", :class => "form-control py-1 px-2 ps-4", :dir => "auto" %>
5458
</div>

‎app/views/layouts/map.html.erb

+2
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@
1818

1919
<div id="browse_status"></div>
2020

21+
<%= render :partial => "layouts/markers", :locals => { :types => %w[dot cross tick plus] } %>
22+
2123
<%= render :partial => "layouts/sidebar_close" %>
2224

2325
<div id="sidebar_loader" class="my-3 text-center loader" hidden>

‎app/views/notes/index.html.erb

+5-5
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@
2626
<% else %>
2727
<%= render :partial => "notes_paging_nav" %>
2828

29+
<%= render :partial => "layouts/markers", :locals => { :types => %w[cross tick] } %>
30+
2931
<table class="table table-sm note_list">
3032
<thead>
3133
<tr>
@@ -40,11 +42,9 @@
4042
<% @notes.each do |note| -%>
4143
<tr<% if note.author == @user %> class="table-primary"<% end %>>
4244
<td>
43-
<% if note.closed? %>
44-
<%= image_tag("closed_note_marker.svg", :alt => "closed", :width => 25, :height => 40) %>
45-
<% else %>
46-
<%= image_tag("open_note_marker.svg", :alt => "open", :width => 25, :height => 40) %>
47-
<% end %>
45+
<svg width="25" height="40" alt="<%= t(note.closed? ? ".closed" : ".open") %>">
46+
<%= tag.use :href => note.closed? ? "#pin-tick" : "#pin-cross", :color => note.closed? ? "#9cef11" : "#f6110a" %>
47+
</svg>
4848
</td>
4949
<td><%= link_to note.id, note %></td>
5050
<td><%= note_author(note.author) %></td>

0 commit comments

Comments
 (0)