0

enter image description hereenter image description hereI'm super stuck, pulling my hair out. I have graduated symbol map in leaflet of wildlife camera rates of detection. I have a form element that selects all species, bobcats, coyotes o grey foxes. All species is default map state and displays fine. When I select Bobcat, the 2nd dropdown option the color defined in my if/else statement is change based on the other colors underneath the bobcat selection. I know this because if I comment out the coyote and fox portion of the code the bobcat displays correctly. I'm sure it's something small but I can't figure it out. Below is the code specifically for the form element. I've added screenshots for context. The first shot shows Bobcats which should display as a hex value of #BB952F but the layers below it impede that color from displaying, even when stroke is set to false. The second screenshot is Grey Foxes that are the last layer in the code and as display as expected with a hex value of #ff0000. This layer works because there are no layers underneath. I just need to turn those layers off when the others are selected. Thanks in advance for your help.

  // make global
  let species = 'all'

  omnivore.csv('Data/DetectionRates_BCGF_V7.csv')
    .on('ready', function (e) {
      // access geoJson here
      drawMap(e.target.toGeoJSON());
      drawLegend(e.target.toGeoJSON());
      // console.log(e.target.toGeoJSON()) 
      // console.log(e.target)
      // all data loaded into the layer
    })
    .on('error', function (e) {
      // if the error can't be parsed or loaded over AJAX
      console.log(e.error[0].message);
    })

  function drawMap(data) {
    // console.log(data)
    const options = {
      pointToLayer: function (feature, ll) {
        // Letters instead of numbers
        return L.circleMarker(ll, {

          weight: 2,
          fillOpacity: 0,
          opacity: 1,
          

        });
      }

    }

    // create 4 separate layers
    const bobcatLayer = L.geoJson(data, options)
    coyoteLayer = L.geoJson(data, options)
    foxLayer = L.geoJson(data, options)
    interactiveLayer = L.geoJson(data, options).addTo(map);


    // fit the bounds to one of the layers
    map.fitBounds(interactiveLayer.getBounds());


    interactiveLayer.setStyle({
      weight: 2,
      color: '#222'
      

    });

    // adjust zoom level
    map.setZoom(map.getZoom() - .4);

    // set initial circle size in map
    resizeCircles(interactiveLayer, 9, species)

    // call sequenceUI function
    sequenceUI(interactiveLayer)
    dropDownUI(interactiveLayer)


  } // end drawMap

  function calcRadius(val) {
    const radius = Math.sqrt(val / Math.PI);
    return radius * 10; // adjust scale factor
  }
  // resize circles based on detection rates using radius scaling
  function resizeCircles(interactiveLayer, monthYear, species) {

    if (species == "all") {
      interactiveLayer.eachLayer(function (layer) {

        layer.setStyle({
         color: '#173560'

        })

        const props = layer.feature.properties
        const relativeDetRate = Number(props['b' + monthYear]) + Number(props['c' + monthYear]) + Number(props['f' + monthYear])
        const radius = calcRadius(relativeDetRate);
        if (radius == 0) {
          layer.setStyle({
            color: '#555',
            radius: 0.5
          })
        } else {
          layer.setRadius(radius);
        }

      });
    } else {

      interactiveLayer.eachLayer(function (layer) {

        layer.setStyle({
          color: '#333'

        })

        const props = layer.feature.properties
        const relativeDetRate = Number(props[species + monthYear])
        const radius = calcRadius(relativeDetRate);
        const color = function (species) {
          if (species == 'b') {
            return '#BB952F' 
          } else {
            return '#333'
          }
        }
        
        // console.log(color(species), species)
        if (radius == 0) {
          layer.setStyle({
            color: '#555',
            radius: 0.5
          })
        } else {
          layer.setRadius(radius)
          layer.setStyle({
          color: color(species)
          })

        }

      });

      interactiveLayer.eachLayer(function (layer) {

        layer.setStyle({
          color: '#A21E36'

        })

        const props = layer.feature.properties
        const relativeDetRate = Number(props[species + monthYear])
        const radius = calcRadius(relativeDetRate);
        const color = function (species) {
          if (species == 'c') {
            return '#A21E36' 
          } else {
            return '#333'
          }
        }
        // console.log(color(species), species)
        if (radius == 0) {
          layer.setStyle({
            color: '#555',
            radius: 0.5
          })
        } else {
          layer.setRadius(radius)
          layer.setStyle({
          color: color(species)
          })

        }

      });

      interactiveLayer.eachLayer(function (layer) {

        layer.setStyle({
          color: '#A21E36'

        })

        const props = layer.feature.properties
        const relativeDetRate = Number(props[species + monthYear])
        const radius = calcRadius(relativeDetRate);
        const color = function (species) {
          if (species == 'f') {
            return '#3A4B56' 
          } else {
            return '#333'
          }
        }
        // console.log(color(species), species)
        if (radius == 0) {
          layer.setStyle({
            color: '#555',
            radius: 0.5
          })
        } else {
          layer.setRadius(radius)
          layer.setStyle({
          color: color(species)
          })

        }

      });

      
     }
    retrieveInfo(interactiveLayer, monthYear)
  }
  • Thanks @ThomasG77 - I'm having trouble seeing where you made the changes. Can you identify for me? – Zac Stanley Jun 19 at 0:21
  • "Edited" does not mean I made change to the code itself: it was only reformating to set the block code with JavaScript highlighting (more readable) – ThomasG77 Jun 19 at 0:32
  • A picture or two would help in understanding your problem. – TomazicM Jun 19 at 5:33
  • Screen shots added with additional explanation. Thank you! – Zac Stanley Jun 19 at 15:05
  • Despite the pictures, logic of the code is to complex to go through it in the mind only. The only way to help you solve your problem is to have working example at some testing site like JSFiddle or CodePen. Otherwise it would be endless series of questions and answers in the comments section. – TomazicM Jun 19 at 16:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.