From 12a7c9d023bcca01657e357b2ed28cc6bcd20e06 Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Mon, 19 Sep 2022 17:51:09 +0300 Subject: [PATCH 1/4] Create osm-specific locate control class --- app/assets/javascripts/index.js | 28 +++++------------------- app/assets/javascripts/leaflet.locate.js | 26 ++++++++++++++++++++++ 2 files changed, 31 insertions(+), 23 deletions(-) create mode 100644 app/assets/javascripts/leaflet.locate.js diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js index 5ba36a455..011f3b282 100644 --- a/app/assets/javascripts/index.js +++ b/app/assets/javascripts/index.js @@ -2,6 +2,7 @@ //= require leaflet.sidebar //= require leaflet.sidebar-pane //= require leaflet.locatecontrol/src/L.Control.Locate +//= require leaflet.locate //= require leaflet.layers //= require leaflet.key //= require leaflet.note @@ -98,34 +99,15 @@ $(document).ready(function () { } }); + var sidebar = L.OSM.sidebar("#map-ui") + .addTo(map); + var position = $("html").attr("dir") === "rtl" ? "topleft" : "topright"; L.OSM.zoom({ position: position }) .addTo(map); - var locate = L.control.locate({ - position: position, - icon: "icon geolocate", - iconLoading: "icon geolocate", - strings: { - title: I18n.t("javascripts.map.locate.title"), - popup: function (options) { - return I18n.t("javascripts.map.locate." + options.unit + "Popup", { count: options.distance }); - } - } - }).addTo(map); - - var locateContainer = locate.getContainer(); - - $(locateContainer) - .removeClass("leaflet-control-locate leaflet-bar") - .addClass("control-locate") - .children("a") - .attr("href", "#") - .removeClass("leaflet-bar-part leaflet-bar-part-single") - .addClass("control-button"); - - var sidebar = L.OSM.sidebar("#map-ui") + L.OSM.locate({ position: position }) .addTo(map); L.OSM.layers({ diff --git a/app/assets/javascripts/leaflet.locate.js b/app/assets/javascripts/leaflet.locate.js new file mode 100644 index 000000000..d43a5e458 --- /dev/null +++ b/app/assets/javascripts/leaflet.locate.js @@ -0,0 +1,26 @@ +L.OSM.locate = function (options) { + var control = L.control.locate(Object.assign({ + icon: "icon geolocate", + iconLoading: "icon geolocate", + strings: { + title: I18n.t("javascripts.map.locate.title"), + popup: function (options) { + return I18n.t("javascripts.map.locate." + options.unit + "Popup", { count: options.distance }); + } + } + }, options)); + + control.onAdd = function (map) { + var container = Object.getPrototypeOf(this).onAdd.apply(this, [map]); + $(container) + .removeClass("leaflet-control-locate leaflet-bar") + .addClass("control-locate") + .children("a") + .attr("href", "#") + .removeClass("leaflet-bar-part leaflet-bar-part-single") + .addClass("control-button"); + return container; + }; + + return control; +}; From 7904b49bb13c23b8c8beb4f5bcf25fa12d8374dd Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Mon, 19 Sep 2022 18:20:34 +0300 Subject: [PATCH 2/4] Group map controls --- app/assets/javascripts/index.js | 66 ++++++++++++++++++------------ app/assets/stylesheets/common.scss | 24 +++++------ 2 files changed, 50 insertions(+), 40 deletions(-) diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js index 011f3b282..2bda933a9 100644 --- a/app/assets/javascripts/index.js +++ b/app/assets/javascripts/index.js @@ -104,38 +104,50 @@ $(document).ready(function () { var position = $("html").attr("dir") === "rtl" ? "topleft" : "topright"; - L.OSM.zoom({ position: position }) - .addTo(map); + function addControlGroup(controls) { + controls.forEach(function (control) { + control.addTo(map); + }); - L.OSM.locate({ position: position }) - .addTo(map); + var lastContainer = controls[controls.length -1].getContainer(); + $(lastContainer).addClass("leaflet-control-group-end"); + } - L.OSM.layers({ - position: position, - layers: map.baseLayers, - sidebar: sidebar - }).addTo(map); + addControlGroup([ + L.OSM.zoom({ position: position }), + L.OSM.locate({ position: position }) + ]); - L.OSM.key({ - position: position, - sidebar: sidebar - }).addTo(map); + addControlGroup([ + L.OSM.layers({ + position: position, + layers: map.baseLayers, + sidebar: sidebar + }), + L.OSM.key({ + position: position, + sidebar: sidebar + }), + L.OSM.share({ + "position": position, + "sidebar": sidebar, + "short": true + }) + ]); - L.OSM.share({ - "position": position, - "sidebar": sidebar, - "short": true - }).addTo(map); + addControlGroup([ + L.OSM.note({ + position: position, + sidebar: sidebar + }) + ]); - L.OSM.note({ - position: position, - sidebar: sidebar - }).addTo(map); - - L.OSM.query({ - position: position, - sidebar: sidebar - }).addTo(map); + addControlGroup([ + L.OSM.query({ + position: position, + sidebar: sidebar + }) + ]); L.control.scale() .addTo(map); diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index d2ab3d272..1e638d47d 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -358,8 +358,6 @@ body.small-nav { width: 40px; background-color: #333; background-color: rgba(0,0,0,.6); - border-radius: 4px 0 0 4px; - margin-bottom: 10px; outline: none; &:hover, @@ -383,21 +381,21 @@ body.small-nav { } } -.leaflet-control .zoomin, -.control-layers .control-button { - margin-bottom: 0px; - border-radius: 4px 0 0 0; +.leaflet-control-group-end + .leaflet-control { + padding-top: 10px; } -.leaflet-control .zoomout, -.control-key .control-button { - margin-bottom: 0; - border-radius: 0; +.leaflet-control:first-child, +.leaflet-control-group-end + .leaflet-control { + &.control-button, .control-button:first-child { + border-start-start-radius: 4px; + } } -.control-locate .control-button, -.control-share .control-button { - border-radius: 0 0 0 4px; +.leaflet-control-group-end { + &.control-button, .control-button:last-child { + border-end-start-radius: 4px; + } } /* Rules for the sidebar and main map area */ From 6acb032d4c5ab6e891a773d4a89dfc53725f9d86 Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Mon, 19 Sep 2022 18:50:04 +0300 Subject: [PATCH 3/4] Set borders and spacing for control groups directly in js Previous stylesheet code is more complicated. --- app/assets/javascripts/index.js | 10 ++++++++-- app/assets/stylesheets/common.scss | 17 ----------------- 2 files changed, 8 insertions(+), 19 deletions(-) diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js index 2bda933a9..6f3bb0c50 100644 --- a/app/assets/javascripts/index.js +++ b/app/assets/javascripts/index.js @@ -109,8 +109,14 @@ $(document).ready(function () { control.addTo(map); }); - var lastContainer = controls[controls.length -1].getContainer(); - $(lastContainer).addClass("leaflet-control-group-end"); + var firstContainer = controls[0].getContainer(); + $(firstContainer).find(".control-button").first() + .css("border-start-start-radius", "4px"); + + var lastContainer = controls[controls.length - 1].getContainer(); + $(lastContainer).find(".control-button").last() + .css("margin-bottom", "10px") + .css("border-end-start-radius", "4px"); } addControlGroup([ diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 1e638d47d..f48387a59 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -381,23 +381,6 @@ body.small-nav { } } -.leaflet-control-group-end + .leaflet-control { - padding-top: 10px; -} - -.leaflet-control:first-child, -.leaflet-control-group-end + .leaflet-control { - &.control-button, .control-button:first-child { - border-start-start-radius: 4px; - } -} - -.leaflet-control-group-end { - &.control-button, .control-button:last-child { - border-end-start-radius: 4px; - } -} - /* Rules for the sidebar and main map area */ .map-layout { From 3f5c3a9d92b8bd68e7ff0a2d68789fda5b623d97 Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Mon, 19 Sep 2022 19:10:46 +0300 Subject: [PATCH 4/4] Specify border/spacing values in stylesheet --- app/assets/javascripts/index.js | 5 ++--- app/assets/stylesheets/common.scss | 9 +++++++++ 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js index 6f3bb0c50..449c52038 100644 --- a/app/assets/javascripts/index.js +++ b/app/assets/javascripts/index.js @@ -111,12 +111,11 @@ $(document).ready(function () { var firstContainer = controls[0].getContainer(); $(firstContainer).find(".control-button").first() - .css("border-start-start-radius", "4px"); + .addClass("control-button-first"); var lastContainer = controls[controls.length - 1].getContainer(); $(lastContainer).find(".control-button").last() - .css("margin-bottom", "10px") - .css("border-end-start-radius", "4px"); + .addClass("control-button-last"); } addControlGroup([ diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index f48387a59..a5afa85b1 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -376,6 +376,15 @@ body.small-nav { background-color: $vibrant-green; } + &-first { + border-start-start-radius: 4px; + } + + &-last { + border-end-start-radius: 4px; + margin-bottom: 10px; + } + .icon { margin: 10px; }