Making a map of China using Highmaps

Highmaps Required Documents

Http://code.highcharts.com/maps/highmaps.js
( the core file of the map render must be referenced)
Http://code.highcharts.com/maps/modules/data.js
( the core file for map data stitching and parsing must be referenced)
Http://code.highcharts.com/maps/modules/drilldown.js
(Map to expand the core of the details of plug-ins, if you need to click to display provinces and cities need to reference, but not need to reference)
Http://sandbox.runjs.cn/uploads/rs/228/zroo4bdf/cn-all-sar-taiwan.js
(* Map of the main capital of China's coordinates and related data plug-ins must be referenced, and this file by myself, add the cn-name field used to display Chinese obvious, if you do not need to download the official click here)

• Highcharts.maps[‘countries/cn/custom/cn-all-sar-taiwan‘]This code is used to get all-sar-taiwan.js the core JSON data that introduces the file cn-.

• Highcharts.geojsonMethod converts the JSON data into the JSON format required for map parsing.

• Map data Construction, here I used false data, data from the introduction of the JS file obtained, and then traverse to get all the provincial capital information, and give value and drilldown assign value, notice, here this.drilldown is used to click on the map to use the value, examples of the use of hc-key nodes, of course, you can define their own arbitrary

• $.each (data, function (i) { This.drilldown = this.properties[' Hc-key ']; });

• Then, to focus on the event of clicking on the map drilldown , it is drilldown necessary to retrieve the JSON information for all cities and counties corresponding to the provincial capital. That's why you need to define drilldown attributes above, and get different JSON files based on the unused provincial capitals. For example, when I clicked on the Beijing event, the value was CN-BJ. Then go and ask for information about the city.

  1 2 3 4 5 6 7 8 9 All 16

  $.getjson ('/uploads/rs/228/zroo4bdf/bei_jing.geo.json ', function (JSON) {    data = Highcharts.geojson (JSON);       $.each (data, function (i) {         this.value = i;    }) ;     chart.hideloading ();     cleartimeout (fail);     Chart.addseriesasdrilldown (E.point, {         Name:e.point.name,   &N Bsp     Data:data,         DataLabels: {             Enab Led:true,             format: ' {point.name} '        } &nbs P  }); });

You can see the above code I request fixed is the Beijing JSON file, to dynamically need to according to drilldown the value passed over to request a different file, it becomes the following:

1 2 3

$.getjson (' https://api.github.com/repos/peng8/GeoMap/contents/json/' + e.point.drilldown+ '. Json ', function (JSON) { This writing is dynamic, according to the city's identifier to obtain the corresponding city data });

Highmaps json file for each city coordinate in China

The official only provides the provincial capital's coordinates, but does not provide the coordinates of the Chinese cities. So the author fork A list of Chinese city coordinates online.

-----------------------------------------------Example----------------------------------------------

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">$(function() {highcharts.setoptions ({lang:{drilluptext:"Return > {series.name}"        }    });//Geojson Core Data    vardata = Highcharts.geojson (highcharts.maps[' Countries/cn/custom/cn-all-china '), small = $ (' #container '). Width () < 400; $.each (data,function(i) { This. drilldown = This. properties[' Drill-key '];  This. value=i; });//Get Point NamefunctionGetPoint (e) {console.log (e.point.name);} //Initialize Map    $(' #container '). Highcharts (' Map '), {chart: {events: {drilldown:function(e) {if(!e.seriesoptions) {varChart = This; /*mapkey = ' countries/china/' + e.point.drilldown + '-all ', fail = setTimeout (function ( ) {if (! Highcharts.maps[mapkey]) {chart.showloading (' <i class= "Icon-frown" ></i> ;                                         Load failed ' + e.point.name);                                        Fail = setTimeout (function () {chart.hideloading ();                                    }, 1000); }}, 10000);*/                        varcname=e.point.properties["Cn-name"];//CNAME = acquired "Cn-name"chart.showloading (' <i class= ' icon-spinner icon-spin icon-3x ' ></i> ');//Load in                        //Loading City Data$.ajax ({type:"GET", URL:"http://data.hcharts.cn/jsonp.php?filename=GeoMap/json/" + e.point.drilldown+ ". Geo.json", ContentType:"Application/json; Charset=utf-8 ", DataType:' Jsonp ', Crossdomain:true, Success:function(JSON) {data=Highcharts.geojson (JSON); $.each (data,function(i) { This. value = i;//random value, the value of the city after entering the province    This. events={};  This. events.click=GetPoint;                                });                                 Chart.hideloading ();                                    Chart.addseriesasdrilldown (E.point, {name:e.point.name, Data:data, DataLabels: {enabled:true, Format:' {point.name} '//set the Display form, which shows the city data of each province                                    }                                }); }, Error:function(XMLHttpRequest, Textstatus, Errorthrown) {}}); }                      This. Settitle (NULL, {text:cname});//This shows the name of the province on the right of the chart, which can be rolled back}, Drillup:function () {                     This. Settitle (NULL, {text: ' China '});//The right side shows China, and the provinces show the provinces                }            }        },//titletitle: {text:' Map of China '}, Subtitle: {text:‘‘, Floating:true, align:' Right ', y:50, Style: {fontSize:' 16px '}}, Legend:small?{}: {layout:' Vertical ', align:' Right ', VerticalAlign:' Middle '        },        //tooltip:{        //Pointformat: "{point.properties.cn-name}:{point.value}"        //},//provincial and municipal degree color settingcoloraxis: {min:0, stops: [[0, ' #EFEFFF '],                        [0.5, Highcharts.getoptions (). colors[0]],                        [1, Highcharts.color (Highcharts.getoptions () colors[0]). Brighten (-0.5). Get ()]]}, Mapnavigation: {enabled:true, Buttonoptions: {verticalalign:' Bottom '}}, Plotoptions: {map: {states: {hover: { Color:' #EEDD66 '                      }                }            }        },//by default, the map chart does not display data labels. The user needs to be enabled in the data column. At this point, you need to use the configuration item enabled to Trueseries: [{data:data, Name:‘‘, DataLabels: {enabled:true, Format:' {point.properties.cn-name} '//set the Display form, which shows the city name}}], Drilldown: {activedatalabelstyle: {color:' #FFFFFF ', textdecoration:' None ', Textshadow:' 0 0 10px #000000 '}, Drillupbutton: {relativeto:' Spacingbox ', Position: {x:0,//Horizontal offset Distancey:60                }            }        }    });}); </script>
--------------------------------------------------------------------------------------------------------------- --
Reference from http://bluereader.org/article/14511014
Making a map of China using Highmaps