1

I have GeoJSON that could be either a point or line and I am trying to make the layer red. Here is the code:

function styling(feature) {
    return {
        color: 'red',
    };
}               
geoms = new L.GeoJSON(jsdata,{
    style: styling,
    onEachFeature: function(feature, layer) {
    if (feature.properties.Address){
        return layer.bindPopup('<b>Segmentid</b> = ' +feature.properties.SegmentID
        +'<br>'+
        '<b>Address</b> = ' +feature.properties.Address)
        }
    else if(feature.properties.NodeID){
        return layer.bindPopup('<b>NodeID</b> = ' +feature.properties.NodeID
        +'<br>'+
        '<b>Street1</b> = ' +feature.properties.XST1
        +'<br>'+
        '<b>Street2</b> = ' +feature.properties.XST2
            )
        }
    else if(feature.properties.SegmentID){
        return layer.bindPopup('<b>SegmentID</b> = ' +feature.properties.SegmentID)
        }
    }
  });
geoms.addTo(map);

There is NO error anywhere and the color is the default blue.

  • 1
    You cannot make point red since it has no dimensions, but for lines it should work. Can you post a piece of your GeoJSON? – TomazicM Apr 23 at 17:24
  • @TomazicM you're right the polylines do change...so how would I also change the marker? – ziggy Apr 23 at 17:51
  • 1
    Your saviour is pointToLayer option, see example leafletjs.com/examples/geojson – TomazicM Apr 23 at 18:03
  • @TomazicM thanks that helped me solve it – ziggy Apr 24 at 2:20
  • Please provide your solution as an answer to your question and mark it as solved. – Stefan Apr 24 at 8:29
0

Since the geojson that will be passed through the leaflet geojson function will be either a point or line (never both together) I essentially created two styling arguments (not sure what you would describe them in my case).

for Lines - style: styling this took care of the styling

for Points - (credit to @TomazicM)

pointToLayer: function (feature, latlng) {
            return L.circleMarker(latlng, geojsonMarkerOptions);

took care of the styling

function styling(feature) {
    return {
        fillColor: "#ff7800",
        weight: 5,
        opacity: 1,
        color: "#ff7800",
        dashArray: '3',
        fillOpacity: 1
    };
}
var geojsonMarkerOptions = {
    radius: 8,
    fillColor: "#ff7800",
    color: "#000",
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
};          
geoms = new L.GeoJSON(jsdata,{
    style: styling,
    pointToLayer: function (feature, latlng) {
            return L.circleMarker(latlng, geojsonMarkerOptions);
        },
    onEachFeature: function(feature, layer) {
    if (feature.properties.Address){
        return layer.bindPopup('<b>Segmentid</b> = ' +feature.properties.SegmentID
        +'<br>'+
        '<b>Address</b> = ' +feature.properties.Address)
        }
    else if(feature.properties.NodeID){
        return layer.bindPopup('<b>NodeID</b> = ' +feature.properties.NodeID
        +'<br>'+
        '<b>Street1</b> = ' +feature.properties.XST1
        +'<br>'+
        '<b>Street2</b> = ' +feature.properties.XST2
            )
        }
    else if(feature.properties.SegmentID){
        return layer.bindPopup('<b>SegmentID</b> = ' +feature.properties.SegmentID)
        }
    }
  });
geoms.addTo(map);
| improve this answer | |

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.