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;