Search code examples
javascriptjqueryhighmaps

Geojson Incomplete Rendering in JsFiddle for Highmaps Useage

I am interested in creating maps of local voter districts, that can be usable in Highmaps. I am loading the maps in JsFiddle as noted in the HighCharts Custom Geojson Maps help section.

I am struggling to get my geojson map of the local State Assembly District into a format that will generate a Highmap map. I checked my geojson code in a test boiler on JsFiddle (please see below for image), and it worked exactly as I wanted it too, however when I create a fiddle to generate the map, a blank image is generated. Any help would be greatly appreciated. My dashboard with the code.

Geojson Boiler Tester Output:

HTML

<script src="http://code.highcharts.com/maps/highmaps.js"></script>

<div id="container"></div>

CSS

#container {
height: 500px; 
width: 500px; 
margin: 0 auto; 
}
.loading {
 margin-top: 10em;
 text-align: center;
 color: gray;
}

JavaScript

Code too long for stackoverflow to properly load, please see dashboard for code

Solution

  • You have several errors:

    1. You must include jQuery in the left "Frameworks & Extensions".
    2. The json code have syntax errors! Use jsLint or jsHint to see them.
    3. The expected format of the "series" object is wrong too! It expects the metadata inside a "metaData" attribute.

    Check out your code now, but working ;) --> CODE

    $(function () {
    // Initiate the chart
    $('#container').highcharts('Map', {
        series : [{
            mapData: { // <-- HERE IS THE METADATA ATTRIBUTE!
                "type":"FeatureCollection",
                .....                 
            }
        }]
    });
});

    I hope this can help you!!