4

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.

3

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.

| improve this answer | |
  • Huh, that's not working for me. No markers end up on the map. A console.log reveals that it only goes through one iteration and fails at the marker instantiation. – Ross Thorn Jun 14 '17 at 16:21
  • After fiddling around with it, I've redefined my icon in another variable and also had to fill out the other default options (such as iconURL). Now I just have to figure out how to correctly place the icons with the rotation. Thanks for the help! – Ross Thorn Jun 14 '17 at 16:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.