Comments (11)
Having a similar but not exactly the same issue here.
Because I am not sure about how to recalculate the radius of each feature on each zoom, I implement this by removing old layers and add back new layers on each zoom.
Something like
map.on('zoomend', function() {
// remove existing layer
map.removeLayer(old_layer);
// add in new
new_layer = L.geoJson(data, data_options);
map.addLayer(new_layer);
});
and in my data_options, I implemented the resizing method
var data_options = {
pointToLayer: function(feature, latlng) {
mk = L.circleMarker(latlng);
var pointC = map.latLngToContainerPoint(latlng);
var pointX = [pointC.x + 1, pointC.y];
// convert containerpoints to latlng's
var latLngC = map.containerPointToLatLng(pointC);
var latLngX = map.containerPointToLatLng(pointX);
// Assuming distance only depends on latitude
var distanceX = latLngC.distanceTo(latLngX);
// 100 meters is the fixed distance here
var pixels = 100 / distanceX;
mk.setRadius(pixels);
return mk;
}
};
Hope this helps!
I refer to http://stackoverflow.com/questions/27545098/leaflet-calculating-meters-per-pixel-at-zoom-level
when I implemented method for calculating meters per pixel at different zoom levels.
from leaflet.heat.
Nice suggestion, I'll look into it — shouldn't be hard to implement. Just need to recalculate the radius on each zoom.
from leaflet.heat.
Also, in my opinion, having the radius expressed in meters by default makes more sense than pixels in that case.
Let me know if I can help in anything.
Cheers
from leaflet.heat.
any updates here? re-drawing of whole heatmap doesn't solve my problem
from leaflet.heat.
http://leafletjs.com/reference.html#circle
Maybe by using circle itself (not circleMarker) could help? As the unites are in meters, not pixels.
Other than this point, you may want to check out some other statistical stuff for more accurate "heat" calculation.
from leaflet.heat.
Hi folks! Firstly @mourner thank you for this plugin! Any update on this feature?
And another wish is fixed radius starting from zoom level :)
from leaflet.heat.
+1
from leaflet.heat.
I think i made something looks like fixed radius
from leaflet.heat.
@kuzvac Does keeping the radius fixed avoid merging of the lat/lng value colors on zoom out?
from leaflet.heat.
@cpunekar can you please explain more detailed?
from leaflet.heat.
Thanks @kuzvac for the reply. I wanted to have fixed radius when I asked this question but now since the intensity value of points get added as we zoom out, I was curious if we can recalculate the radius each time we zoom in and out. As in I want the radius to increase when we zoom in and to decrease when we zoom out. This would give me a better picture of the intensity values as I am not looking for density heatmap.
from leaflet.heat.
Related Issues (20)
- IndexSizeError: Index or size is negative or greater than the allowed amount HOT 2
- maxZoom in leaflet HOT 2
- Need demo for adding heat using click
- Is it possible to change the intensity color based on the number of heatpoints combined in view? HOT 6
- Heatlayer radius over 80 creates strange object outside default heat HOT 1
- Layering different heat maps on top of eachother
- Crashes when container has 0 width/height HOT 2
- Zooming to bounds of points added. HOT 1
- How to add popup to heat points. HOT 1
- Crash on Firefox 72 on Mac (script is "blocked from extracting canvas data") HOT 7
- Laggy Heatmaps
- Demos don't work: Blocked loading mixed active content HOT 1
- ERROR: ENOENT: no such file or directory, open 'node_modules/simpleheat/simpleheat.js' HOT 1
- Not working offline HOT 1
- Uncaught TypeError: L.heatLayer is not a function HOT 2
- MaxOpacity HOT 2
- Intensity doesn't affect gradient HOT 1
- New npm release
- possible to add a legend ?
- Heatmap Gradient disapears when zooming in
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from leaflet.heat.