Leaflet polyline is not displayed with custom color

Question

I'm working on a project and I'm using Leaflet. From an object list extracted from the DB, I can currently display markers with custom icons. Now I'm working to display polylines from data I got in DB. With Javascript, I get the list and I arrive to display polylines but they are all blue where I want them to have differents colors depending on a property of the polyline.

var geoJsonFluxMatiere = {
    'type': 'FeatureCollection',
    'features': []
};
for (indexfluxMatiere = 0; indexfluxMatiere < listeFluxMatiere.length; indexfluxMatiere++) {
    var tableauFluxMatiere = {
        type: 'Feature',
        properties: {
            'id': listeFluxMatiere[indexfluxMatiere].idFluxMatiere,
            'fluxPrimaire': listeFluxMatiere[indexfluxMatiere].fluxPrimaire
        },
        geometry: {
            'type': 'LineString',
            'coordinates': [
                [listeFluxMatiere[indexfluxMatiere].posXDepart, listeFluxMatiere[indexfluxMatiere].poxYDepart],
                [listeFluxMatiere[indexfluxMatiere].posXArrivee, listeFluxMatiere[indexfluxMatiere].posYArrivee]
            ]
        }
    }
    geoJsonFluxMatiere['features'].push(tableauFluxMatiere);
}

var layerFluxMatiere = L.geoJson(geoJsonFluxMatiere, {
    pointToLayer: function (feature, latlng) {
        if(feature.properties.fluxPrimaire == true){
            var polylineFluxMatiere = new L.polyline(
                feature.geometry.coordinates,
                {
                    color: 'red',
                }
            );
        }else{
            var polylineFluxMatiere = new L.polyline(
                feature.geometry.coordinates,
                {
                    color: 'green',
                }
            );
        }
        return polylineFluxMatiere;
    },
}).addTo(map);

Coordinates are ok and the polylines are displayed where they have to but it's like color's parameter is ignored.
Did I do something wrong ?
By the way, I'm sorry for my english if it is not perfect. Thank you !

Raphaël

Answer 1

The pointToLayer option of Leaflet GeoJSON factory is used only for "Point" type geometries.

For "LineString" (polyline) type, you can use the style option instead. Note that it should directly return style options, not a layer.

Answer 2

When using .geoJSON(), you use the style option to style features. There are two ways to do it, and you will probably want to pass a function to the styles property that performs your check agains fluxPrimaire. Here is an example from the geoJSON Docs:

var states = [{
    "type": "Feature",
    "properties": { "party": "Republican" },
    "geometry": {
        "type": "Polygon",
        "coordinates": [[
            [-104.05, 48.99],
            [-97.22, 48.98],
            [-96.58, 45.94],
            [-104.03, 45.94],
            [-104.05, 48.99]
        ]]
    }
}, {
    "type": "Feature",
    "properties": { "party": "Democrat" },
    "geometry": {
        "type": "Polygon",
        "coordinates": [[
            [-109.05, 41.00],
            [-102.06, 40.99],
            [-102.03, 36.99],
            [-109.04, 36.99],
            [-109.05, 41.00]
        ]]
    }
}];

L.geoJSON(states, {
    //this is where you will perform your check to change the polyline color
    style: function (feature) {
        switch (feature.properties.party) {
            case 'Republican': return { color: "#ff0000" };
            case 'Democrat': return { color: "#0000ff" };
        }
    }
}).addTo(map);

In your case, you can try something like:

var layerFluxMatiere = L.geoJson(geoJsonFluxMatiere, {
  style: function (feature) {
    if(feature.properties.fluxPrimaire == true){
        return { color: '#ff0000' };
    }else{
        return { color: '#0000ff' };       
     }
  },
}).addTo(map);