Leaflet-heat adding multiple heat layers

[Anand Prabhu]

Hi Guys,

I am using the Leaflet-heat plugin to display heat maps on a custom map. I would like to know, if there is a possibility to add multiple heat layers on the map.

Currently i tried using the following code, but only the first heat layer ( var  heat )  is being displayed on the map and the second doesn't.

    var heat = L.heatLayer(addressPoints, {

        radius : 25, // default value

        blur : 15, // default value

        gradient : {1: 'red'}

    }).addTo(map);

    var heat1 = L.heatLayer(addressPoints1, {

        radius : 25, // default value

        blur : 15, // default value

        gradient : {1: 'blue'}

    }).addTo(map);

[Travis Collins]

I'm also attempting to add multiple heat map layers. Will do a little investigation. Anyone else made this work?

[Kathy Breen]

I had a similar issue, so I just extended the range for the gradient after normalizing my data.  I'm still having some problems, but does this help?  Does anyone know hy this plugin is not listed on Leaflet's site?  I prefer this look and find it easy to work with, but perhaps the other heatmap plugins listed are suggested over Leaflet.heat?

    heatmapLayer = L.heatLayer(heatData,{
        radius: 100,
        blur: 30,
        gradient: {
            0: '#ED16B1',
            0.1: '#9916EE',
            0.2: '#1D2FF1',
            0.4: '#00BC5C',
            0.6: '#FDD42E',
            0.8: '#DE1213',
            1: "#9F0132"
        },
        maxZoom: 15
    }).addTo(map);

[Kathy Breen]

I should also mention that I have overlayed two heatmaps, however I didn't like the outcome.  I had one layer showing negative values in shades of blue, another in positive values in shades of red, but on top of each other they just looked like a big bruise.

I think your second heatmap isn't showing up because the gradient value is the same as for the first map, but I could be wrong.  Have you tried setting a range of colors?

[Travis Collins]

The issue I had was that some CSS for the canvas was positioning the layers inline. The first layer appeared in the correct place, but the second layer was to the right of the first - which was way out of view. Simple CSS position relative with top and left fixed it. 

Travis Collins

(703)980-3804

--

---
You received this message because you are subscribed to a topic in the Google Groups "Leaflet" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/leaflet-js/Hko2TmAteB8/unsubscribe.
To unsubscribe from this group and all its topics, send an email to leaflet-js+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.