Skip to content

Commit 65505f7

Browse files
hlfanhlfan
committed
Update and inline markers
1 parent 45a8515 commit 65505f7

16 files changed

+116
-45
lines changed

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

+10-6
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,8 @@ OSM.Directions = function (map) {
3333
};
3434

3535
const endpoints = [
36-
OSM.DirectionsEndpoint(map, $("input[name='route_from']"), { icon: "MARKER_GREEN" }, endpointDragCallback, endpointChangeCallback),
37-
OSM.DirectionsEndpoint(map, $("input[name='route_to']"), { icon: "MARKER_RED" }, endpointDragCallback, endpointChangeCallback)
36+
OSM.DirectionsEndpoint(map, $("input[name='route_from']"), { color: "#9cef11" }, endpointDragCallback, endpointChangeCallback),
37+
OSM.DirectionsEndpoint(map, $("input[name='route_to']"), { color: "#f6110a" }, endpointDragCallback, endpointChangeCallback)
3838
];
3939

4040
let downloadURL = null;
@@ -266,14 +266,18 @@ OSM.Directions = function (map) {
266266
getRoute(true, true);
267267
});
268268

269-
$(".routing_marker_column img").on("dragstart", function (e) {
269+
$(".routing_marker_column svg").on("dragstart", function (e) {
270270
const dt = e.originalEvent.dataTransfer;
271271
dt.effectAllowed = "move";
272-
const dragData = { type: $(this).data("type") };
273-
dt.setData("text", JSON.stringify(dragData));
272+
const jqthis = $(this);
273+
dt.setData("text", JSON.stringify(jqthis.data()));
274274
if (dt.setDragImage) {
275-
const img = $("<img>").attr("src", $(e.originalEvent.target).attr("src"));
275+
const img = jqthis.clone()
276+
.toggleClass("img-fluid position-absolute bottom-100 end-100")
277+
.attr({ width: "25", height: "40" })
278+
.appendTo(document.body);
276279
dt.setDragImage(img.get(0), 12, 21);
280+
setTimeout(() => img.remove(), 0);
277281
}
278282
});
279283

‎app/assets/javascripts/index/layers/notes.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ OSM.initializeNotesLayer = function (map) {
2323
function updateMarker(old_marker, feature) {
2424
let marker = old_marker;
2525
if (marker) {
26-
marker.setIcon(OSM.getMarker({ icon: `${feature.properties.status}_NOTE_MARKER`, shadow: false, height: 40 }));
26+
marker.setIcon(OSM.noteMarkers[feature.properties.status]);
2727
} else {
2828
let title;
2929
const description = feature.properties.comments[0];
@@ -33,7 +33,7 @@ OSM.initializeNotesLayer = function (map) {
3333
}
3434

3535
marker = L.marker(feature.geometry.coordinates.reverse(), {
36-
icon: OSM.getMarker({ icon: `${feature.properties.status}_NOTE_MARKER`, shadow: false, height: 40 }),
36+
icon: OSM.noteMarkers[feature.properties.status],
3737
title,
3838
opacity: 0.8,
3939
interactive: true

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ OSM.NewNote = function (map) {
3131

3232
function addCreatedNoteMarker(feature) {
3333
const marker = L.marker(feature.geometry.coordinates.reverse(), {
34-
icon: OSM.getMarker({ icon: `${feature.properties.status}_NOTE_MARKER`, shadow: false, height: 40 }),
34+
icon: OSM.noteMarkers[feature.properties.status],
3535
opacity: 0.9,
3636
interactive: true
3737
});
@@ -61,7 +61,7 @@ OSM.NewNote = function (map) {
6161
if (newNoteMarker) map.removeLayer(newNoteMarker);
6262

6363
newNoteMarker = L.marker(latlng, {
64-
icon: OSM.getMarker({ icon: "NEW_NOTE_MARKER", shadow: false, height: 40 }),
64+
icon: OSM.noteMarkers.new,
6565
opacity: 0.9,
6666
draggable: true
6767
});

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ OSM.Note = function (map) {
6969
type: "note",
7070
id: parseInt(id, 10),
7171
latLng: L.latLng(data.coordinates.split(",")),
72-
icon: OSM.getMarker({ icon: `${data.status}_NOTE_MARKER`, shadow: false, height: 40 })
72+
icon: OSM.noteMarkers[data.status]
7373
}, function () {
7474
if (!hashParams.center && !skipMoveToNote) {
7575
const latLng = L.latLng(data.coordinates.split(","));

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

+17-12
Original file line numberDiff line numberDiff line change
@@ -391,17 +391,22 @@ OSM.isDarkMap = function () {
391391
return window.matchMedia("(prefers-color-scheme: dark)").matches;
392392
};
393393

394-
OSM.getMarker = function ({ icon = "MARKER_RED", shadow = true, height = 41 }) {
395-
const options = {
396-
iconUrl: OSM[icon.toUpperCase()] || OSM.MARKER_RED,
397-
iconSize: [25, height],
398-
iconAnchor: [12, height],
394+
OSM.getMarker = function ({ icon = "dot", color = "#f6110a", shadow = true }) {
395+
const html = `<svg viewBox="0 0 25 40"${
396+
shadow ? " overflow='visible'" : ""
397+
}>${
398+
shadow ? "<use href='#pin-shadow' />" : ""
399+
}<use href="#pin-${icon}" color="${color}" /></svg>`;
400+
return L.divIcon({
401+
html,
402+
iconSize: [25, 40],
403+
iconAnchor: [12, 40],
399404
popupAnchor: [1, -34]
400-
};
401-
if (shadow) {
402-
options.shadowUrl = OSM.MARKER_SHADOW;
403-
options.shadowSize = [41, 41];
404-
options.shadowAnchor = [12, 41];
405-
}
406-
return L.icon(options);
405+
});
406+
};
407+
408+
OSM.noteMarkers = {
409+
"closed": OSM.getMarker({ icon: "tick", color: "#9cef11", shadow: false }),
410+
"new": OSM.getMarker({ icon: "plus", color: "#0b8ef1", shadow: false }),
411+
"open": OSM.getMarker({ icon: "cross", color: "#f6110a", shadow: false })
407412
};

‎app/assets/javascripts/user.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ $(function () {
124124
$("[data-user]").each(function () {
125125
const user = $(this).data("user");
126126
if (user.lon && user.lat) {
127-
L.marker([user.lat, user.lon], { icon: OSM.getMarker({ icon: user.icon }) }).addTo(map)
127+
L.marker([user.lat, user.lon], { icon: OSM.getMarker({ color: user.color }) }).addTo(map)
128128
.bindPopup(user.description, { minWidth: 200 });
129129
}
130130
});

‎app/assets/stylesheets/common.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -602,7 +602,7 @@ tr.turn {
602602
margin-right: .35rem;
603603
width: 15px;
604604

605-
img {
605+
svg {
606606
cursor: move;
607607
}
608608
}

‎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 => "clearfix row", :data => { :user => user_data } do %>

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

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

5+
<svg class="end-100 position-absolute">
6+
<%= render :partial => "layouts/defs_markers", :locals => { :types => %w[dot] } %>
7+
</svg>
58
<div class="row">
69
<div class="col-md order-md-last">
710
<% if !current_user.home_location? %>
@@ -15,7 +18,7 @@
1518
<% user_data = {
1619
:lon => current_user.home_lon,
1720
:lat => current_user.home_lat,
18-
:icon => "MARKER_RED",
21+
:color => "#f6110a",
1922
:description => render(:partial => "popup", :object => current_user, :locals => { :type => "your location" })
2023
} %>
2124
<%= tag.div "", :id => "map", :class => "content_map border border-secondary-subtle rounded z-0", :data => { :user => user_data } %>

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

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<defs>
2+
<linearGradient id="fill" x1="0" x2="0" y1="0" y2="40" gradientUnits="userSpaceOnUse">
3+
<stop offset="0" stop-color="#aaa6" />
4+
<stop offset="1" stop-color="#2224" />
5+
</linearGradient>
6+
<linearGradient id="stroke" x1="0" x2="0" y1="0" y2="20" gradientUnits="userSpaceOnUse">
7+
<stop offset="0" stop-color="#6666" />
8+
<stop offset="1" stop-color="#4448" />
9+
</linearGradient>
10+
<clipPath id="pin-clip">
11+
<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" />
12+
</clipPath>
13+
<image id="pin-shadow" x="-1" href="<%= image_path("leaflet/dist/images/marker-shadow.png") %>" />
14+
15+
<% markers = {
16+
"plus" => { :stroke_linecap => "round", :d => "M5.75 13h13.5m-6.75-6.75v13.5" },
17+
"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" },
18+
"cross" => { :stroke_linecap => "round", :d => "m7.5 8 10 10m0-10-10 10" },
19+
"dot" => { :stroke_linecap => "round", :fill => "#fff", :d => "M11.5 10a1 1 0 0 0 2 5 1 1 0 0 0-2-5" }
20+
} %>
21+
22+
<% types.each do |type| %>
23+
<% if markers[type] %>
24+
<path id="<%= type %>-path" <%= tag.attributes(markers[type]) %> />
25+
<g id="pin-<%= type %>" clip-path="url(#pin-clip)">
26+
<use href="#pin-path" fill="currentColor" />
27+
<use href="#pin-path" fill="url(#fill)" />
28+
<g stroke="#fff" opacity="0.122">
29+
<use href="#pin-path" fill="none" stroke-width="4.4" />
30+
<use href="#<%= type %>-path" stroke-width="7.2" />
31+
</g>
32+
<g stroke="currentColor">
33+
<use href="#pin-path" fill="none" stroke-width="2.2" />
34+
<use href="#<%= type %>-path" stroke-width="5" />
35+
</g>
36+
<g stroke="url(#stroke)">
37+
<use href="#pin-path" fill="none" stroke-width="2.2" />
38+
<use href="#<%= type %>-path" stroke-width="5" />
39+
</g>
40+
<use href="#<%= type %>-path" stroke="#fff" stroke-width="2.8" />
41+
</g>
42+
<% end %>
43+
<% end %>
44+
</defs>

‎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

+4
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,10 @@
1818

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

21+
<svg class="end-100 position-absolute">
22+
<%= render :partial => "layouts/defs_markers", :locals => { :types => %w[dot cross tick plus] } %>
23+
</svg>
24+
2125
<%= render :partial => "layouts/sidebar_close" %>
2226

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

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

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

29+
<svg class="end-100 position-absolute">
30+
<%= render :partial => "layouts/defs_markers", :locals => { :types => %w[cross tick] } %>
31+
</svg>
32+
2933
<table class="table table-sm note_list">
3034
<thead>
3135
<tr>
@@ -40,11 +44,9 @@
4044
<% @notes.each do |note| -%>
4145
<tr<% if note.author == @user %> class="table-primary"<% end %>>
4246
<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 %>
47+
<svg viewBox="0 0 25 40">
48+
<%= tag.use :href => note.closed? ? "#pin-tick" : "#pin-cross", :color => note.closed? ? "#9cef11" : "#f6110a" %>
49+
</svg>
4850
</td>
4951
<td><%= link_to note.id, note %></td>
5052
<td><%= note_author(note.author) %></td>

‎test/system/account_home_test.rb

+8-8
Original file line numberDiff line numberDiff line change
@@ -6,41 +6,41 @@ class AccountHomeTest < ApplicationSystemTestCase
66
sign_in_as(user)
77

88
visit root_path
9-
assert_no_selector "img.leaflet-marker-icon"
9+
assert_no_selector "div.leaflet-marker-icon"
1010

1111
click_on "test user"
1212
click_on "Go to Home Location"
13-
all "img.leaflet-marker-icon", :count => 1 do |marker|
13+
all "div.leaflet-marker-icon", :count => 1 do |marker|
1414
assert_equal "My home location", marker["title"]
1515
end
1616

1717
click_on "OpenStreetMap logo"
18-
assert_no_selector "img.leaflet-marker-icon"
18+
assert_no_selector "div.leaflet-marker-icon"
1919
end
2020

2121
test "Go to Home Location works on non-map layout pages" do
2222
user = create(:user, :display_name => "test user", :home_lat => 60, :home_lon => 30)
2323
sign_in_as(user)
2424

2525
visit about_path
26-
assert_no_selector "img.leaflet-marker-icon"
26+
assert_no_selector "div.leaflet-marker-icon"
2727

2828
click_on "test user"
2929
click_on "Go to Home Location"
30-
all "img.leaflet-marker-icon", :count => 1 do |marker|
30+
all "div.leaflet-marker-icon", :count => 1 do |marker|
3131
assert_equal "My home location", marker["title"]
3232
end
3333

3434
click_on "OpenStreetMap logo"
35-
assert_no_selector "img.leaflet-marker-icon"
35+
assert_no_selector "div.leaflet-marker-icon"
3636
end
3737

3838
test "Go to Home Location is not available for users without home location" do
3939
user = create(:user, :display_name => "test user")
4040
sign_in_as(user)
4141

4242
visit root_path
43-
assert_no_selector "img.leaflet-marker-icon"
43+
assert_no_selector "div.leaflet-marker-icon"
4444

4545
click_on "test user"
4646
assert_no_link "Go to Home Location"
@@ -51,7 +51,7 @@ class AccountHomeTest < ApplicationSystemTestCase
5151
sign_in_as(user)
5252

5353
visit account_home_path
54-
assert_no_selector "img.leaflet-marker-icon"
54+
assert_no_selector "div.leaflet-marker-icon"
5555
assert_text "Home location is not set"
5656
end
5757
end

‎test/system/note_layer_test.rb

+3-3
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ class NoteLayerTest < ApplicationSystemTestCase
88
end
99

1010
visit root_path(:anchor => "map=18/1.1/1.1&layers=N")
11-
all "img.leaflet-marker-icon", :count => 1 do |marker|
11+
all "div.leaflet-marker-icon", :count => 1 do |marker|
1212
assert_equal "Note description", marker["title"]
1313
end
1414
end
@@ -21,7 +21,7 @@ class NoteLayerTest < ApplicationSystemTestCase
2121
end
2222

2323
visit root_path(:anchor => "map=18/1.1/1.1&layers=N")
24-
all "img.leaflet-marker-icon", :count => 1 do |marker|
24+
all "div.leaflet-marker-icon", :count => 1 do |marker|
2525
assert_equal "", marker["title"]
2626
end
2727
end
@@ -33,7 +33,7 @@ class NoteLayerTest < ApplicationSystemTestCase
3333
end
3434

3535
visit root_path(:anchor => "map=18/1.1/1.1&layers=N")
36-
all "img.leaflet-marker-icon", :count => 1 do |marker|
36+
all "div.leaflet-marker-icon", :count => 1 do |marker|
3737
assert_equal "", marker["title"]
3838
end
3939
end

0 commit comments

Comments
 (0)