diff --git a/app/assets/images/closed_note_marker.svg b/app/assets/images/closed_note_marker.svg deleted file mode 100644 index 84e1048a4ba..00000000000 --- a/app/assets/images/closed_note_marker.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - - - - - - - - - - diff --git a/app/assets/images/marker-blue.png b/app/assets/images/marker-blue.png deleted file mode 100644 index 98b6726162b..00000000000 Binary files a/app/assets/images/marker-blue.png and /dev/null differ diff --git a/app/assets/images/marker-green.png b/app/assets/images/marker-green.png deleted file mode 100644 index f0e64e747fa..00000000000 Binary files a/app/assets/images/marker-green.png and /dev/null differ diff --git a/app/assets/images/marker-red.png b/app/assets/images/marker-red.png deleted file mode 100644 index 5ea2a6cc417..00000000000 Binary files a/app/assets/images/marker-red.png and /dev/null differ diff --git a/app/assets/images/marker-yellow.png b/app/assets/images/marker-yellow.png deleted file mode 100644 index 394aa534104..00000000000 Binary files a/app/assets/images/marker-yellow.png and /dev/null differ diff --git a/app/assets/images/new_note_marker.svg b/app/assets/images/new_note_marker.svg deleted file mode 100644 index c84444b5b8b..00000000000 --- a/app/assets/images/new_note_marker.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/app/assets/images/open_note_marker.svg b/app/assets/images/open_note_marker.svg deleted file mode 100644 index a1b4381c6d7..00000000000 --- a/app/assets/images/open_note_marker.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - - - - - - - - - - diff --git a/app/assets/javascripts/dashboard.js b/app/assets/javascripts/dashboard.js index 7719cac381b..cd9af7f5910 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 349462e1b21..8043fdc58f5 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/index/layers/notes.js b/app/assets/javascripts/index/layers/notes.js index 00f1fb4e93b..6c9f0f97d5a 100644 --- a/app/assets/javascripts/index/layers/notes.js +++ b/app/assets/javascripts/index/layers/notes.js @@ -23,7 +23,7 @@ OSM.initializeNotesLayer = function (map) { function updateMarker(old_marker, feature) { let marker = old_marker; if (marker) { - marker.setIcon(OSM.getMarker({ icon: `${feature.properties.status}_NOTE_MARKER`, shadow: false, height: 40 })); + marker.setIcon(OSM.noteMarkers[feature.properties.status]); } else { let title; const description = feature.properties.comments[0]; @@ -33,7 +33,7 @@ OSM.initializeNotesLayer = function (map) { } marker = L.marker(feature.geometry.coordinates.reverse(), { - icon: OSM.getMarker({ icon: `${feature.properties.status}_NOTE_MARKER`, shadow: false, height: 40 }), + icon: OSM.noteMarkers[feature.properties.status], title, opacity: 0.8, interactive: true diff --git a/app/assets/javascripts/index/new_note.js b/app/assets/javascripts/index/new_note.js index d852d74823e..220559c5825 100644 --- a/app/assets/javascripts/index/new_note.js +++ b/app/assets/javascripts/index/new_note.js @@ -32,7 +32,7 @@ OSM.NewNote = function (map) { function addCreatedNoteMarker(feature) { const marker = L.marker(feature.geometry.coordinates.reverse(), { - icon: OSM.getMarker({ icon: `${feature.properties.status}_NOTE_MARKER`, shadow: false, height: 40 }), + icon: OSM.noteMarkers[feature.properties.status], opacity: 0.9, interactive: true }); @@ -62,7 +62,7 @@ OSM.NewNote = function (map) { if (newNoteMarker) map.removeLayer(newNoteMarker); newNoteMarker = L.marker(latlng, { - icon: OSM.getMarker({ icon: "NEW_NOTE_MARKER", shadow: false, height: 40 }), + icon: OSM.noteMarkers.new, opacity: 0.9, draggable: true }); diff --git a/app/assets/javascripts/index/note.js b/app/assets/javascripts/index/note.js index a77735c9596..a587daf49ad 100644 --- a/app/assets/javascripts/index/note.js +++ b/app/assets/javascripts/index/note.js @@ -69,7 +69,7 @@ OSM.Note = function (map) { type: "note", id: parseInt(id, 10), latLng: L.latLng(data.coordinates.split(",")), - icon: OSM.getMarker({ icon: `${data.status}_NOTE_MARKER`, shadow: false, height: 40 }) + icon: OSM.noteMarkers[data.status] }, function () { if (!hashParams.center && !skipMoveToNote) { const latLng = L.latLng(data.coordinates.split(",")); diff --git a/app/assets/javascripts/leaflet.map.js b/app/assets/javascripts/leaflet.map.js index 20b62004670..640dc5b1b9b 100644 --- a/app/assets/javascripts/leaflet.map.js +++ b/app/assets/javascripts/leaflet.map.js @@ -352,23 +352,6 @@ L.OSM.Map = L.Map.extend({ } }); -L.Icon.Default.imagePath = "/images/"; - -L.Icon.Default.imageUrls = { - "/images/marker-icon.png": OSM.MARKER_ICON, - "/images/marker-icon-2x.png": OSM.MARKER_ICON_2X, - "/images/marker-shadow.png": OSM.MARKER_SHADOW -}; - -L.extend(L.Icon.Default.prototype, { - _oldGetIconUrl: L.Icon.Default.prototype._getIconUrl, - - _getIconUrl: function (name) { - const url = this._oldGetIconUrl(name); - return L.Icon.Default.imageUrls[url]; - } -}); - OSM.isDarkMap = function () { const mapTheme = $("body").attr("data-map-theme"); if (mapTheme) return mapTheme === "dark"; @@ -377,17 +360,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.toUpperCase()] || 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: "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/javascripts/osm.js.erb b/app/assets/javascripts/osm.js.erb index 842868ec9ac..afdce3021b9 100644 --- a/app/assets/javascripts/osm.js.erb +++ b/app/assets/javascripts/osm.js.erb @@ -31,18 +31,6 @@ OSM = { LAYER_DEFINITIONS: <%= MapLayers::full_definitions("config/layers.yml", :legends => "config/legend.yml").to_json %>, - MARKER_BLUE: <%= image_path("marker-blue.png").to_json %>, - MARKER_GREEN: <%= image_path("marker-green.png").to_json %>, - MARKER_RED: <%= image_path("marker-red.png").to_json %>, - - MARKER_ICON: <%= image_path("leaflet/dist/images/marker-icon.png").to_json %>, - MARKER_ICON_2X: <%= image_path("leaflet/dist/images/marker-icon-2x.png").to_json %>, - MARKER_SHADOW: <%= image_path("leaflet/dist/images/marker-shadow.png").to_json %>, - - NEW_NOTE_MARKER: <%= image_path("new_note_marker.svg").to_json %>, - OPEN_NOTE_MARKER: <%= image_path("open_note_marker.svg").to_json %>, - CLOSED_NOTE_MARKER: <%= image_path("closed_note_marker.svg").to_json %>, - apiUrl: function (object) { const apiType = object.type === "note" ? "notes" : object.type; let url = "/api/" + OSM.API_VERSION + "/" + apiType + "/" + object.id; diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index ced3ef44a10..f1a81b8c488 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 f32fdf41d71..d8432c992bc 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 a58469ff450..28c76965296 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 { @@ -71,3 +74,7 @@ header, .d-none, .modal { display: none; } + +.position-absolute { + position: absolute; +} diff --git a/app/views/dashboards/_contact.html.erb b/app/views/dashboards/_contact.html.erb index 72c5090e85c..d7db8e24cd9 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 cad3c9c71e1..a3e9e414557 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 a461841cef9..2e8d3e14db2 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 00000000000..dd7485b5b9c --- /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 f3514959d77..3d0e8ea3926 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 71f39d274cd..5397ab2cbd1 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] } %>