Proportional symbols map using Leaflet jQuery isn t working

0 votes

I am super new to this so sorry if this is super easy, but I am trying to make a proportional symbols map using Leaflet and JQuery, following this tutorial: https://neiugis.github.io/lab7/

Basically, I had my json saved as a local file, and my getJSON request looked like this: $.getJSON("CTHValue.geojson")

but I ran into an CORS error, so I decided to upload my json to an online host. Here is the link: https://api.myjson.com/bins/nh71g. However, my code still doesn't seem to work, the symbols are not showing up on my map, but I am not getting an error in the console. I need some help! My code is as follows:

    function addCTHValue() {

    $.getJSON('https://api.myjson.com/bins/nh71g')
    .done(function(data) {
    });

    function processCTHValueData(data) {

    var min = Infinity;
    var max = -Infinity; 

    for (var feature in data.features) {
        var properties = data.features[feature].properties;

      for (var attribute in properties) {
          if ( attribute = 'CTH Value' )

          {
              if (properties[attribute] < min) {
                  min = properties[attribute];
              }
              if (properties[attribute] > max) {
                  max = properties[attribute];
              }
          }
      }
  }
  return {
      min : min,
      max : max
  }
}           
    function CTHValueSymbols(data) {

      CTHValueCountries = L.geoJson(data, {

          pointToLayer: function(feature, latlng) {
              return L.circleMarker(latlng, { 
                  fillColor: "#501e65", 
                  color: '#501e65',      
                  weight: 2,             
                  fillOpacity: 0.5       
              }).on({
                    mouseover: function(e) {
                        this.openPopup();
                        this.setStyle({fillColor: 'green'});
                    },
                    mouseout: function(e) {
                        this.closePopup();
                        this.setStyle({fillColor: '#501e65'});
                    }
            });
          }
      }).addTo(map);
    }

    function calcCTHValueRadius(attributeValue) {

      var scaleFactor = 0.01; 
      var area = attributeValue * scaleFactor;

      return Math.sqrt(area/Math.PI);
    }

            $.getJSON('https://api.myjson.com/bins/nh71g')
    .done(function(data) {
        var info = processCTHValueData(data);
        calcCTHValueRadius(info.data);
    });
}

Do I need to do a XMLHttpRequest or is citing the link sufficient? I wrote the following XMLHttpRequest, but tbh I don't know what I am supposed to do with this request, like, where in my code does it go? Am I supposed to replace the link in the $.getJSON request? What do I replace it with? Do I need to create a variable for the json which I can then cite in the $.getJSON request?

    let requestURL = 'https://api.myjson.com/bins/nh71g';

    let request = new XMLHttpRequest();

    request.open('GET', requestURL);

    request.responseType = 'json';

    request.send();

If anyone can spot what is wrong I'd really appreciate it. Please let me know about the XML request too, bc idk if that's what is causing my issue.

Aug 19, 2022 in Web Development by gaurav
• 23,260 points
563 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In Web Development

0 votes
1 answer

How to create a simple map using JavaScript/JQuery

var map = new Object(); // or ...READ MORE

answered Jun 27, 2022 in Web Development by rajatha
• 7,680 points
1,320 views
0 votes
1 answer

How can I create a simple page vertical scroll bar without using jQuery?

Surprisingly, there is not a great, simple ...READ MORE

answered Jun 22, 2022 in Web Development by rajatha
• 7,680 points
514 views
0 votes
1 answer

How to place images using jQuery masonry plugin to start

You were just missing a css class that adjusts ...READ MORE

answered Jun 22, 2022 in Web Development by rajatha
• 7,680 points
531 views
0 votes
1 answer

Using Jquery Ajax to retrieve data from Mysql

Perform a AJAX GET request to get ...READ MORE

answered Jun 23, 2022 in Web Development by rajatha
• 7,680 points
23,155 views
0 votes
1 answer

Adding a page loader using jQuery

“html loader using jquery” Code Answer $('body'). append('<div ...READ MORE

answered Jun 27, 2022 in Web Development by rajatha
• 7,680 points
1,037 views
0 votes
1 answer

JQuery - Change event using element by name

How to trigger a event with event ...READ MORE

answered Jun 28, 2022 in Web Development by rajatha
• 7,680 points
2,915 views
0 votes
1 answer

TypeError: $.ajax(...) is not a function?

Please double-check if you're using the full-version ...READ MORE

answered Feb 22, 2022 in Others by Aditya
• 7,680 points
6,831 views
0 votes
1 answer
0 votes
1 answer
0 votes
0 answers

file_get_contents("php://input") or $HTTP_RAW_POST_DATA, which one is better to get the body of JSON request?

The file_get_contents("php://input") or $HTTP_RAW_POST_DATA - which one ...READ MORE

Jun 23, 2022 in PHP by narikkadan
• 63,680 points
1,160 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP