2

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.

Improve this question
4
  • 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? Commented Apr 23, 2020 at 17:24
  • @TomazicM you're right the polylines do change...so how would I also change the marker? Commented Apr 23, 2020 at 17:51
  • 1
    Your saviour is pointToLayer option, see example leafletjs.com/examples/geojson Commented Apr 23, 2020 at 18:03
  • Please provide your solution as an answer to your question and mark it as solved. Commented Apr 24, 2020 at 8:29

1 Answer 1

Reset to default
1

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.