Highcharts Demo

author(s): Torstein Hønsi

by sgearhart2

HTML

<script src="http://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/custom/us-small.js"></script>
<div id="container"></div>
<script type="text/javascript">
Highcharts.maps["countries/us/custom/us-small-offshore"] = {"title":"United States of America, small","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:102004"}},"hc-transform":{"default":{"crs":"+proj=lcc +lat_1=33 +lat_2=45 +lat_0=39 +lon_0=-96 +x_0=0 +y_0=0 +datum=NAD83 +units=m +no_defs","scale":0.000151481324748,"jsonres":15.5,"jsonmarginX":-999,"jsonmarginY":9851.0,"xoffset":-2361356.09818,"yoffset":1398996.77886},"us-all-hawaii":{"xpan":190,"ypan":417,"hitZone":{"type":"Polygon","coordinates":[[[1747,3920],[3651,2950],[3651,-999],[1747,-999],[1747,3920]]]},"crs":"+proj=aea +lat_1=8 +lat_2=18 +lat_0=13 +lon_0=-157 +x_0=0 +y_0=0 +datum=NAD83 +units=m +no_defs","scale":0.000123090941806,"jsonres":15.5,"jsonmarginX":-999,"jsonmarginY":9851.0,"xoffset":-338610.47557,"yoffset":1022754.31736},"us-all-alaska":{"rotation":-0.0174532925199,"xpan":5,"ypan":357,"hitZone":{"type":"Polygon","coordinates":[[[-999,5188],[-707,5188],[1747,3920],[1747,-999],[-999,-999],[-999,5188]]]},"crs":"+proj=tmerc +lat_0=54 +lon_0=-142 +k=0.9999 +x_0=500000 +y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs","scale":5.84397059179e-05,"jsonres":15.5,"jsonmarginX":-999,"jsonmarginY":9851.0,"xoffset":-1566154.00853,"yoffset":1992671.14918}},

"features":[  
    {
      "type" : "Feature",
      "id" : 1,
      "geometry" : {
        "type" : "Polygon",
        "coordinates" : [
        ...

CSS

#container {
	height: 600px; 
	width: 500px;  
}

JavaScript

(function () {     
    // Initiate the chart
    $('#container').highcharts('Map', {
        series: [{
            mapData: Highcharts.maps["countries/us/custom/us-small-offshore"]
        }, {
        mapData: Highcharts.maps["countries/us/custom/us-small"]
        }]
    });    
})();