Raphael.js drawing method of map mapping in China _javascript skills

The most recent data-statistics project uses a map of China, which dynamically displays statistics for a particular province in a certain period of time, and we do not need flash, which relies solely on raphael.js and SVG images to complete the interactive operation of the map. In this article, I will share with you how to use JS to complete the map interaction.

First of all, the next raphael.js,raphael.js is a very small JavaScript library, it can be achieved in the Web page to draw a variety of vector graphics, various types of charts, as well as image cropping, rotation, motion animation and so on. In addition, Raphael.js is also compatible across browsers, and is also compatible with the oldest IE6. Raphael.js's official website address: http://raphaeljs.com/

Preparatory work

We need to prepare a vector map, you can find a vector map from the internet, or use illustrator to draw a vector map, and then export the file in SVG format, which can be opened on the browser, and then extract the path path information (the coordinates of the beginning of M). and the path path information is prepared in chinamappath.js format, and the map path information is ready.

Copy Code code as follows:

var-[];

function Paintmap (R) {
var attr = {
"Fill": "#97d6f5",
"Stroke": "#eee",
"Stroke-width": 1,
"Stroke-linejoin": "Round"
};

China.aomen = {
Name: "Macau",
Path:r.path ("M413.032,......... Omit a number of ..., 414.183z "). attr (attr)
}
china.hk = {
Format ditto
};
}

This is where we encapsulate the map path information into the () function and save the file name Chinamappath.js for later invocation.

Html

First, load the Raphael.js library file and the Chinamappath.js path information file in the Head section.

Copy Code code as follows:

<script type= "Text/javascript" src= "Raphael.js" ></script>
<script type= "Text/javascript" src= "Chinamappath.js" ></script>

Then place the div#map in the body where you need to place the map.

Copy Code code as follows:

<div id= "Map" ></div>

Javascript

First we call the map in the page as follows:

Copy Code code as follows:

Window.onload = function () {
Draw a Map
var R = Raphael ("Map", 600, 500);//load the map into a div with ID map and set the area to the 600x500px size.
Paintmap (R);
}

This time we open in the browser will show the loaded map. 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 each province block.

Copy Code code as follows:

Window.onload = function () {
var R = Raphael ("Map", 600, 500);
Call Drawing Map Method
Paintmap (R);

var textattr = {
"Fill": "#000",
"Font-size": "12px",
"Cursor": "Pointer"
};


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

(Function (St, state) {

Gets the center coordinates of the current graphic
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 () {//mouse sliding
St.animate ({fill:st.color, stroke: "#eee"}, 500);
china[state][' text '].tofront ();
R.safari ();
};
St[0].onmouseout = function () {//mouse left
St.animate ({fill: "#97d6f5", Stroke: "#eee"}, 500);
china[state][' text '].tofront ();
R.safari ();
};

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

The above code uses the method provided by Raphael: Getcolor,getbbox,animate,tofront and so on, these can be found in the Raphael document use instructions, this article is not described.
In addition, because of the size of the map, some provinces name in the map display location is not appropriate, need to correct the offset, so it looks comfortable.

Copy Code code as follows:

Window.onload = function () {
var R = Raphael ("Map", 600, 500);
...
For (var. in) {
...
(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 "Macau":
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);
}
}