continuous colour with circles

[Martin Lavoie]

Hi All

I am adding circles to a leaflet map. I was wondering if it was possible to change the color (and size of the radius) of the circle according to a continuous variable.

In the example below, it would be based on column 4 (i.e. scale 0 to 30). I know how to do it with leaflet and R (Shiny) but I can't find a way to do it in leaflet. I saw several examples with polygons, but not for circle.

Any help would be appreciated,

thank you

Martin 

var planes1 = [

    ["NotVisited",-104.0890764,49.04561272, 25  ],

  ["NotVisited",-104.4240635,49.09639175, 0  ],

  ["NotVisited",-103.1154144,49.13206467, 24  ],

  ["NotVisited",-104.014488,49.52543338, 30  ],

  ["Visited",-103.2220606,49.60741579, 5  ],

  ["NotVisited",-105.5253514,50.38853359, 6  ],

  ["Visited",-103.5139301,50.48490716, 22  ]

  ];

                

for (var i = 0; i < planes1.length; i++) { 

circle = new L.circle([planes1[i][2],planes1[i][1]], 10,   { 

color: 'red',  

fillColor:'blue', 

fillOpacity: 1.0 

}) 

.bindPopup(planes1[i][0]) 

.addTo(map1); 

}

[ghybs]

Hi,

I think everything is in the Leaflet documentation:

- L.Circle: http://leafletjs.com/reference.html#circle
At instantiation, the radius is the second parameter (`circle = new L.circle([planes1[i][2],planes1[i][1]], 10,   {...});`).
Later, you can change it with method `circle.setRadius(newValue);` (http://leafletjs.com/reference.html#circle-setradius)
L.Circle is an L.Path:

- L.Path: http://leafletjs.com/reference.html#path
At instantiation, the color is defined as you show.
Later, you can change it with method `circle.setStyle({color: "newColor", fillColor: "newFillColor"});` (http://leafletjs.com/reference.html#path-setstyle)
Note that these colors can be hexadecimal values (e.g. default color value: http://leafletjs.com/reference.html#path-color)

Then what do you mean with "continuous variable"?
If you mean any arbitrary value, then you should be good with the above explanations, in particular the hex value for colors.
If you mean that the value will change over time and you want to reflect this change in real-time, then you will need additional JavaScript to react on those changes and use the given methods to update the values in the map.

Hope this helps.

[Martin Lavoie]

Hi 

by continuous, I meant numerical value. It's not exactly what I wanted  but I ended out using something like this

for (i =0; i < planes1.length; i++) {

var nbAnnouces = planes1[i][3];

var couleur = "green"

if (nbAnnouces > 20) {

if (nbAnnouces > 30){

couleur="red";

} else {

couleur="blue"

}

}

var circleLocation = new L.LatLng(planes1[i][2], planes1[i][1]),

circleOptions = {

color: couleur,  

fillColor:couleur, 

fillOpacity: 1.0 

};

var circle = new L.Circle(circleLocation, (300, + (planes1[i][3]/2)), circleOptions);

circle.bindPopup(planes1[i][0]+ " : " + planes1[i][3]+ " ppm");

 circle.addTo(map1);

}

--

---
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/YlMyViS-_Yo/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.

[ghybs]

Bonjour,

Regarding the colour, you know you need 3 coordinates / numerical values to specify it, like in RGB.

You could limit your spec to 1 numerical value when using the HSL colour space and predefine saturation and lightness (e.g. respectively 100% and 50%).
http://hslpicker.com/

The strings passed to `color` and `fillColor` options are actually a CSS values, which can be either:

• A colour name among browser defined list (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Color_keywords)
• An RGB hexadecimal value, possibly shorten (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb%28%29)
• A functional notation like `rgb(255, 255, 255)` or `hsl(360, 100%, 50%)` (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#hsl%28%29)
  

Hope this helps.