Raphael.js Map of China

In this article to share how to use Raphael.js to complete the map interaction, Raphael.js is a very small JavaScript library, it can be in the Web page to draw a variety of vector graphics, various types of charts, as well as image clipping, rotation, motion animation and so on, the need for friends can refer to the

Recent data statistics project to use the Chinese map, that is, on the map dynamically showing a certain period of time in a province of statistics, we do not need flash, relying solely on raphael.js and SVG images can complete the map of the interactive operation.     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/  Preparation   We need to prepare a vector map, you can find a vector map from the internet, or use illustrator to draw a vector map, It is then exported to a file in SVG format, which can be opened on the browser and extracted with the path path information (coordinates at the beginning of M). and the path path information is prepared in chinamappath.js format, and the map path information is ready.     Code as follows: Var-[];    function Paintmap (R) {      var attr = {    &NBSP ;     "Fill": "#97d6f5",          "Stroke": "#eee",          "St Roke-width ": 1,         " Stroke-linejoin ":" Round "     };      &N Bsp China.aomen = {          Name: "Macau",          Path:r.path ("M413.032,.. ....... Omit some ..., 414.183z "). attr (attr)      }      china.hk = {        &NB Sp Format ditto      }; }      above we encapsulate the prepared 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.      code as follows: <script type= "Text/javascript" src= "raphael.js" ></script>  <script type = "Text/javascript" src= "Chinamappath.js" ></script>      then place 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:     Code as follows: Window.onload = function () {     //drawing map       var R = Raphael ("Map", 600, 500) //load the map into a div with ID map and set the area to 600x500px size.       Paintmap (R); }      This time we'll open it with a browser to display a 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.     Code as follows: Window.onload = function () {      var R = Raphael ("map", +);      Call Drawing Map method       Paintmap (R);        var textattr = {      &NBsp   "Fill": "#000",          "font-size": "12px",          "cursor": "Pointer"      };                     for (VAR) In-{          china[state][' path '].color = Raphael.getcolor (0.9);      &NB Sp     (function (St, state) {               //Get the central coordinates of the current graph     &N Bsp         var xx = St.getbbox (). x + (St.getbbox (). Width/2);            & nbsp var yy = St.getbbox (). Y + (St.getbbox (). Height/2);               //write text   & nbsp           china[state][' text '] = R.text (xx, yy, china[state][' name ')). attr (textattr);  & nbsp             st[0].onmouseover = function () {//mouse sliding to           &NBsp       St.animate ({fill:st.color, stroke: "#eee"}, +);              &N Bsp   china[state][' text '].tofront ();                  R.safari ();  &N Bsp          };              st[0].onmouseout = function () {//mouse Leave                   st.animate ({fill: "#97d6f5", Stroke: "#eee"},);                  china[state][' text '].tofront ();                  R.safari ();             };        &NB Sp   &NBSP}) (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. The     code is as follows:Window.onload = function () {      var R = Raphael ("map", +);      ...    & nbsp For (var. in-) {          ...          (function (St, state) {               ....              switch (china[state) [' Name ']) {                  case "Jiangsu":                      XX = 5;                      YY = 10 ;                      break;          &NB Sp       Case "Hebei":                      XX = 10;&nbsp ;                     YY = 20;           / nbSp         break;                  case "Tianjin":    & nbsp                 XX = 10;                & nbsp     YY + 10;                      break;    &N Bsp             case "Shanghai":                      XX = 10;                      break;      &N Bsp           case "Guangdong":                      yy = 10;                      break;        &N Bsp         case "Macau":                     yy + 10;                      break;        &N Bsp         case "Hong Kong":                      XX = 2 0;                      YY + 5;                      break;                  Case "Gansu": & nbsp                     XX = 40;            & nbsp         YY-= 30;                      BREAK;&N Bsp                 case "Shaanxi":                      XX = 5;                      YY + 10;  &nBsp                   break;              &NBS P   Case "Inner Mongolia":                      XX = 15;    &nbs P                 YY = 65;                & nbsp     break;                  default:        &NB Sp    }              ...       }) (china[state][' path '), St ATE);     } }