Fix styles of elements

core/code/portal_highlighter.js

@@ -61,12 +61,10 @@ window.updatePortalHighlighterControl = function () {
 
   if (window._highlighters !== null) {
     if ($('#portal_highlight_select').length === 0) {
-      $('body').append("<select id='portal_highlight_select'></select>");
+      $('.leaflet-top.leaflet-left').append("<select id='portal_highlight_select' class='leaflet-control'></select>");
       $('#portal_highlight_select').change(function () {
         window.changePortalHighlights($(this).val());
       });
-      $('.leaflet-top.leaflet-left').css('padding-top', '20px');
-      $('.leaflet-control-scale-line').css('margin-top', '25px');
     }
     $('#portal_highlight_select').html('');
     $('#portal_highlight_select').append($('<option>').attr('value', window._no_highlighter).text(window._no_highlighter));

core/style.css

@@ -1250,16 +1250,16 @@ td + td {
 }
 
 #portal_highlight_select {
-  position: absolute;
-  top:5px;
-  left:10px;
   z-index: 2500;
   font-size:11px;
   background-color:#0E3C46;
   color:#ffce00;
-
+  order: -100;
 }
 
+.leaflet-control-scale {
+  order: -90;
+}
 
 
 .portal_details th, .portal_details td {

plugins/pan-control.css

@@ -0,0 +1,17 @@
+.leaflet-left.has-leaflet-pan-control .leaflet-control-zoomslider {
+	left: 24.5px;
+}
+
+.leaflet-touch .leaflet-left.has-leaflet-pan-control .leaflet-control-zoomslider {
+  left: 34px
+}
+
+.leaflet-control-pan {
+    order: -50;
+}
+
+.leaflet-control-pan div {
+  border: 2px solid rgba(0, 0, 0, 0.2);
+  box-shadow: none;
+  border-radius: 4px;
+}

plugins/pan-control.js

@@ -40,28 +40,8 @@ function setup() {
   if (!panControl.options.position) {
     // default: 'topleft'
     // to be above all controls
-    $('.leaflet-top.leaflet-left .leaflet-control').first().before(panControl.control.getContainer());
+    $('.leaflet-top.leaflet-left').append(panControl.control.getContainer());
   }
-
-  // L.Control.Pan.css tries to align zoom control with the pan control, but the result sucks
-  // so here is our attempt to make it better
-  // (adapted from https://github.com/kartena/Leaflet.Pancontrol/pull/20)
-  $('<style>')
-    .html(
-      '\
-    .leaflet-left.has-leaflet-pan-control .leaflet-control-zoom,\
-    .leaflet-left.has-leaflet-pan-control .leaflet-control-zoomslider { left: unset; }\
-    .leaflet-left.has-leaflet-pan-control .leaflet-control-scale { left: -24.5px; }\
-    .leaflet-left.has-leaflet-pan-control { left: 24.5px; }\
-    .leaflet-left .leaflet-control-pan { left: -24.5px; }\
-    .leaflet-control-pan { width: 75px; height: 75px; }\
-    .leaflet-touch .leaflet-left.has-leaflet-pan-control { left: 26px; }\
-    .leaflet-touch .leaflet-left .leaflet-control-pan { left: -26px; }\
-    .leaflet-touch .leaflet-control-pan { width: 86px; height: 114px; }\
-    .leaflet-touch .leaflet-left .leaflet-control-pan { margin-left: 10px; }\
-  '
-    )
-    .appendTo('head');
 }
 setup.priority = 'low';
 
@@ -71,6 +51,7 @@ function loadLeafletPancontrol() {
     // eslint-disable-next-line
     '@include_raw:external/L.Control.Pan.js@';
     $('<style>').html('@include_css:external/L.Control.Pan.css@').appendTo('head');
+    $('<style>').html('@include_css:pan-control.css@').appendTo('head');
   } catch (e) {
     console.error('L.Control.Pan.js loading failed');
     throw e;

plugins/zoom-slider.css

@@ -0,0 +1,10 @@
+.leaflet-container .leaflet-control-zoomslider {
+    margin-left: 0;
+    margin-top: 0;
+    order: -40;
+}
+
+.leaflet-control-zoomslider, .leaflet-touch .leaflet-control-zoomslider {
+    border: 2px solid rgba(0,0,0,0.2);
+    box-shadow: none;
+}

plugins/zoom-slider.js

@@ -42,12 +42,6 @@ function setup() {
     map.zoomControl.remove();
   }
   zoomSlider.control = L.control.zoomslider(zoomSlider.options).addTo(map);
-
-  // L.Control.Zoomslider.css defines non-standard border for `.leaflet-control-zoomslider`
-  // which makes zoomslider not aligning with other leaflet controls
-  // Here we are trying to unset it (make the same as general `.leaflet-control`)
-  // (adapted from https://github.com/kartena/Leaflet.zoomslider/pull/74)
-  $('<style>').html('.leaflet-touch .leaflet-control-zoomslider { border: 2px solid rgba(0,0,0,0.2) }').appendTo('head');
 }
 
 function loadLeafletZoomslider() {
@@ -56,6 +50,7 @@ function loadLeafletZoomslider() {
     // eslint-disable-next-line
     '@include_raw:external/L.Control.Zoomslider.js@';
     $('<style>').html('@include_string:external/L.Control.Zoomslider.css@').appendTo('head');
+    $('<style>').html('@include_string:zoom-slider.css@').appendTo('head');
   } catch (e) {
     console.error('L.Control.Zoomslider.js loading failed');
     throw e;