Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Circle Markers disappear randomly on zoom

See original GitHub issue

Hi, I have several CircleMarkers on my map in a separate FeatureGroup. When I zoom in and out some of the markers disappear reappear randomly. It is even possible, through quick zooming, to make them all disappear. Moving the map around slightly helps to reproduce this behaviour even quicker.

Here is some example code:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>A simple map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>

<div id='map'></div>
<script>
var geojson = [{"type": "Feature","geometry": {"type": "Point","coordinates": [11.372,54.485]},"properties": {"title": "","description": "","size-value": "8.110","marker-color": "#e74c3c","marker-symbol": "circle","marker-size": "large"}},{"type": "Feature","geometry": {"type": "Point","coordinates": [12.484,49.226]},"properties": {"title": "","description": "","size-value": "19.513","marker-color": "#e74c3c","marker-symbol": "circle","marker-size": "large"}},{"type": "Feature","geometry": {"type": "Point","coordinates": [11.343,54.432]},"properties": {"title": "","description": "","size-value": "16.685","marker-color": "#e74c3c","marker-symbol": "circle","marker-size": "large"}},{"type": "Feature","geometry": {"type": "Point","coordinates": [10.411,55.744]},"properties": {"title": "","description": "","size-value": "19.389","marker-color": "#e74c3c","marker-symbol": "circle","marker-size": "large"}},{"type": "Feature","geometry": {"type": "Point","coordinates": [9.262,53.722]},"properties": {"title": "","description": "","size-value": "18.988","marker-color": "#e74c3c","marker-symbol": "circle","marker-size": "large"}},{"type": "Feature","geometry": {"type": "Point","coordinates": [9.175,53.727]},"properties": {"title": "","description": "","size-value": "19.293","marker-color": "#e74c3c","marker-symbol": "circle","marker-size": "large"}},{"type": "Feature","geometry": {"type": "Point","coordinates": [9.644,54.021]},"properties": {"title": "","description": "","size-value": "18.841","marker-color": "#e74c3c","marker-symbol": "circle","marker-size": "large"}},{"type": "Feature","geometry": {"type": "Point","coordinates": [9.884,54.047]},"properties": {"title": "","description": "","size-value": "9.345","marker-color": "#e74c3c","marker-symbol": "circle","marker-size": "large"}},{"type": "Feature","geometry": {"type": "Point","coordinates": [12.490,53.180]},"properties": {"title": "","description": "","size-value": "18.895","marker-color": "#e74c3c","marker-symbol": "circle","marker-size": "large"}},{"type": "Feature","geometry": {"type": "Point","coordinates": [9.866,54.024]},"properties": {"title": "","description": "","size-value": "0.000","marker-color": "#e74c3c","marker-symbol": "circle","marker-size": "large"}},{"type": "Feature","geometry": {"type": "Point","coordinates": [13.793,53.800]},"properties": {"title": "","description": "","size-value": "19.432","marker-color": "#e74c3c","marker-symbol": "circle","marker-size": "large"}},{"type": "Feature","geometry": {"type": "Point","coordinates": [11.922,50.579]},"properties": {"title": "","description": "","size-value": "19.420","marker-color": "#e74c3c","marker-symbol": "circle","marker-size": "large"}},{"type": "Feature","geometry": {"type": "Point","coordinates": [9.703,54.008]},"properties": {"title": "","description": "","size-value": "19.471","marker-color": "#e74c3c","marker-symbol": "circle","marker-size": "large"}},{"type": "Feature","geometry": {"type": "Point","coordinates": [9.916,54.160]},"properties": {"title": "","description": "","size-value": "13.847","marker-color": "#e74c3c","marker-symbol": "circle","marker-size": "large"}},{"type": "Feature","geometry": {"type": "Point","coordinates": [9.704,54.137]},"properties": {"title": "","description": "","size-value": "9.788","marker-color": "#e74c3c","marker-symbol": "circle","marker-size": "large"}},{"type": "Feature","geometry": {"type": "Point","coordinates": [11.144,55.280]},"properties": {"title": "","description": "","size-value": "19.559","marker-color": "#e74c3c","marker-symbol": "circle","marker-size": "large"}},{"type": "Feature","geometry": {"type": "Point","coordinates": [10.580,55.543]},"properties": {"title": "","description": "","size-value": "18.923","marker-color": "#e74c3c","marker-symbol": "circle","marker-size": "large"}},{"type": "Feature","geometry": {"type": "Point","coordinates": [10.508,54.283]},"properties": {"title": "","description": "","size-value": "11.932","marker-color": "#e74c3c","marker-symbol": "circle","marker-size": "large"}},{"type": "Feature","geometry": {"type": "Point","coordinates": [8.547,54.260]},"properties": {"title": "","description": "","size-value": "19.015","marker-color": "#e74c3c","marker-symbol": "circle","marker-size": "large"}}];
var map = L.map('map').setView([51.0, 9.0], 6);
L.tileLayer('https://{s}.tiles.mapbox.com/v3/examples.map-i86nkdio/{z}/{x}/{y}.png').addTo(map);
var circleLayer = L.featureGroup().addTo(map);
for (var i = 0; i < geojson.length; i++) {
    L.circleMarker([geojson[i].geometry.coordinates[1], geojson[i].geometry.coordinates[0]]).setRadius(geojson[i].properties['size-value']).addTo(circleLayer);
}
</script>

</body>
</html>

Is this an error on my side? Or is it a bug in leaflet.js?

Cheers, Daniel

Issue Analytics

State:
Created 9 years ago
Comments:12 (6 by maintainers)

Top GitHub Comments

3reactions

mournercommented, Oct 31, 2014

Ha, this issue turned out to be much simpler than I thought. If you add + before setRadius argument (so that it converts it from string to number), it will work as expected. See http://jsfiddle.net/r5V2S/4/

0reactions

cherniavskiicommented, Feb 26, 2018

@ShadowZone it’s not clear to me why can’t you put a plus sign before value

Top Results From Across the Web

Custom overlay disappears at certain zoom level

I am having a problem with a custom overlay icon marker in google maps. It works fine at all zoom levels, but disappears...

Mapbox GL JS some symbols missing on different zoom levels

But I noticed that on certain zoom levels, some of the symbols in a layer would disappear and it will then reappear again...

Zoom Vanishing Pen Annotation | Draw on Screen ... - YouTube

Zoom Vanishing Pen Annotation | Draw on Screen during meetings or webinars while sharing. Zoom 5.6.3.

Troubleshooting audio issues - Zoom Support

Perform general troubleshooting for audio issues ; Make sure that you have downloaded the latest version. ; Uninstall the app, then download and ......

AutoCAD 2010 - Random Red circles - Autodesk Forums

Solved: I appear to have two red circle which I did not create on ... problem with the red circles, i did some...