CODEWITHSUNDEEP
javascriptleafletleaflet.markercluster
zahma
zahma

Reputation: 422

Leaflet not taking all data when extending markers

I have extended my leaflet object by setting two now attributes: - Value - Name

var customMarker = L.Marker.extend({
                options: {
                name: '',
                value: ''
                }
             });

Then I call this method:

L.geoJson(centroids,{
              pointToLayer: function(feature,geometry){
                var marker = new customMarker(geometry);
                marker.value = donnees[feature.properties.Index];
                marker.name = feature.properties.Index;
                console.log("name : "+marker.name+" volume : "+marker.volume)
                return marker;
              }
        });

But I noticed that not all the marker.value are stored in my markers. some have unidentified as value.

Upvotes: 1

Views: 1056

Answers (2)

Alex Parij
Alex Parij

Reputation: 1286

Looks like just JS issue. In your donnes array you don't have all the indexes you are trying to access

marker.value = donnees[feature.properties.Index];

that's why you get undefined in marker.value Check if donnees[feature.properties.Index] doesn't give you undefined and only then return a proper marker

Upvotes: 1

iH8
iH8

Reputation: 28638

What you are doing is creating new options in your extended L.Marker. You can set options during instanciation of your marker. Simple example:

// Extending marker with custom option
L.Marker.Custom = L.Marker.extend({
     options: {
          customValue: false
     }
});

// Instanciating without custom option:
var marker = new L.Marker.Custom([0,0]);
console.log(marker.options.customValue); //false

// Instanciating with custom option:
var marker = new L.Marker.Custom([0,0], {
    customValue: true
});
console.log(marker.options.customValue); //true

Thing is, that if you only need to have some custom options, there is no need to extend L.Marker but you can simply instanciate L.Marker with a custom option:

// Instanciating regular L.Marker with custom option:
var marker = new L.Marker([0,0], {
    customValue: true
});
console.log(marker.options.customValue); //true

You only need to extend L.Marker when you need a default value for your custom option.

Upvotes: 3

Related Questions