1

I'm reading in a large JSON object that has multiple layers within the same object. The structure is like so:

{
    "type": "FeatureCollection",
    "name": "AllProgrammedProjects",
    "crs": {
        "type": "name",
        "properties": {
            "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
        }
    },
    "features": [{
            "type": "Feature",
            "properties": {
                "ID": 2,
                "ProjectID": "0012506X",
                "ProjectNam": "I-26 over SC 302",
                "ProjectDes": "I-26 over SC 302 Bridge Replacement and Interchange Upgrade",
                "BudgetCate": "Operational & Safety",
                "ProjectTyp": "Interchange Improvement",
                "ProjectAct": "Design\/Development",
                "LocationLi": "Lexington",
                "Route_Leng": 1.4,
                "ROW_Year": 2003,
                "CON_Year": 2020,
                "DateOfCurr": "Currently Undetermined",
                "SCDOT_Cont": "Jae Mattox",
                "SCDOT_Con1": "MattoxJH@scdot.org",
                "LocationTy": "Road",
                "RouteLRS": "32010002600E",
                "SegmentBeg": 112.5,
                "SegmentEnd": 113.5,
                "RouteDescr": "I-26",
                "MPO": "COATS",
                "Status1": null,
                "Contact_Nu": "(803) 737-1805",
                "COUNTY_NAM": "LEXINGTON",
                "COG": "CENTRAL MIDLA",
                "PriorityCo": "BR-INTNHS"
            },
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [-85.534770830624609, 32.398104157650017],
                    [-85.534633972042457, 32.39791557487046],
                    [-85.534364899661909, 32.397537624044901],
                    [-85.534207535164825, 32.397302292846959],
                    [-85.534110830421426, 32.397130347856773],
                    [-85.534079221152481, 32.397070467667184],
                    [-85.533991311939118, 32.396903933123156],
                    [-85.53392699651333, 32.396769874052822],
                    [-85.533865093938445, 32.396632037137088],
                    [-85.533611878276488, 32.395955507469395],
                    [-85.533607289864804, 32.395943555374338],
                    [-85.53336872279246, 32.395322120767062],
                    [-85.533246923816222, 32.394986445677233],
                    [-85.533242719705569, 32.394975517690625],
                    [-85.533158934055976, 32.39475772823959],
                    [-85.533017038618539, 32.394388887688457],
                    [-85.532873115249615, 32.394004117977566]
                ]
            }
        },
        {
            "type": "Feature",
            "properties": {
                "ID": 3,
                "ProjectID": "0012506X",
                "ProjectNam": "I-26 over SC 302",
                "ProjectDes": "I-26 over SC 302 Bridge Replacement and Interchange Upgrade",
                "BudgetCate": "Operational & Safety",
                "ProjectTyp": "Repaving",
                "ProjectAct": "Design\/Development",
                "LocationLi": "Lexington",
                "Route_Leng": 1.4,
                "ROW_Year": 2003,
                "CON_Year": 2020,
                "DateOfCurr": "Currently Undetermined",
                "SCDOT_Cont": "Jae Mattox",
                "SCDOT_Con1": "MattoxJH@scdot.org",
                "LocationTy": "Road",
                "RouteLRS": "32040030200E",
                "SegmentBeg": 21.6,
                "SegmentEnd": 22.0,
                "RouteDescr": "SC302",
                "MPO": "COATS",
                "Status1": null,
                "Contact_Nu": "(803) 737-1805",
                "COUNTY_NAM": "LEXINGTON",
                "COG": "CENTRAL MIDLA",
                "PriorityCo": "BR-INTNHS"
            },
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [-85.534229625011235, 32.395303407760039],
                    [-85.534068203756362, 32.395471291395936],
                    [-85.533775827800142, 32.395775271450432],
                    [-85.533585266326938, 32.395971459323647],
                    [-85.53342543040921, 32.396136412477311],
                    [-85.532948771123046, 32.396628334137674],
                    [-85.532915884039099, 32.396662314688776]
                ]
            }
        }
    ]
}

If I wanted to create a leaflet layer group for each of the ProjectTyp in the object, how would I go about doing that? With this example, it would be two controls, one for Interchange Improvement and one for Repaving.

2

Is this what you are looking for: http://www.gistechsolutions.com/leaflet/DEMO/roads/plines.html

Your GeoJSON is from a file in the same folder as the HTML file. I called it roads.json, look for url variable on the page, If you're using a service, put the real url in there instead of the file name.

Next I created a layer1 and filtered it for "Repaving", and a Layer2 for the other.

Then added them into the layer control.

Look at working example above, right click view source to see my code.

var road1 = L.geoJson(null, {  
        color:'black',

        onEachFeature: function (feature, layer) {
            var popupContent = "<p><b>Project Name: </b>" +
            feature.properties.ProjectNam +
            "<br> Project Type: " + feature.properties.ProjectTyp + "</p>" ;

            layer.bindPopup(popupContent);

        },
        filter: function(feature, layer) {   
            return (feature.properties.ProjectTyp == "Repaving" );
        }

    });

    // Add GeoJSON to road layer
    $.getJSON(url, function(data) {
       road1.addData(data);
    });

    //Add road layer to map
    road1.addTo(map);
  • Thanks Bill, I forgot about the filter option in Leaflet! – Matt Oct 8 at 14:54

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.