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/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.

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);
  • 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? – Edward Curran Jun 7 '17 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? – Edward Curran Jun 7 '17 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 – Bill Chappell Jun 7 '17 at 19:54
  • Yeah, I did that. – Edward Curran Jun 7 '17 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/

  • 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! – Edward Curran Jun 11 '17 at 15:17

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.