GithubHelp home page GithubHelp logo

fixed radius about leaflet.heat HOT 11 OPEN

abernier avatar abernier commented on May 27, 2024 4
fixed radius

from leaflet.heat.

Comments (11)

bobintornado avatar bobintornado commented on May 27, 2024 1

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.

mourner avatar mourner commented on May 27, 2024

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.

abernier avatar abernier commented on May 27, 2024

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.

 avatar commented on May 27, 2024

any updates here? re-drawing of whole heatmap doesn't solve my problem

from leaflet.heat.

bobintornado avatar bobintornado commented on May 27, 2024

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.

kuzvac avatar kuzvac commented on May 27, 2024

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.

mgoldgeier avatar mgoldgeier commented on May 27, 2024

+1

from leaflet.heat.

kuzvac avatar kuzvac commented on May 27, 2024

I think i made something looks like fixed radius

from leaflet.heat.

cpunekar avatar cpunekar commented on May 27, 2024

@kuzvac Does keeping the radius fixed avoid merging of the lat/lng value colors on zoom out?

from leaflet.heat.

kuzvac avatar kuzvac commented on May 27, 2024

@cpunekar can you please explain more detailed?

from leaflet.heat.

cpunekar avatar cpunekar commented on May 27, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.