working label display

server/static/css/custom.css

@@ -24,3 +24,8 @@ body {
   right: 5%;
   z-index: 99999;
 }
+
+.mapserver-label-icon {
+  margin-left: -100px !important;
+  margin-top: -100px !important;
+}

server/static/js/overlays/AbstractIconOverlay.js

@@ -92,18 +92,31 @@ var AbstractIconOverlay = L.LayerGroup.extend({
 
         if (marker) {
           //marker exists
+          var icon = self.getIcon(obj);
 
+          if (!icon) {
+            //icon does not wanna be displayed anymore
+            marker.remove();
+            return;
+          }
           //set popup, if changed
           popup = self.createPopup(obj);
           if (popup)
             marker.setPopupContent(popup);
 
           //redraw icon, if changed
-          marker.setIcon(self.getIcon(obj));
+          marker.setIcon(icon);
 
         } else {
           //marker does not exist
-          marker = L.marker([obj.z, obj.x], {icon: self.getIcon(obj)});
+          var icon = self.getIcon(obj);
+
+          if (!icon) {
+            //icon does not want to be displayed
+            return;
+          }
+
+          marker = L.marker([obj.z, obj.x], {icon: icon});
           popup = self.createPopup(obj);
           if (popup)
             marker.bindPopup(popup);

server/static/js/overlays/LabelOverlay.js

@@ -1,39 +1,31 @@
 /* exported LabelOverlay */
 /* globals AbstractIconOverlay: true */
 
-var LabelIcon = L.Icon.extend({
-  initialize: function(options) {
-    L.Icon.prototype.initialize.call(this, options);
-  },
-
-  createIcon: function() {
-		var div = document.createElement('div'),
-		    options = this.options;
-
-		div.innerHTML = options.html || "";
-    div.style.width = "200px";
-    div.style.height = "200px";
-    div.style.marginLeft = "-100px";
-    div.style.marginTop = "-175px";
-
-		return div;
-  }
-});
 
 var LabelOverlay = AbstractIconOverlay.extend({
   initialize: function(wsChannel, layerMgr) {
     AbstractIconOverlay.prototype.initialize.call(this, wsChannel, layerMgr, "label");
   },
 
+  getMaxDisplayedZoom: function(){
+    return 5;
+  },
+
   getIcon: function(lbl){
 
+    var zoom = this.map.getZoom();
+    var factor = Math.pow(2, 12-zoom);
+
     var height = 200;
     var width = 200;
-    var fontSize = Math.min(lbl.attributes.size, 20);
+    var fontSize = Math.min(lbl.attributes.size, 200) / factor;
+
+    var notVisible = (fontSize < 2 || fontSize > 50);
 
     const html = `
-      <svg height='${height}' width='${width}' text-anchor='middle' font-size='${fontSize}px'>
+      <svg height='${height}' width='${width}' text-anchor='middle'>
         <text x='${width/2}' y='${height/2}'
+          font-size='${fontSize}px'
           fill='${lbl.attributes.color}'
           dominant-baseline="central"
           transform="rotate(${lbl.attributes.direction}, 100, 100)">
@@ -42,10 +34,10 @@ var LabelOverlay = AbstractIconOverlay.extend({
       </svg>
     `;
 
-    return new LabelIcon({
+    return L.divIcon({
-      html: html,
+      html: notVisible ? "" : html,
-      height: height,
+      bgPos: L.point(100,100),
-      width: width
+      className: "mapserver-label-icon"
     });
   },