CODEWITHSUNDEEP
leafletsizezooming
QGIS-user
QGIS-user

Reputation: 341

Circle marker - size based on zoom values Leaflet

Trying to find a way to base the size dynamically for the circle markers by actual zoom value. I want the circles to be smaller when zooming out by using the zoom value to calculate the size. Trying to avoid circles to collide to much when zooming out but still have the proportions... My idea is to use the "getZoom" function and use that value to calculate the size of the circles. How would that be implemented in below example? I need to play with it a little to find the correct calculations values but for now is not working, something is missing... undefined is the error...

// Get zoom level
   map.on('zoomend', function() {

    var currentZoom = map.getZoom();

});

// Scale circle markers by using the zoom value
// you need to know what the min value is, 
// calculated at runtime or prior
var minValue = 1;

//  desired radius size of circles based on zoom levels
var minRadius = currentZoom/2; 

function calcRadius(val) {
     
    return 1.0083 * Math.pow(val/minValue,.5716) * minRadius;      
}
............
............

Edited to this************************************

// Scaling circle markers for best looking
// you need to know what the min value is, 
// calculated at runtime or prior
var minValue = 1;

//  minimum desired radius size of circles
//var minRadius = 4; 

function calcRadius(val, zoom) {
     
    return 1.0083 * Math.pow(val/minValue,0.5716) * (zoom / 2);      
}

$.getJSON("../data/population/country.geojson", function(json) {
    geoLayer = L.geoJson(json, {
    pointToLayer: function(feature, latlng) {   
var pop = (feature.properties.pop + feature.properties.pop2);
    
var circle;
    
map.on('zoomend', function() {
        var currentZoom = map.getZoom();
        circle.setRadius(calcRadius(circle._orgRadius,currentZoom))
    });

   
// Filtrering
if (pop >= 1 && pop < 10){
        circle = new L.circleMarker(latlng, {radius: 4, color: '#b30000', weight: 1.5}).addTo(map);
        circle._orgRadius = circle.getRadius();
      } 
else if (pop >= 10 && pop < 25){
        circle = new L.circleMarker(latlng, {radius: 4, color: '#d7301f', weight: 1.5}).addTo(map);
        circle._orgRadius = circle.getRadius();
      }
else if (pop >= 25 && pop < 50){
        circle = new L.circleMarker(latlng, {radius: 4, color: '#ef6548', weight: 2}).addTo(map);
        circle._orgRadius = circle.getRadius();
      }
else if (pop >= 50 && pop < 100){
        circle = new L.circleMarker(latlng, {radius: 4, color: '#fc8d59', weight: 2}).addTo(map);
        circle._orgRadius = circle.getRadius();
      }
else if (pop >= 100){
        circle = new L.circleMarker(latlng, {radius: 4, color: '#fdbb84', weight: 2.5}).addTo(map);
        circle._orgRadius = circle.getRadius();
}
else {
circle = null;
}
return circle;
},

Upvotes: 1

Views: 2861

Answers (1)

Falke Design
Falke Design

Reputation: 11338

Change your code to:

var circle = L.circleMarker([39.73, -104.99],{radius: 100}).addTo(map)
circle._orgRadius = circle.getRadius();

// Scale circle markers by using the zoom value
// you need to know what the min value is, 
// calculated at runtime or prior
var minValue = 1;
function calcRadius(val, zoom) {
    return 1.0083 * Math.pow(val/minValue,0.5716) * (zoom / 2);      
}

map.on('zoomend', function() {
    var currentZoom = map.getZoom();
    // Recalc always with the original value
    circle.setRadius(calcRadius(circle._orgRadius,currentZoom))
});

https://jsfiddle.net/falkedesign/nobapxvd/

Upvotes: 2

Related Questions