From 0410579eb250ba576477ec1ed980d7bf89683a79 Mon Sep 17 00:00:00 2001 From: Marwin Hochfelsner <50826859+hlfan@users.noreply.github.com> Date: Mon, 31 Mar 2025 14:20:45 +0200 Subject: [PATCH] Update and inline markers Co-authored-by: Anton Khorev --- app/assets/javascripts/dashboard.js | 2 +- app/assets/javascripts/index/directions.js | 17 ++++++--- app/assets/javascripts/leaflet.map.js | 29 +++++++------- app/assets/stylesheets/common.scss | 5 ++- app/assets/stylesheets/leaflet-all.scss | 5 +++ app/assets/stylesheets/print.scss | 3 ++ app/views/dashboards/_contact.html.erb | 2 +- app/views/dashboards/show.html.erb | 3 +- app/views/diary_entries/_form.html.erb | 1 + app/views/layouts/_markers.html.erb | 44 ++++++++++++++++++++++ app/views/layouts/_search.html.erb | 12 +++++- app/views/layouts/map.html.erb | 1 + app/views/notes/index.html.erb | 10 ++--- app/views/profiles/locations/show.html.erb | 1 + 14 files changed, 103 insertions(+), 32 deletions(-) create mode 100644 app/views/layouts/_markers.html.erb diff --git a/app/assets/javascripts/dashboard.js b/app/assets/javascripts/dashboard.js index 7719cac38..cd9af7f59 100644 --- a/app/assets/javascripts/dashboard.js +++ b/app/assets/javascripts/dashboard.js @@ -25,7 +25,7 @@ $(function () { $("[data-user]").each(function () { const user = $(this).data("user"); if (user.lon && user.lat) { - L.marker([user.lat, user.lon], { icon: OSM.getMarker({ icon: user.icon }) }).addTo(map) + L.marker([user.lat, user.lon], { icon: OSM.getMarker({ color: user.color }) }).addTo(map) .bindPopup(user.description, { minWidth: 200 }); } }); diff --git a/app/assets/javascripts/index/directions.js b/app/assets/javascripts/index/directions.js index 349462e1b..8043fdc58 100644 --- a/app/assets/javascripts/index/directions.js +++ b/app/assets/javascripts/index/directions.js @@ -24,8 +24,8 @@ OSM.Directions = function (map) { }; const endpoints = [ - OSM.DirectionsEndpoint(map, $("input[name='route_from']"), { icon: "MARKER_GREEN" }, endpointDragCallback, endpointChangeCallback), - OSM.DirectionsEndpoint(map, $("input[name='route_to']"), { icon: "MARKER_RED" }, endpointDragCallback, endpointChangeCallback) + OSM.DirectionsEndpoint(map, $("input[name='route_from']"), { color: "var(--marker-green)" }, endpointDragCallback, endpointChangeCallback), + OSM.DirectionsEndpoint(map, $("input[name='route_to']"), { color: "var(--marker-red)" }, endpointDragCallback, endpointChangeCallback) ]; const expiry = new Date(); @@ -156,14 +156,19 @@ OSM.Directions = function (map) { getRoute(true, true); }); - $(".routing_marker_column img").on("dragstart", function (e) { + $(".routing_marker_column span").on("dragstart", function (e) { const dt = e.originalEvent.dataTransfer; dt.effectAllowed = "move"; - const dragData = { type: $(this).data("type") }; - dt.setData("text", JSON.stringify(dragData)); + const jqthis = $(this); + dt.setData("text", JSON.stringify(jqthis.data())); if (dt.setDragImage) { - const img = $("").attr("src", $(e.originalEvent.target).attr("src")); + const img = jqthis.clone() + .appendTo(document.body); + img.find("svg") + .toggleClass("position-absolute bottom-100 end-100") + .attr({ width: "25", height: "40" }); dt.setDragImage(img.get(0), 12, 21); + setTimeout(() => img.remove(), 0); } }); diff --git a/app/assets/javascripts/leaflet.map.js b/app/assets/javascripts/leaflet.map.js index 78f967cb2..57c1a3526 100644 --- a/app/assets/javascripts/leaflet.map.js +++ b/app/assets/javascripts/leaflet.map.js @@ -377,23 +377,22 @@ OSM.isDarkMap = function () { return window.matchMedia("(prefers-color-scheme: dark)").matches; }; -OSM.getMarker = function ({ icon = "MARKER_RED", shadow = true, height = 41 }) { - const options = { - iconUrl: OSM[icon] || OSM.MARKER_RED, - iconSize: [25, height], - iconAnchor: [12, height], +OSM.getMarker = function ({ icon = "dot", color = "var(--marker-red)", shadow = true }) { + const html = `${ + shadow ? "" : "" + }`; + return L.divIcon({ + html, + iconSize: [25, 40], + iconAnchor: [12, 40], popupAnchor: [1, -34] - }; - if (shadow) { - options.shadowUrl = OSM.MARKER_SHADOW; - options.shadowSize = [41, 41]; - options.shadowAnchor = [12, 41]; - } - return L.icon(options); + }); }; OSM.noteMarkers = { - "closed": OSM.getMarker({ icon: "CLOSED_NOTE_MARKER", shadow: false, height: 40 }), - "new": OSM.getMarker({ icon: "NEW_NOTE_MARKER", shadow: false, height: 40 }), - "open": OSM.getMarker({ icon: "OPEN_NOTE_MARKER", shadow: false, height: 40 }) + "closed": OSM.getMarker({ icon: "tick", color: "var(--marker-green)", shadow: false }), + "new": OSM.getMarker({ icon: "plus", color: "var(--marker-blue)", shadow: false }), + "open": OSM.getMarker({ icon: "cross", color: "var(--marker-red)", shadow: false }) }; diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index ced3ef44a..f1a81b8c4 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -10,6 +10,9 @@ body { font-size: $typeheight; --dark-mode-map-filter: none; + --marker-red: #f6110a; + --marker-green: #9cef11; + --marker-blue: #0b8ef1; } time[title] { @@ -577,7 +580,7 @@ tr.turn { margin-right: .35rem; width: 15px; - img { + svg { cursor: move; } } diff --git a/app/assets/stylesheets/leaflet-all.scss b/app/assets/stylesheets/leaflet-all.scss index f32fdf41d..d8432c992 100644 --- a/app/assets/stylesheets/leaflet-all.scss +++ b/app/assets/stylesheets/leaflet-all.scss @@ -12,3 +12,8 @@ div.leaflet-marker-icon.location-filter.resize-marker { div.leaflet-marker-icon.location-filter.move-marker { background-image: image-url("img/move-handle.png"); } + +div.leaflet-div-icon { + background: none; + border: none; +} diff --git a/app/assets/stylesheets/print.scss b/app/assets/stylesheets/print.scss index bbfdf4ed5..28c769652 100644 --- a/app/assets/stylesheets/print.scss +++ b/app/assets/stylesheets/print.scss @@ -5,6 +5,9 @@ html { body { height: 100%; margin: 0; + --marker-red: #f6110a; + --marker-green: #9cef11; + --marker-blue: #0b8ef1; } #content { diff --git a/app/views/dashboards/_contact.html.erb b/app/views/dashboards/_contact.html.erb index 72c5090e8..d7db8e24c 100644 --- a/app/views/dashboards/_contact.html.erb +++ b/app/views/dashboards/_contact.html.erb @@ -1,7 +1,7 @@ <% user_data = { :lon => contact.home_lon, :lat => contact.home_lat, - :icon => type == "following" ? "MARKER_BLUE" : "MARKER_GREEN", + :color => "var(--marker-#{type == 'following' ? 'blue' : 'green'})", :description => render(:partial => "popup", :object => contact, :locals => { :type => type }) } %> <%= tag.div :class => "row", :data => { :user => user_data } do %> diff --git a/app/views/dashboards/show.html.erb b/app/views/dashboards/show.html.erb index cad3c9c71..a3e9e4145 100644 --- a/app/views/dashboards/show.html.erb +++ b/app/views/dashboards/show.html.erb @@ -3,6 +3,7 @@ <% end %> <%= render :partial => "layouts/control_icons", :locals => { :icons => %w[zoomin zoomout geolocate] } %> +<%= render :partial => "layouts/markers", :locals => { :types => %w[dot] } %>
@@ -17,7 +18,7 @@ <% user_data = { :lon => current_user.home_lon, :lat => current_user.home_lat, - :icon => "MARKER_RED", + :color => "var(--marker-red)", :description => render(:partial => "popup", :object => current_user, :locals => { :type => "your location" }) } %> <%= tag.div "", :id => "map", :class => "content_map border border-secondary-subtle rounded z-0", :data => { :user => user_data } %> diff --git a/app/views/diary_entries/_form.html.erb b/app/views/diary_entries/_form.html.erb index a461841ce..2e8d3e14d 100644 --- a/app/views/diary_entries/_form.html.erb +++ b/app/views/diary_entries/_form.html.erb @@ -6,6 +6,7 @@ <%= t ".location" -%> <%= render :partial => "layouts/control_icons", :locals => { :icons => %w[zoomin zoomout] } %> + <%= render :partial => "layouts/markers", :locals => { :types => %w[dot] } %> <%= tag.div "", :id => "map", :class => "border border-secondary-subtle rounded mb-3 z-0", :data => { :lat => @lat, :lon => @lon, :zoom => @zoom } %> diff --git a/app/views/layouts/_markers.html.erb b/app/views/layouts/_markers.html.erb new file mode 100644 index 000000000..dd7485b5b --- /dev/null +++ b/app/views/layouts/_markers.html.erb @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + " /> + + <% markers = { + "plus" => { :"stroke-linecap" => "round", :d => "M5.75 13h13.5m-6.75-6.75v13.5" }, + "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" }, + "cross" => { :"stroke-linecap" => "round", :d => "m7.5 8 10 10m0-10-10 10" }, + "dot" => { :"stroke-linecap" => "round", :fill => "#fff", :d => "M11.5 10a1 1 0 0 0 2 5 1 1 0 0 0-2-5" } + } %> + + <% types.filter { |type| markers[type] }.each do |type| %> + /> + + + + + + + + + + + + + + + + + + <% end %> + + diff --git a/app/views/layouts/_search.html.erb b/app/views/layouts/_search.html.erb index f3514959d..3d0e8ea39 100644 --- a/app/views/layouts/_search.html.erb +++ b/app/views/layouts/_search.html.erb @@ -68,13 +68,21 @@
- <%= image_tag "marker-green.png", :class => "img-fluid", :data => { :type => "from" }, :draggable => "true" %> + + + + +
<%= 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" %>
- <%= image_tag "marker-red.png", :class => "img-fluid", :data => { :type => "to" }, :draggable => "true" %> + + + + +
<%= 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" %>
diff --git a/app/views/layouts/map.html.erb b/app/views/layouts/map.html.erb index 71f39d274..5397ab2cb 100644 --- a/app/views/layouts/map.html.erb +++ b/app/views/layouts/map.html.erb @@ -51,6 +51,7 @@
<%= render :partial => "layouts/control_icons" %> + <%= render :partial => "layouts/markers", :locals => { :types => %w[dot cross tick plus] } %>