Leaflet - choropleth styling geojson polygon data via button click

Question

I'm learning through failure here but still having trouble understanding why my code below isn't styling my geoJSON layer properly nor adding it to my map.

     lyrNeighbourhoods= new L.GeoJSON.AJAX("data/Neigh_Demo1.geojson",{style: {weight:1, fillOpacity:0.1},
         onEachFeature: function (feature, layer) {
         layer.bindTooltip(feature.properties.Neigh_Name, {
             direction:"center",
             permanent:true,
             className: 'labelstyle'
         });
         layer.bindPopup(feature.properties.Neigh_Name);
     }
     }).addTo(mymap);


     var lyrNeighbourhoods2020Pop = new L.geoJSON.ajax("data/Neigh_Demo1.geojson");

     var style1 ={
             weight: 2,
             opacity: 1,
             color: 'red',
             dashArray: '3',
             fillOpacity: 0.7,
             fillColor:'red'
     }   

     var geojson = L.geoJSON.ajax(lyrNeighbourhoods2020Pop, {
         style: style1,
     }).addTo(mymap);


     var tooltipThreshold = 13;
     mymap.on('zoomend', function() {
       if (mymap.getZoom() < tooltipThreshold) {
           $(".leaflet-tooltip").css("display","none")
       } else { 
           $(".leaflet-tooltip").css("display","block")

       }
     });



     // ******** Setup Layer Control **********

     objBasemaps={
         "Grey Scale Map": lyrCartoDB,
         "Satellite Aerial": lyrAerial,
     };

     objOverlays={
         "Neighbourhoods": lyrNeighbourhoods,
     };

     ctlLayers=L.control.layers(objBasemaps, objOverlays,{position:'bottomright'}).addTo(mymap);   /* add layer control to bottomright */

          $(document).ready(function() {  
            
            $('#mapid').height(window.innerHeight); //set map height to window
            $('#leftpanel').height(window.innerHeight); // set panel height to window


            $(document).on('click','#btnCustomize',function() {      /* on button click, pull out left panel or close it */
            if($('#leftpanel').hasClass('in')) {
                $('#leftpanel').removeClass('in')
            } else {
                $('#leftpanel').addClass('in')
            }
        });
        });

        $(document).on('click','#btnColor',function() {
            mymap.removeLayer(lyrNeighbourhoods)
            mymap.addLayer(lyrNeighbourhoods2020Pop)
        });
        
        function getColor(prop) {
            return prop > 40355 ? '#800026' :
                   prop > 30277  ? '#BD0026' :
                   prop > 21196  ? '#E31A1C' :
                   prop > 14407  ? '#FC4E2A' :
                   prop > 0  ? '#FD8D3C' :
                                '#FFEDA0';
        }
        
        
        function onEachFeature(feature, layer){
            if(layer instanceof lyrNeighbourhoods2020Pop){ // because markers have not the function .setStyle()
        lyrNeighbourhoods2020Pop.on('mouseover',(e)=>{
           var prop = feature.properties["Total Population 2020"];
           e.target.setStyle({color: getColor(prop)});
        });
       
        layer.on('mouseout',(e)=>{
           geojson.resetStyle(e.target)
        });
    }};
        
    var geojson = L.geoJSON.ajax(lyrNeighbourhoods2020Pop, {
     style: style1,
     onEachFeature: onEachFeature
    }).addTo(mymap);

I've been working off of the generic Leaflet-doc Choropleth example but am still getting stuck.

Lastly, for my own knowledge, can imported geoJSON files have spaces in the filename or does that create problems? I have been trying to use attributes like: ..feature.properties.Total Population 2020

Apologies if these are overly simple questions. I'm learning quick and usually solve things eventually but after a couple of hours, I call it and reach out.

UPDATE: I've replaced the original code with where i'm currently at. I'm sure my issues are arising from overall script formatting in addition to how i'm structuring my calls.

Falke Design Falke Design · Accepted Answer · 2020-10-30T09:46:30

the problem is that your return in the style a function but it only needs a object:

     var lyrNeighbourhoods2020Pop = new L.geoJSON.ajax("data/Neigh_Demo1.geojson");

     var style1 ={
             weight: 2,
             opacity: 1,
             color: 'red',
             dashArray: '3',
             fillOpacity: 0.7,
             fillColor:'red'
     } 


     var geojson = L.geoJSON.ajax(lyrNeighbourhoods2020Pop, {
         style: style1,
     }).addTo(mymap);

set the style of the layer, i add a mouseover listener but you can call this from a button:

     var lyrNeighbourhoods2020Pop = new L.geoJSON.ajax("data/Neigh_Demo1.geojson");

     var style1 ={
             weight: 2,
             opacity: 1,
             color: 'red',
             dashArray: '3',
             fillOpacity: 0.7,
             fillColor:'red'
     } 

     function onEachFeature(feature, layer){
        if(layer instanceof L.Path){ // because markers have not the function .setStyle()
           layer.on('mouseover',(e)=>{
               var prop = feature.properties.colorprop;
               e.target.setStyle({color: getColor(prop)});
           });
           
           layer.on('mouseout',(e)=>{
               geojson.resetStyle(e.target)
           });
     }

     var geojson = L.geoJSON.ajax(lyrNeighbourhoods2020Pop, {
         style: style1,
         onEachFeature: onEachFeature
     }).addTo(mymap);

I don't recommand to use spaces in names but yes it is working, you can read it out with feature.properties["Total Population 2020"]

Leaflet - choropleth styling geojson polygon data via button click

1 Answers