1

I'm pretty new with Leaflet and have a basic question: I added this pop-up to my loaded GeoJSON file according to Leaflet, but it won't work.

Any hint?

// load external GeoJSON file
var nonregWash = $.getJSON("../assets/NonRegulatoryWashes.geojson", function (data) {
    // create GeoJSON layer and add it to the map
    L.geoJson(data, {
            style: function (feature) {
                switch (true) {
                    case feature.properties.Name.includes('Non-Regulatory'):
                        return {
                            color: "CornflowerBlue", weight: 1
                        };
                    case feature.properties.Name.includes('Regulatory'):
                        return {
                            color: "DarkBlue", weight: 1
                        };
                    default:
                        return {
                            color: "Black", weight: 1
                        };
                }
            }
        }) ** // add popup to the layer**
        .bindPopup(function (layer) {
            return layer.feature.properties.description;
        }).addTo(map);
});
Improve this question
2
  • NonRegulatoryWashes.geojson file contains points, lines or polygons?
    – ThomasG77
    Commented May 18, 2021 at 20:51
  • ThomasG77,They are lines, exported from shapefiles in QGIS
    – GwezaKwer
    Commented May 18, 2021 at 21:00

2 Answers 2

Reset to default
2

Below a working solution for lines. I've changed the colors to distinct better the result for the demo purpose and also the path to the GeoJSON file. FYI, you at least made an error at ** // add popup to the layer**. It should be // add popup to the layer or /* add popup to the layer */

<!DOCTYPE html>
<html>
<head>
    <title>Quick Start - Leaflet</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>
    var map = L.map('mapid').setView([51.505, -0.09], 13);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
    }).addTo(map);
    var nonregWash = $.getJSON("NonRegulatoryWashes.geojson", function (data) {
        L.geoJson(data, {
            style: function (feature) {
                switch (true) {
                    case feature.properties.Name.includes('Non-Regulatory'):
                        return {
                            color: "Red", weight: 1
                        };
                    case feature.properties.Name.includes('Regulatory'):
                        return {
                            color: "Green", weight: 1
                        };
                    default:
                        return {
                            color: "Black", weight: 1
                        };
                }
            }
        })
        .bindPopup(function (layer) {
            return layer.feature.properties.description;
        }).addTo(map);
    });
</script>
</body>
</html>

Demo in action

Improve this answer
3
  • Thank you Thomas,
    – GwezaKwer
    Commented May 18, 2021 at 21:49
  • Thank you, It worked. I compared your script to mine and didn't see much difference, except for the console.log(data) that was missing from my script, or I'm missing something else? I tried to understand how console.log(data) made this difference, but no luck! --P.S. The asterisks were added to the comment when I tried to make it Bold, and I thought it is how it works :)
    – GwezaKwer
    Commented May 18, 2021 at 21:58
  • Clean the comments in your original code. Nearly sure it was the issue. Asterisks make things bold in Markdown not in JavaScript or HTML
    – ThomasG77
    Commented May 18, 2021 at 22:32
1

Instead of:

   var nonregWash = $.getJSON("../assets/NonRegulatoryWashes.geojson", function (data) {

I would go with:

   var url1 = "../assets/NonRegulatoryWashes.geojson";

   var item;

and next:

     var nonregWash = $.getJSON(url, function (data) {
  


   item = L.geoJson(data, {

               /*
               pointToLayer: function(feature, latlng) {
               return L.circleMarker(latlng, {
               radius:6,
               opacity: .5,
               color:getColor(feature.properties.League),
               fillColor:  getColor(feature.properties.League),
               fillOpacity: 0.8
    },
                     */
        style: function (feature) {
            switch (true) {
                case feature.properties.Name.includes('Non-Regulatory'):
                    return {
                        color: "CornflowerBlue", weight: 1
                    };
                case feature.properties.Name.includes('Regulatory'):
                    return {
                        color: "DarkBlue", weight: 1
                    };
                default:
                    return {
                        color: "Black", weight: 1
                    };
            }
        }
    }) ** // add popup to the layer**
    .bindPopup(function (layer) {
        return layer.feature.properties.description;
    }).addTo(map);
   });

Just in case, you can use PointtoLayer attribute, where you will define the element appearance on your map.

The JQuery can't simply pick up the geojson URL, as you want. It needs to have some variable defined, which will store this URL for it. An analog thing applies to the object. You started to define the style, whereas the object variable hasn't been set.

Improve this answer

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.