How to Show a Label Beyond a Certain Zoom Level in Leaflet

Labels only appear if zoom Leaflet

Instead of adding the label to the map, add it to a L.featureGroup:

var fg = L.featureGroup().addTo(map);
...
function createLabel(layer, text, count){
   ...
   var label = L.marker(layer.getLatLng(),{icon: icon}).addTo(fg);
   ...
} 

And then remove / add the group while zooming:

function show_hide_labels() {
    var cur_zoom = mymap.getZoom();
    if(cur_zoom < show_label_zoom && mymap.hasLayer(fg)) {       
        mymap.removeLayer(fg);            
    } else if(!mymap.hasLayer(fg) && cur_zoom >= show_label_zoom) {            
        mymap.addLayer(fg);                 
    }
}
mymap.on('zoomend', show_hide_labels);
show_hide_labels();

Zooming In and Showing/Hiding Labels in Leaflet

I found my problem to be that by going through the "layer" before the "feature", the properties is accessed through a different method. The correct format should be layer.feature.geometry.properties.lot_number. This was accomplished by logging the features and tracing their data structures returned in the objects.

Display layers at certain zoom levels in R Leaflet

The group argument in most of the "addElement()" type functions becomes very important for managing how a map works. I recommend it, and you can do a lot of neat stuff by carefully thinking about how you group your data.

By calling groupOptions(), you can set the zoom levels for whatever layers you like. Below I have added the zoom levels you specified, but feel free to play around with it to adjust it to your needs.

#Creating a leaflet object with points and polygons

leaflet() %>%
  addProviderTiles(providers$CartoDB.Positron) %>%
  addCircleMarkers(lng=quakes$long,
                   lat=quakes$lat,
                   col="blue",
                   radius=3,
                   stroke=FALSE,
                   fillOpacity = 0.7,
                   #options = markerOptions(minZoom=15, maxZoom=20), # Oldcode
                   group = "Quake Points") %>%                       # Newcode
  addPolygons(data= oceania,
              col="red") %>%                        
  groupOptions("Quake Points", zoomLevels = 15:20)                   # Newcode

Hide tooltip in leaflet for a zoom range

To hide tooltips based on zoom range, see this Leaflet issue conversation that references this JS bin. Code repeated below:

var lastZoom;
map.on('zoomend', function() {
  var zoom = map.getZoom();
  if (zoom < 15 && (!lastZoom || lastZoom >= 15)) {
    map.eachLayer(function(l) {
      if (l.getTooltip) {
        var toolTip = l.getTooltip();
        if (toolTip) {
          this.map.closeTooltip(toolTip);
        }
      }
    });
  } else if (zoom >= 15 && (!lastZoom || lastZoom < 15)) {
    map.eachLayer(function(l) {
      if (l.getTooltip) {
        var toolTip = l.getTooltip();
        if (toolTip) {
          this.map.addLayer(toolTip);
        }
      }
    });
  }
  lastZoom = zoom;
})

Edit: also, see this StackOverflow question.

Leaflet labels on top

@IvanSanchez is correct. If you look at the map service definition for this layer (https://geoservices.un.org/arcgis/rest/services/ClearMap_WebTopo/MapServer), you will see Supports Dynamic Layers: false. As far as I can tell, this means the sublayers cannot be singled out and built into new dynamic layers. You can read a bit more about that here: esri TileLayer capabilities

Unfortunately you will either need to build these layers from scratch using their underlying data as featurelayers (this is a ridiculous amount of work and I don't recommend it one bit), or you'll have to go looking for other basemap / labels layers that you like.

I did manage to find what looks like just the baselayer on ArcGIS Online, here, but it doesn't seem to be available to the public. I would actually contact the UN site you referenced and see if anyone there knows how you can get access to just the baselayer. Probably any reference layer on top of that would be fine.

Sorry for the bad news.

Add static labels to circle markers in leaflet

A somewhat simple solution would be to create a permanent tooltip for each feature, centered on the coordinates of the circles.

Something like

onEachFeature: function(feature, layer) {
    var text = L.tooltip({
        permanent: true,
        direction: 'center',
        className: 'text'
    })
    .setContent("some text")
    .setLatLng(layer.getLatLng());
    text.addTo(Classroomsbyamount);

    // rest of your code
}

And a demo

var map = L.map(document.getElementById('map')).setView([48.8583736, 2.2922926], 12);L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {        attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
var buildingPoints = [{    "type": "Feature",    "geometry": {        "type": "Point",        "coordinates": [2.2922926, 48.85]    },    "properties": {        "text": "5",        "radius": 60    }},{    "type": "Feature",    "geometry": {        "type": "Point",        "coordinates": [2.35, 48.86]    },    "properties": {        "text": "4",        "radius": 40    }}];
var Classroomsamount = new L.geoJson(buildingPoints, {    pointToLayer: function(feature, latlng) {        return new L.CircleMarker([latlng.lat, latlng.lng], {radius: feature.properties.radius});    },    onEachFeature: function(feature, layer) {        var text = L.tooltip({            permanent: true,            direction: 'center',            className: 'text'        })        .setContent(feature.properties.text)        .setLatLng(layer.getLatLng());        text.addTo(map);                        var text2 = L.tooltip({            direction: 'top',            className: 'text2'        })        .setContent(feature.properties.text)        .setLatLng(layer.getLatLng());        layer.bindTooltip(text2);    }}).addTo(map);

html, body {  height: 100%;  margin: 0;}#map {  width: 100%;  height: 100%;}
.leaflet-tooltip-pane .text {  color: red;   font-weight: bold;  background: transparent;  border:0;  box-shadow: none;  font-size:2em;}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css"/><script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>   <div id='map'></div>

Mapbox - Show point of interest markers regardless of zoom level

It is generally not possible to have layers in vector tile sources display at "all zoom levels" because they don't exist at all zoom levels within the vector tile sources.

Generally, the Mapbox tilesets are heavily optimised and only include data at the zoom levels that they are intended to display at in the corresponding Mapbox styles.

---

Related Topics