GeoJSON не работает с Highmaps

Question

Я пытаюсь использовать пользовательский файл GeoJSON (графства Массачусетс) для отображения случайных значений данных с помощью HighMaps.

Вот то, что я сделал до сих пор, но не работает...

$(function () {

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

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

В конечном итоге я пытаюсь повторить то, что здесь сделано

Answer 1

Если вы читали документацию по Highmaps или взглянули на их Fiddle этой демонстрации: вы могли прочитать / увидеть, что Highmaps использует jQuery. В вашей Fiddle вы не загружаете jQuery, поэтому Highmaps не будет работать, и ваш вызов $.getJSON также не удастся. Это приводит к большому количеству ошибок в вашем окне консоли, проверьте ваши devtools.

Второй URL, который вы запрашиваете:

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

не позволяет загружаться через XHR из другого домена, что приводит к следующей ошибке на вашей консоли:

XMLHttpRequest не может загрузить http://shearanalytics.net/test.geojson. В запрошенном ресурсе отсутствует заголовок "Access-Control-Allow-Origin". Поэтому происхождение ' http://fiddle.jshell.net/' не разрешено.

Вам нужно сохранить этот файл и запустить его из того же домена, где вы размещаете свою страницу / сценарии. Вы не можете запустить / проверить это в JSfiddle.

Я бы прочитал об отладке на вашем месте, чтобы вы могли научиться распознавать эти ошибки. Не знаю, какой браузер вы используете, но вы должны начать:

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)