X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/eebe1f1d3ed885e94725c07d24e0483f603f03da..387ecce798585022ffac69d28ae703c737c36f3b:/app/assets/javascripts/leaflet.key.js?ds=sidebyside
diff --git a/app/assets/javascripts/leaflet.key.js b/app/assets/javascripts/leaflet.key.js
index 5756f0c41..6a3400d34 100644
--- a/app/assets/javascripts/leaflet.key.js
+++ b/app/assets/javascripts/leaflet.key.js
@@ -1,18 +1,51 @@
-L.OSM.key = function(options) {
- var control = L.control(options);
+L.OSM.key = function (options) {
+ var control = L.OSM.sidebarPane(options, "key", null, "javascripts.key.title");
- control.onAdd = function (map) {
- var $container = $('
')
- .attr('class', 'control-key');
+ control.onAddPane = function (map, button, $ui) {
+ var $section = $("
")
+ .attr("class", "section")
+ .appendTo($ui);
- $('
')
- .attr('class', 'control-button')
- .attr('href', '#')
- .attr('title', 'Map Key')
- .html('')
- .appendTo($container);
+ $ui
+ .on("show", shown)
+ .on("hide", hidden);
- return $container[0];
+ map.on("baselayerchange", updateButton);
+
+ updateButton();
+
+ function shown() {
+ map.on("zoomend baselayerchange", update);
+ $section.load("/key", update);
+ }
+
+ function hidden() {
+ map.off("zoomend baselayerchange", update);
+ }
+
+ function updateButton() {
+ var disabled = ["mapnik", "cyclemap"].indexOf(map.getMapBaseLayerId()) === -1;
+ button
+ .toggleClass("disabled", disabled)
+ .attr("data-bs-original-title",
+ I18n.t(disabled ?
+ "javascripts.key.tooltip_disabled" :
+ "javascripts.key.tooltip"));
+ }
+
+ function update() {
+ var layer = map.getMapBaseLayerId(),
+ zoom = map.getZoom();
+
+ $(".mapkey-table-entry").each(function () {
+ var data = $(this).data();
+ if (layer === data.layer && zoom >= data.zoomMin && zoom <= data.zoomMax) {
+ $(this).show();
+ } else {
+ $(this).hide();
+ }
+ });
+ }
};
return control;