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

// Prepare demo data
// Data is joined to map using value of 'hc-key' property by default.
// See API docs for 'joinBy' for more info on linking data and map.
var data = [
    
];

// Create the chart
Highcharts.mapChart('container', {
    chart: {
        map: 'countries/es/es-na-all'
    },

    title: {
        text: 'Highmaps basic demo'
    },

    subtitle: {
        text: 'Source map: <a href="http://code.highcharts.com/mapdata/countries/es/es-na-all.js">Navarra</a>'
    },

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

    colorAxis: {
        min: 0
    },

    series: [{
        data: data,
        name: 'Random data',
        states: {
            hover: {
                color: '#BADA55'
            }
        },
        dataLabels: {
            enabled: true,
            format: '{point.name}'
        }
    }]
});