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.