key/legend control
This commit is contained in:
Gwendolyn
parent
aadc1c10d3
commit
8350ba8f81
2 changed files with 449 additions and 241 deletions
|
|
@ -1556,3 +1556,75 @@ blink {
|
|||
left: 21px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.leaflet-control-key {
|
||||
background-color: white;
|
||||
border-radius: 0.5rem;
|
||||
border: 2px solid rgba(0, 0, 0, 0.2);
|
||||
background-clip: padding-box;
|
||||
|
||||
&.leaflet-control-key-expanded > .collapsed-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> .collapsed-toggle {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
text-align: center;
|
||||
&::before {
|
||||
content: '🔑';
|
||||
}
|
||||
}
|
||||
|
||||
> .pin-toggle {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 0.5rem;
|
||||
color: black;
|
||||
font-size: 1.5rem;
|
||||
top: 0.5rem;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border: 1px solid #DCDCDC;
|
||||
border-radius: 0.5rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
box-shadow: inset 0 0 2px black;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: black;
|
||||
background: #DCDCDC;
|
||||
box-shadow: inset 0 0 2px black;
|
||||
}
|
||||
}
|
||||
|
||||
&.leaflet-control-key-expanded > .pin-toggle {
|
||||
display: block;
|
||||
}
|
||||
|
||||
> .content {
|
||||
display: none;
|
||||
padding: 1rem;
|
||||
gap: 1rem;
|
||||
grid-template-columns: 26px 1fr;
|
||||
|
||||
> .key {
|
||||
display: grid;
|
||||
grid-column: span 2;
|
||||
grid-template-columns: subgrid;
|
||||
> .key-color {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.leaflet-control-key-expanded > .content {
|
||||
display: grid;
|
||||
}
|
||||
}
|
||||
|
|
@ -957,7 +957,9 @@ c3nav = {
|
|||
$('.locationinput .clear').on('click', c3nav._locationinput_clear);
|
||||
$('.locationinput .locate').on('click', c3nav._locationinput_locate);
|
||||
$('.locationinput .random').on('click', c3nav._random_location_click);
|
||||
$('.leaflet-control-user-location a').on('click', c3nav._goto_user_location_click).dblclick(function(e) { e.stopPropagation(); });
|
||||
$('.leaflet-control-user-location a').on('click', c3nav._goto_user_location_click).dblclick(function (e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
$('#autocomplete').on('mouseover', '.location', c3nav._locationinput_hover_suggestion)
|
||||
.on('click', '.location', c3nav._locationinput_click_suggestion);
|
||||
$('html').on('focus', '*', c3nav._locationinput_global_focuschange)
|
||||
|
|
@ -973,7 +975,8 @@ c3nav = {
|
|||
return html[0].outerHTML;
|
||||
},
|
||||
_build_location_label: function (location) {
|
||||
var text = location.label_override || location.title, segments = [''], new_segments=[], new_text = [''], len=0, since_last=0;
|
||||
var text = location.label_override || location.title, segments = [''], new_segments = [], new_text = [''],
|
||||
len = 0, since_last = 0;
|
||||
segments = text.split(' ');
|
||||
for (var segment of segments) {
|
||||
if (segment.length > 12) {
|
||||
|
|
@ -1288,7 +1291,9 @@ c3nav = {
|
|||
var group = c3nav.locations_by_id[id];
|
||||
if (!group) continue;
|
||||
if (!group.locationtype || group.locationtype !== 'locationgroup') continue;
|
||||
group.locations.forEach(subid => {if (subid in c3nav.locations_by_id) possible_locations.add(subid)});
|
||||
group.locations.forEach(subid => {
|
||||
if (subid in c3nav.locations_by_id) possible_locations.add(subid)
|
||||
});
|
||||
}
|
||||
possible_locations = Array.from(possible_locations);
|
||||
var location = c3nav.locations_by_id[possible_locations[Math.floor(Math.random() * possible_locations.length)]];
|
||||
|
|
@ -1420,6 +1425,8 @@ c3nav = {
|
|||
$('.leaflet-touch').removeClass('leaflet-touch');
|
||||
}
|
||||
|
||||
c3nav.create_key(c3nav.theme);
|
||||
|
||||
c3nav.map.fitBounds(L.GeoJSON.coordsToLatLngs(c3nav.initial_bounds), c3nav._add_map_padding({}));
|
||||
|
||||
c3nav.map.on('moveend', c3nav._map_moved);
|
||||
|
|
@ -1493,6 +1500,7 @@ c3nav = {
|
|||
document.querySelector('#theme-color-meta-light').content = theme.theme_color_light;
|
||||
|
||||
c3nav._levelControl.setTheme(id);
|
||||
c3nav.create_key(id);
|
||||
},
|
||||
show_theme_select: function (e) {
|
||||
e.preventDefault();
|
||||
|
|
@ -1516,6 +1524,25 @@ c3nav = {
|
|||
history.back(); // close the modal
|
||||
},
|
||||
|
||||
key_control: null,
|
||||
create_key: function (theme_id) {
|
||||
c3nav_api.get(`map/legend/${theme_id}/`)
|
||||
.then(key => {
|
||||
const entries = [...key.base, ...key.groups, ...key.obstacles];
|
||||
const key_control = new KeyControl();
|
||||
for (let entry of entries) {
|
||||
key_control.addKey(entry.title, entry.fill, entry.border);
|
||||
}
|
||||
if (c3nav.key_control !== null) {
|
||||
c3nav.map.removeControl(c3nav.key_control);
|
||||
}
|
||||
if (entries.length > 0) {
|
||||
c3nav.key_control = key_control;
|
||||
key_control.addTo(c3nav.map);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
_click_anywhere_popup: null,
|
||||
_click_anywhere: function (e) {
|
||||
if (e.originalEvent.target.id !== 'map') return;
|
||||
|
|
@ -1533,7 +1560,9 @@ c3nav = {
|
|||
var popup = L.popup().setLatLng(latlng).setContent('<div class="loader"></div>'),
|
||||
name = c3nav._latlng_to_name(latlng);
|
||||
c3nav._click_anywhere_popup = popup;
|
||||
popup.on('remove', function() { c3nav._click_anywhere_popup = null }).openOn(c3nav.map);
|
||||
popup.on('remove', function () {
|
||||
c3nav._click_anywhere_popup = null
|
||||
}).openOn(c3nav.map);
|
||||
c3nav_api.get(`map/locations/${name}/`)
|
||||
.then(data => {
|
||||
if (c3nav._click_anywhere_popup !== popup || !popup.isOpen()) return;
|
||||
|
|
@ -1834,7 +1863,9 @@ c3nav = {
|
|||
startWifiScanning: function () {
|
||||
if (c3nav._wifiScanningTimer == null) {
|
||||
console.log("started wifi scanning with interval of " + c3nav.getWifiScanRate());
|
||||
c3nav._wifiScanningTimer = window.setInterval(function() { mobileclient.scanNow(); }, c3nav.getWifiScanRate());
|
||||
c3nav._wifiScanningTimer = window.setInterval(function () {
|
||||
mobileclient.scanNow();
|
||||
}, c3nav.getWifiScanRate());
|
||||
}
|
||||
},
|
||||
stopWifiScanning: function () {
|
||||
|
|
@ -2181,7 +2212,9 @@ LevelControl = L.Control.extend({
|
|||
new_tile_layer = this.createTileLayer(this.currentLevel);
|
||||
this._tileLayers[this.currentLevel] = new_tile_layer;
|
||||
new_tile_layer.addTo(c3nav.map);
|
||||
window.setTimeout(function() { old_tile_layer.remove(); }, 2000);
|
||||
window.setTimeout(function () {
|
||||
old_tile_layer.remove();
|
||||
}, 2000);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -2213,7 +2246,9 @@ LabelControl = L.Control.extend({
|
|||
onAdd: function () {
|
||||
this._container = L.DomUtil.create('div', 'leaflet-control-labels leaflet-bar ' + this.options.addClasses);
|
||||
this._button = L.DomUtil.create('a', 'material-symbols', this._container);
|
||||
$(this._button).click(this.toggleLabels).dblclick(function(e) { e.stopPropagation(); });
|
||||
$(this._button).click(this.toggleLabels).dblclick(function (e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
this._button.innerText = c3nav._map_material_icon('label');
|
||||
this._button.href = '#';
|
||||
this._button.classList.toggle('control-disabled', false);
|
||||
|
|
@ -2264,7 +2299,9 @@ SquareGridControl = L.Control.extend({
|
|||
onAdd: function () {
|
||||
this._container = L.DomUtil.create('div', 'leaflet-control-grid-layer leaflet-bar ' + this.options.addClasses);
|
||||
this._button = L.DomUtil.create('a', 'material-symbols', this._container);
|
||||
$(this._button).click(this.toggleGrid).dblclick(function(e) { e.stopPropagation(); });
|
||||
$(this._button).click(this.toggleGrid).dblclick(function (e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
this._button.innerText = c3nav._map_material_icon('grid_off');
|
||||
this._button.href = '#';
|
||||
this._button.classList.toggle('control-disabled', true);
|
||||
|
|
@ -2311,7 +2348,9 @@ ThemeControl = L.Control.extend({
|
|||
onAdd: function () {
|
||||
this._container = L.DomUtil.create('div', 'leaflet-control-theme leaflet-bar ' + this.options.addClasses);
|
||||
this._button = L.DomUtil.create('a', 'material-symbols', this._container);
|
||||
$(this._button).click(c3nav.show_theme_select).dblclick(function(e) { e.stopPropagation(); });
|
||||
$(this._button).click(c3nav.show_theme_select).dblclick(function (e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
this._button.innerText = c3nav._map_material_icon('contrast');
|
||||
this._button.href = '#';
|
||||
return this._container;
|
||||
|
|
@ -2418,6 +2457,103 @@ L.SquareGridLayer = L.Layer.extend({
|
|||
}
|
||||
});
|
||||
|
||||
KeyControl = L.Control.extend({
|
||||
options: {position: 'topright', addClasses: ''},
|
||||
_keys: [],
|
||||
|
||||
onAdd: function () {
|
||||
const pinned = JSON.parse(localStorage.getItem('c3nav.key.pinned') ?? 'false');
|
||||
|
||||
this._container = L.DomUtil.create('div', 'leaflet-control-key ' + this.options.addClasses);
|
||||
this._container.classList.toggle('leaflet-control-key-expanded', pinned);
|
||||
this._content = L.DomUtil.create('div', 'content');
|
||||
const collapsed = L.DomUtil.create('div', 'collapsed-toggle leaflet-control-key-toggle');
|
||||
this._pin = L.DomUtil.create('div', 'pin-toggle');
|
||||
this._pin.classList.toggle('active', pinned);
|
||||
this._pin.innerText = '🖈';
|
||||
this._container.append(this._pin, this._content, collapsed);
|
||||
this._expanded = pinned;
|
||||
this._pinned = pinned;
|
||||
|
||||
if (!L.Browser.android) {
|
||||
L.DomEvent.on(this._container, {
|
||||
mouseenter: this.expand,
|
||||
mouseleave: this.collapse
|
||||
}, this);
|
||||
}
|
||||
|
||||
if (!L.Browser.touch) {
|
||||
L.DomEvent.on(this._container, 'focus', this.expand, this);
|
||||
L.DomEvent.on(this._container, 'blur', this.collapse, this);
|
||||
}
|
||||
|
||||
this.render();
|
||||
|
||||
$(this._container).on('click', 'div.pin-toggle', e => {
|
||||
this.togglePinned();
|
||||
});
|
||||
$(this._container).on('mousedown pointerdown wheel', e => {
|
||||
e.stopPropagation();
|
||||
});
|
||||
return this._container;
|
||||
},
|
||||
|
||||
addKey: function (name, background, border) {
|
||||
this._keys.push({
|
||||
name,
|
||||
background,
|
||||
border,
|
||||
});
|
||||
this.render();
|
||||
},
|
||||
|
||||
render: function () {
|
||||
if (!this._content) return;
|
||||
const fragment = document.createDocumentFragment();
|
||||
for (const key of this._keys) {
|
||||
const key_container = document.createElement('div');
|
||||
key_container.classList.add('key');
|
||||
const color = document.createElement('div');
|
||||
color.classList.add('key-color');
|
||||
if (key.background !== null) {
|
||||
color.style.backgroundColor = key.background;
|
||||
}
|
||||
if (key.border !== null) {
|
||||
color.style.borderColor = key.border;
|
||||
}
|
||||
|
||||
const name = document.createElement('div');
|
||||
name.innerText = key.name;
|
||||
key_container.append(color, name);
|
||||
fragment.append(key_container);
|
||||
}
|
||||
this._content.replaceChildren(...fragment.children);
|
||||
},
|
||||
|
||||
expand: function () {
|
||||
if (this._pinned) return;
|
||||
this._expanded = true;
|
||||
this._container.classList.add('leaflet-control-key-expanded');
|
||||
return this;
|
||||
},
|
||||
|
||||
collapse: function () {
|
||||
if (this._pinned) return;
|
||||
this._expanded = false;
|
||||
this._container.classList.remove('leaflet-control-key-expanded');
|
||||
return this;
|
||||
},
|
||||
|
||||
togglePinned: function () {
|
||||
this._pinned = !this._pinned;
|
||||
if (this._pinned) {
|
||||
this._expanded = true;
|
||||
}
|
||||
this._pin.classList.toggle('active', this._pinned);
|
||||
localStorage.setItem('c3nav.key.pinned', JSON.stringify(this._pinned));
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
var SvgIcon = L.Icon.extend({
|
||||
options: {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue