GeoJSON Not Working with Highmaps

Question

I am trying to use a custom GeoJSON file (Massachusetts counties) to display random data values using HighMaps.

Here is the jfiddle of what I have done so far, but is not working...

$(function () {

// Prepare random data
var data = [
    {
        "COUNTY": "SUFFOLK",
        "value": 25
    },
    {
        "COUNTY": "MIDDLESEX",
        "value": 35
    },
];

$.getJSON('http://shearanalytics.net/test.geojson', function (data) {

Ultimately, I am trying to replicate what is done here

Answer 1

If you had read the documentation on Highmaps or taken a look at their Fiddle of that demo: you could have read / seen that Highmaps uses jQuery. In your Fiddle, you're not loading jQuery thus Highmaps won't work and your call to $.getJSON will also fail. This throws a lot of errors to your console window, check your devtools.

Second the URL you're requesting:

$.getJSON('http://shearanalytics.net/test.geojson', function (data) {
    ...
});

does not allow to be loaded via XHR from another domain, which throws the following error to your console:

XMLHttpRequest cannot load http://shearanalytics.net/test.geojson. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access.

You'll need to save that file and run it from the same domain as where you are hosting your page/scripts. You can't run/test that in a JSfiddle.

I'de read up on debugging if i was you, so you can learn to spot these mistakes. Don't know what browser you are using but this should get you started:

Chrome: https://developer.chrome.com/devtools/docs/console

Firefox: https://developer.mozilla.org/en-US/docs/Tools/Web_Console

Internet Explorer: https://msdn.microsoft.com/library/ie/bg182326(v=vs.85)