diff --git a/src/CategoryOverpass.js b/src/CategoryOverpass.js index 2810742a..de02e969 100644 --- a/src/CategoryOverpass.js +++ b/src/CategoryOverpass.js @@ -25,6 +25,33 @@ function CategoryOverpass (id, data) { p.className = 'loadingIndicator' p.innerHTML = 'Loading...' this.dom.appendChild(p) + + this.domStatus = document.createElement('div') + this.domStatus.className = 'status' + + this.dom.appendChild(this.domStatus) +} + +CategoryOverpass.prototype.setMap = function (map) { + CategoryBase.prototype.setMap.call(this, map) + + this.map.on('zoomend', this.updateStatus.bind(this)) + this.updateStatus() +} + +CategoryOverpass.prototype.updateStatus = function () { + this.domStatus.innerHTML = '' + + if (typeof this.data.query === 'object') { + var highestZoom = Object.keys(this.data.query).reverse()[0] + if (this.map.getZoom() < highestZoom) { + this.domStatus.innerHTML = 'zoom in for more map features' + } + } + + if ('minZoom' in this.data && this.map.getZoom() < this.data.minZoom) { + this.domStatus.innerHTML = 'zoom in for map features to appear' + } } CategoryOverpass.prototype.open = function () { diff --git a/style.css b/style.css index 10ca0040..c79ebd5b 100644 --- a/style.css +++ b/style.css @@ -118,12 +118,15 @@ body { #info .category header > a:hover { text-decoration: underline; } -#info .category > .content { +#info .category > .content, +#info .category > .status { display: none; } -#info .category.open > .content { +#info .category.open > .content, +#info .category.open > .status { display: block; } +#info .category > .status, #info .category > .content > ul.overpass-layer-list { padding-top: 3px; background: #efefef;