0

I'm making an online map using leaflet and I'd like to add custom line symbols.

I am NOT trying to make custom markers. I say this because the internet is full of how to: tutorials for markers, and I've got that figured out, but i can't seem to find a tutorial for making line features.

closed as off-topic by PolyGeo May 16 '18 at 6:57

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions seeking help to debug/write/improve code must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Providing a clear problem statement and evidence of a code attempt will help others to help you. See: How to create a Minimal, Complete, and Verifiable example." – PolyGeo
If this question can be reworded to fit the rules in the help center, please edit the question.

1

OK, here's my attempt:

Read my code from the bottom up. You define the GeoJSON Layer, telling it to use my styleLine function. That function has an option: color, which uses an attribute value from my data called Field4LineColor (whatever field your using to classify against) Now my getColor function looks at it's value and assigns a specific color for that value.

Where do I find the style options: http://leafletjs.com/reference-1.0.3.html#path

You setup some functions like this one for color, you might have one for width, Dashes, etc..

// setup colors by field values.  colors can also be hex or RGB
function getColor(d) {
    return d == '1' ? 'red' :
        d == '2' ? '#FF5500' :
        d == '3' ? '#FFFF00' :
        d == '4' ? '#38A800' :
        d == '5' ? '#73B2FF' :
        d == '6' ? '#DF73FF' :
        '#CCEDFF';
}


function styleLines(feature) {
    return {
                color: getColor(feature.properties.Field4LineColor),
                weight: 10,
                opacity: .7,
                dashArray: '20,15',
                lineJoin: 'round',  //miter | round | bevel 

            };
}


L.geoJSON(roads,{ 
style: styleLines
}).addTo(map);

Not the answer you're looking for? Browse other questions tagged or ask your own question.