Maryland - Highmaps

Highmaps demo

by mram888

HTML

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script>
Highcharts.maps["countries/es/es-na-all"] = {"title":"Spain","version":"1.1.2","type":"FeatureCollection","copyright":"Copyright (c) 2015 Highsoft AS, Based on data from Natural Earth","copyrightShort":"Natural Earth","copyrightUrl":"http://www.naturalearthdata.com","crs":{"type":"name","properties":{"name":"urn:ogc:def:crs:EPSG:2062"}},"hc-transform":{"default":{"crs":"+proj=lcc +lat_1=40 +lat_0=40 +lon_0=0 +k_0=0.9988085293 +x_0=600000 +y_0=600000 +a=6378298.3 +b=6356657.142669561 +pm=madrid +units=m +no_defs","scale":0.000612848427797,"jsonres":15.5,"jsonmarginX":-999,"jsonmarginY":9851.0,"xoffset":142692.792586,"yoffset":1028372.5328}},

"features":[{"type":"Feature","id":"ES.NA","properties":{"hc-group":"admin1","hc-middle-x":0.49,"hc-middle-y":0.45,"hc-key":"es-na","hc-a2":"NA","labelrank":"3","hasc":"ES.NA","alt-name":null,"woe-id":"12578026","subregion":null,"fips":"SP88","postal-code":"NA","name":"Navarra","country":"Spain","type-en":"Autonomous Community","region":"Foral de Navarra","longitude":"-1.63845","woe-name":"Comunidad Foral de Navarra","latitude":"42.7493","woe-label":"Navarre, ES, Spain","type":"Comunidad...

CSS

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

JavaScript

// New map-pie series type that also allows lat/lon as center option.
// Also adds a sizeFormatter option to the series, to allow dynamic sizing
// of the pies.
Highcharts.seriesType('mappie', 'pie', {
    center: null, // Can't be array by default anymore
    clip: true, // For map navigation
    states: {
        hover: {
            halo: {
                size: 5
            }
        }
    },
    dataLabels: {
        enabled: false
    }
}, {
    getCenter: function () {
        var options = this.options,
            chart = this.chart,
            slicingRoom = 2 * (options.slicedOffset || 0);
        if (!options.center) {
            options.center = [null, null]; // Do the default here instead
        }
        // Handle lat/lon support
        if (options.center.lat !== undefined) {
            var point = chart.fromLatLonToPoint(options.center);
            options.center = [
                chart.xAxis[0].toPixels(point.x, true),
                chart.yAxis[0].toPixels(point.y, true)
            ];
        }
        // Handle dynamic size
        if (options.sizeFormatter) {
            options.size = options.sizeFormatter.call(this);
        }
        // Call parent function
        var result = Highcharts.seriesTypes.pie.prototype.getCenter.call(this);
        // Must correct for slicing room to get exact pixel pos
        result[0] -= slicingRoom;
        result[1] -= slicingRoom;
        return result;
    },
    translate: function (p) {
        this.options.center = this.userOptions.center;
        this.center = this.getCenter();
        return Highcharts.seriesTypes.pie.prototype.translate.call(this, p);
    }
});


var data = [
        // state, demVotes, repVotes, libVotes, grnVotes, sumVotes, winner, offset config for pies
        ['es-na', 729547, 1318255, 44467, 9391, 2101660, -1],
        
    ],
    maxVotes = 0,
    demColor = 'rgba(74,131,240,0.80)',
    repColor = 'rgba(220,71,71,0.80)',
    libColor = 'rgba(240,190,50,0.80)',
   ...