[GIS] GeoJSON add and format line features to a Leaflet map

geojsonleaflet

I'm putting some line features on a Leaflet web map.

Thus far I have been able to add point features, following this tutorial, which has me turning the GeoJSON into a JavaScript variable then kicking out the following JavaScript code:

    var skull = L.icon({
    iconUrl: 'images/blackSkull.svg',
    iconSize: [38, 95],
    popupAnchor: [1, -20],}); 

function fatalitiesLayer (feature, 
layer) {
    layer.bindPopup("<h1>Cyclist Fatality</h1><p>name: "+feature.properties.name+ 
    "</p>date: "+feature.properties.date+ 
    "</p>location: "+feature.properties.location+ 
    "</p>cause: "+feature.properties.cause+ 
    "</p>"
    );
    layer.setIcon(skull);
}

L.geoJson(fatalities,{
    onEachFeature: fatalitiesLayer
}).addTo(map);

var linesFeatureLayer = L.geoJson(segments);
linesFeatureLayer.addTo(map);

function styleLines(segments) {
    return {
                color: black,
                weight: 10,
                opacity: .7,
                dashArray: '20,15',
                lineJoin: 'round'
            };
}


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

Note that the fatalities are points and the segments are lines. As things stand the points show up on the map but not the lines.

Additionally this is what my index file looks like: 

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>LeafletMap</title>
  <link href="style.css" type="text/css" rel=stylesheet>

  </head>

<body>

  <div id="map"></div>

  <script src="/js.jquery.js."></script>
  <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
  <script src="/js/fatalities.js"></script>
  <script src="/js/segments.js"></script>
  <script src="js/script_blank.js"></script>


</body>

</html>

Thus far all the tutorials I've found that made much sense to me were about creating one or two line features, but I've got about two hundred in a GeoJSON file and I'm not sure how to proceed.

Best Answer

I use two functions, one to set a style in which I read a value from that I will use to differentiate my line styles. The other sets the colors for the values in that field. 

// 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'
            };
}


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