2

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/[email protected]/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.

2 Answers 2

1

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);
4
  • I added your code to my .js file as you can see below, but the features didn't appear. I feel I'm missing something really basic. Looking at the code can you give me a hint? Commented Jun 7, 2017 at 18:05
  • I have added this but still the features do not appear on the map. Should the line features appear with no more than <script src="/js/segments.js"></script> .....in the body of the index file and L.geoJSON(segments,{ style: styleLines }).addTo(map); in the .js file? Commented Jun 7, 2017 at 18:11
  • In your segments.js you might need var roads= at the start. of your GeoJSON or var segments= as in your example Commented Jun 7, 2017 at 19:54
  • Yeah, I did that. Commented Jun 7, 2017 at 20:39
0

I noticed this:

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

..... ...

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

You're bringing in the lines twice, first without styling and once with styling.

Step back and try a simple example of what your trying to do.

https://jsfiddle.net/bchappell61/kwxr9f39/

1
  • Okay, that's hilarious. Makes me feel like I tied my shoes together :) - One MAJOR issue I had is I didn't realize that browsers don't do a "hard refresh" when you hit F5. So because I was doing all the work on the neocities web hosting service, I relied on the browser's refresh ability to "show" me whether or not what I had just done actually worked. SO there were times when I actually coded something correctly or functionally BUT I was looking at the cached version again and again and wondering what i was doing wrong. Thanks for your help and example! Commented Jun 11, 2017 at 15:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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