How to draw a map of China using raphael. js

A map of China is used in the recent data statistics project, that is, to dynamically display the statistics of a province or region in a certain period of time on the map. We don't need flash, just rely on raphael. javaScript and SVG images can complete map interaction. In this article, I will share with you how to use js to complete map interaction.

First, we will briefly introduce raphael. js, raphael. javascript is a small javascript library that allows you to draw various vector graphs, charts, image cropping, rotation, motion animation, and other functions on a webpage. In addition, raphael. js is compatible with other browsers and ie6. Raphael. js official website address: http://raphaeljs.com/

Preparations

We need to prepare a vector map. We can find a vector map from the Internet, or use illustrator to draw a vector map and export it as a file in SVG format. This file can be opened in a browser, then extract the path information (coordinates starting with M ). Prepare the path information in chinamapPath. js format.

Copy codeThe Code is as follows:
Var china = [];

Function paintMap (R ){
Var attr = {
"Fill": "#97d6f5 ",
"Stroke": "# eee ",
"Stroke-width": 1,
"Stroke-linejoin": "round"
};

China. aomen = {
Name: "Macao ",
Path: R. path ("M413.032,... omitted a number...). attr (attr)
}
China.hk = {
// The same format as above
};
}

The preceding Code encapsulates the prepared map path information in the () function and saves the file name chinamapPath. js for future calls.

HTML

First, load the raphael. js library file and the chinamapPath. js path file in the head section.

 Copy codeThe Code is as follows:
<Script type = "text/javascript" src = "raphael. js"> </script>
<Script type = "text/javascript" src = "chinamapPath. js"> </script>

Then place div # map in the position where the map needs to be placed in the body.
 Copy codeThe Code is as follows:
<Div id = "map"> </div>

JAVASCRIPT

First, call the map on the page. The method is as follows:

Copy codeThe Code is as follows:
Window. onload = function (){
// Draw a map
Var R = Raphael ("map", 600,500); // load the map to the div with id map and set the area to x px.
PaintMap (R );
}

In this case, the loaded map is displayed in the browser. Next, we will add the province name to the corresponding province area in the map, and the color-changing animation effect when the mouse slides to the block of each province.

Copy codeThe Code is as follows:
Window. onload = function (){
Varr = Raphael ("map", 600,500 );
// Call the Map Drawing Method
PaintMap (R );

Var textAttr = {
"Fill": "#000 ",
"Font-size": "12px ",
"Cursor": "pointer"
};


For (var state in china ){
China [state] ['path']. color = Raphael. getColor (0.9 );

(Function (st, state ){

// Obtain the central coordinates of the current image
Var xx = st. getBBox (). x + (st. getBBox (). width/2 );
Var yy = st. getBBox (). y + (st. getBBox (). height/2 );

// Write text
China [state] ['text'] = R. text (xx, yy, china [state] ['name']). attr (textAttr );

St [0]. onmouseover = function () {// scroll down
St. animate ({fill: st. color, stroke: "# eee" },500 );
China [state] ['text']. toFront ();
R. safari ();
};
St [0]. onmouseout = function () {// move the mouse away
St. animate ({fill: "#97d6f5", stroke: "# eee"}, 500 );
China [state] ['text']. toFront ();
R. safari ();
};

}) (China [state] ['path'], state );
}
}

The above Code uses the methods provided by raphael: getColor, getBBox, animate, toFront, and so on. You can find instructions in the raphael document.
In addition, due to the map size, the display position of some province names in the map is not appropriate and the offset needs to be corrected to make it look comfortable.

Copy codeThe Code is as follows:
Window. onload = function (){
Varr = Raphael ("map", 600,500 );
...
For (var state in china ){
...
(Function (st, state ){
....
Switch (china [state] ['name']) {
Case "Jiangsu ":
Xx + = 5;
Yy-= 10;
Break;
Case "Hebei ":
Xx-= 10;
Yy + = 20;
Break;
Case "Tianjin ":
Xx + = 10;
Yy + = 10;
Break;
Case "Shanghai ":
Xx + = 10;
Break;
Case "Guangdong ":
Yy-= 10;
Break;
Case "Macao ":
Yy + = 10;
Break;
Case "Hong Kong ":
Xx + = 20;
Yy + = 5;
Break;
Case "Gansu ":
Xx-= 40;
Yy-= 30;
Break;
Case "Shaanxi ":
Xx + = 5;
Yy + = 10;
Break;
Case "Inner Mongolia ":
Xx-= 15;
Yy + = 65;
Break;
Default:
}
...
}) (China [state] ['path'], state );
}
}