cst1/openstreetmap-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge remote-tracking branch 'upstream/pull/4674'

Browse source
This commit is contained in:
Tom Hughes 2024-04-10 18:05:40 +01:00
commit 130dd3a822
2 changed files with 25 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
app/assets/javascripts/leaflet.layers.js
View file

@ -5,26 +5,30 @@ L.OSM.layers = function (options) {
var layers = options.layers;
var baseSection = $("<div>")
.attr("class", "section base-layers")
.attr("class", "section base-layers d-grid gap-3")
.appendTo($ui);
var baseLayers = $("<ul class='list-unstyled mb-0'>")
.appendTo(baseSection);
layers.forEach(function (layer, i) {
var id = "map-ui-layer-" + i;
layers.forEach(function (layer) {
var item = $("<li>")
.attr("class", "rounded-3")
.appendTo(baseLayers);
var buttonContainer = $("<div class='position-relative'>")
.appendTo(baseSection);
if (map.hasLayer(layer)) {
item.addClass("active");
}
var mapContainer = $("<div class='position-absolute top-0 start-0 bottom-0 end-0 z-0'>")
.appendTo(buttonContainer);
var div = $("<div>")
.appendTo(item);
var input = $("<input type='radio' class='btn-check' name='layer'>")
.prop("id", id)
.prop("checked", map.hasLayer(layer))
.appendTo(buttonContainer);
var item = $("<label class='btn btn-outline-primary border-4 rounded-3 bg-transparent position-absolute top-0 start-0 bottom-0 end-0 m-n1 overflow-hidden'>")
.prop("for", id)
.append($("<span class='badge position-absolute top-0 start-0 rounded-top-0 rounded-start-0 py-1 px-2 bg-body bg-opacity-75 text-body text-wrap text-start fs-6 lh-base'>").append(layer.options.name))
.appendTo(buttonContainer);
map.whenReady(function () {
var miniMap = L.map(div[0], { attributionControl: false, zoomControl: false, keyboard: false })
var miniMap = L.map(mapContainer[0], { attributionControl: false, zoomControl: false, keyboard: false })
.addLayer(new layer.constructor({ apikey: layer.options.apikey }));
miniMap.dragging.disable();
@ -55,17 +59,7 @@ L.OSM.layers = function (options) {
}
});
var label = $("<label>")
.appendTo(item);
var input = $("<input>")
.attr("type", "radio")
.prop("checked", map.hasLayer(layer))
.appendTo(label);
label.append(layer.options.name);
item.on("click", function () {
input.on("click", function () {
layers.forEach(function (other) {
if (other === layer) {
map.addLayer(other);
@ -79,7 +73,6 @@ L.OSM.layers = function (options) {
item.on("dblclick", toggle);
map.on("layeradd layerremove", function () {
item.toggleClass("active", map.hasLayer(layer));
input.prop("checked", map.hasLayer(layer));
});
});

43
app/assets/stylesheets/common.scss
View file

@ -418,43 +418,14 @@ body.small-nav {
}
.layers-ui {
.base-layers {
.leaflet-container {
width: 100%;
height: 50px;
cursor: pointer;
.base-layers > * {
height: 56px;
> .btn {
--bs-btn-border-color: var(--bs-body-bg);
}
li {
overflow: hidden;
border-radius: 3px;
border: 2px solid transparent;
margin-bottom: 8px;
position: relative;
transition: border-color 0.08s ease-in;
label {
position: absolute;
top: 0;
left: 0;
padding: 2px 6px;
border-bottom-right-radius: 3px;
cursor: pointer;
font-weight: 600;
font-size: 16px;
background-color: var(--bs-body-bg);
opacity: 0.9;
z-index: 1000;
input[type="radio"] {
display: none;
}
}
&.active { border-color: darken($green, 10%); }
&:hover {
border-color: $grey;
&.active { border-color: darken($green, 20%); }
}
> .btn:hover {
--bs-btn-border-color: var(--bs-primary-border-subtle);
}
}