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 in Web Development by gaurav
• 18,960 points
26 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 in Web Development by rajatha
• 7,440 points
49 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 in Web Development by rajatha
• 7,440 points
67 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 in Web Development by rajatha
• 7,440 points
28 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 in Web Development by rajatha
• 7,440 points
979 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 in Web Development by rajatha
• 7,440 points
40 views
0 votes
1 answer

JQuery - Change event using element by name

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

answered Jun 28 in Web Development by rajatha
• 7,440 points
60 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 in Others by Aditya
• 7,660 points
844 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 in PHP by narikkadan
• 19,680 points
26 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP