CODEWITHSUNDEEP
javascriptleafletgeojson
nickislander
nickislander

Reputation: 11

Leaflet - How do I style a different geoJson feature based on common attributes?

I'm trying to style a polyline layer when a point layer is clicked in Leaflet. Both layers are currently geoJson format so I access their properties through 'feature.properties'.

I can get the 'Name' property for a selected point feature and I can separately highlight a polyline feature on a mouse event but I don't know how to call a function to highlight a polyline feature with the same attribute.

Here's my code to add a point layer and get the name attribute: 

//Add geoJson point layer
var points = L.geoJson(geoJsonPoints, {
    pointToLayer: function (feature, latlng) {
        var iconType = 'images/'+feature.properties.Type+'.png';
        var marker = L.marker(latlng,{
                        icon: L.icon({iconUrl: iconType})
            });     

        marker.on("click", function (e) {
            var ptID = feature.properties.Name;
          //Call function to highlight line feature
            highlightFeature(ptID);
            });

        return marker;
        },

    onEachFeature: onEachPointFeature}
    );

And here's my code for styling polylines:

//Create polyline highlight style
var highlightStyle = { 
        "color": "#2262CC",
        "weight": 7,
        "opacity": 1
    };

//Highlight polyline features on event
function highlightFeature(e) {
        var layer = e.target;
        // Change the style to the highlighted version
        layer.setStyle(highlightStyle);

        if (!L.Browser.ie && !L.Browser.opera) {
            layer.bringToFront();
        }       
    };

//Reset polyline style
function resetHighlight(e){
        var layer = e.target;
        layer.setStyle(defaultStyle); 
    };

Upvotes: 1

Views: 6300

Answers (1)

Don Vito
Don Vito

Reputation: 11

In my case I was pulling the data from postgres using php and depending on the common attribute (property) I included the color for each point when generating the gejson that will be added to the map.

PHP

$colors = array('1' => '#00CC00', '2' => '#FFD700');

// Loop through (iterate) all our records and add them to our array
while ($row = @pg_fetch_assoc($result))
{
    $properties = $row;        

    //exclude the coordinates from properties for the popup
    unset($properties['latitud']);
    unset($properties['longitud']);

    //add the color to each marker depending on the attribute grupo
    $properties ['color'] = $colors[$properties['grupo']];

    $feature = array(
        'type' => 'Feature',            
        'geometry' => array(
            'type' => 'Point',
            'coordinates' => array(
                floatval($row['longitud']),
                floatval($row['latitud'])
            )
        ),
        'properties' => $properties
    );

    array_push($geojson['features'], $feature);
}

Then to loaded into my leaflet map:

L.geoJson(marker, {
    style: function (feature) {
        return {color: feature.properties.color};
    },
    pointToLayer: function (feature, latlng) {
    return new L.CircleMarker(latlng, {radius: 5, fillOpacity: 0.55});
    }
}).addTo(markers);

I hope this helps you, let me know if you have questions.
Vito

Upvotes: 1

Related Questions