[GIS] How to create proportional symbol map in Leaflet using default icons

iconleaflet

I'm guessing this is possible but I cannot figure out how to do it. (Also, I am wondering if it would just be easier to do it with a custom icon or an SVG).

My current code looks like this:

function createSymbols(data, map){
var points = data.features

for (var i = 0, l = points.length; i < l; i++){

var obj = data.features[i];
var lon = obj.geometry.coordinates[1];
var lat = obj.geometry.coordinates[0];
var degrees = obj.properties.degrees;
var value = obj.properties.value;


L.Icon.Default.prototype.options = {
iconSize: [(6*value),(10*value)]
};

L.marker([lat,lon], {
  rotationAngle: degrees,

}).addTo(map);
};

The data is a JSON with 4 points at 4 different coordinate locations, for a total of 16 different markers. I want to size each marker based on the variable "value". The rotationAngle part rotates the marker based on a property in the JSON to make a "petal plot" visualization at each location (4 "petals on a single point, each representing a different point in the JSON with different values and IDs).

I know I can make a new custom icon with my own image and what not, but I still don't know how to size each one based on a value in the JSON. I also know how to resize SVGs based on values (like circleMarkers) but I thought I'd give this a try and see if it's possible.

Best Answer

You're overwriting the defaults of L.Icon.Default on each pass of the loop, which looks like a huge antipattern. When you change the properties of L.Icon.Default, you change those for all default icons, not for just the next default icon.

Instead, create a new instance of L.Icon for each of your markers:

for (var i = 0, l = points.length; i < l; i++){

  ...

  L.marker([lat,lon], {
    rotationAngle: degrees,
    icon: L.icon({ 
      iconSize: [(6*value),(10*value)]
    })
  }).addTo(map);
}

Also, do read the custom icons tutorial, as it explains this technique.

Related Question