CODEWITHSUNDEEP
javascriptjsonhighcharts
matt
matt

Reputation: 97

HIghcharts Map from GeoJSON Data Showing Up Too Small

I am attempting to implement a custom interactive map using the Highcharts Maps JavaScript library (http://www.highcharts.com/maps/). I managed to get the map to appear on screen, but it far to small to view properly.

I took GeoJSON data for a map of Haiti with administrative boundaries.

The map is here: http://haitidata.org/layers/cnigs.spatialdata:hti_boundaries_communes_adm2_cnigs_polygon

This is a direct link to a GeoJSON file of the map data: http://haitidata.org/geoserver/wfs?srsName=EPSG%3A4326&typename=cnigs.spatialdata%3Ahti_boundaries_communes_adm2_cnigs_polygon&outputFormat=json&version=1.0.0&service=WFS&request=GetFeature

Here is my HTML file:

<!DOCTYPE html>

<html>
<head>
    <title>Homepage</title>
    <link rel="stylesheet" type='text/css' href="css/normalize.css" type="text/css">
    <link rel="stylesheet" type='text/css' href="css/main.css" type="text/css">
    <link rel="stylesheet" type='text/css' href="css/responsive.css" type="text/css">

    <!-- start JavaScript includes -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://code.highcharts.com/maps/highmaps.js"></script>
    <script src="http://code.highcharts.com/maps/modules/map.js"></script>
    <script src="js/haiti.js"></script> } 
    <!-- end JavaScript includes -->
</head>

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

<p>This is some text.</p>
</body>
</html>

This is the content of haiti.js, a JavaScript file with the code to initialize the map:

$(function () {

    // Prepare random data
    var data = [
        {
            "id_dept": 1,
            "value": 5000
        },
        {
            "id_dept": 2,
            "value": 10000
        },
        {
            "id_dept": 3,
            "value": 15000
        },
        {
            "id_dept": 4,
            "value": 20000
        },
        {
            "id_dept": 5,
            "value": 25000
        },
        {
            "id_dept": 6,
            "value": 30000
        },
        {
            "id_dept": 7,
            "value": 40000
        },
        {
            "id_dept": 8,
            "value": 5000
        },
        {
            "id_dept": 9,
            "value": 60000
        },
        {
            "id_dept": 10,
            "value": 70000
        },
    ];

    $.getJSON('js/haiti.json', function (geojson) {

        // Initiate the chart
        $('#container').highcharts('Map', {

            title : {
                text : 'GeoJSON in Highmaps'
            },

            mapNavigation: {
                enabled: true,
                enableDoubleClickZoom: true,
                buttonOptions: {
                    verticalAlign: 'bottom'
                }
            },

            colorAxis: {
            },

            series : [{
                data : data,
                mapData: geojson,
                joinBy: ['id_com', 'id_dept'],
                name: 'Random data',

                dataLabels: {
                    enabled: true,
                    format: '{point.properties.id_com}'
                }
            }]
        });
    });
});

I have placed the GeoJSON data of the map in a separate file titled haiti.json. See link at top of question.

What I am doing wrong? The map is being displayed far too small and I am not able to click and zoom in on it.

Here is a screenshot of what is displayed on my screen. The container for the map should be 500px by 500px, so the map is showing up much small at just a few pixels width and height. https://www.dropbox.com/s/844030r2o395zea/Screenshot%202014-08-01%2023.15.50.png

Upvotes: 0

Views: 2248

Answers (1)

Sebastian Bochan
Sebastian Bochan

Reputation: 37588

You can use maps from javascript and then use data module to add data to your map, like in the example: http://jsfiddle.net/X85CS/3/

var mapData = Highcharts.geojson(Highcharts.maps['countries/ht/ht-all']);

var data = [{
    "value": 1438,
    "code": "OU"
}];

Upvotes: 1

Related Questions