Raphael. js method of mapping China

In the recent data statistics project, the map of China is used, that is, the statistical data of a certain province and region is dynamically displayed on the map at a certain time. We do not need flash, but only rely on raphael. js and SVG images to complete the interactive operation of the map. In this article, I'll share with you how to use js for map interaction.

< img border = 0 id = theimg onclick = window. The open this. (SRC) SRC = "/ / files.jb51.net/file_images/article/201402/20140212102852.jpg? 2014112103917 ">

Raphale.js is a small javascript library, it can be in the web page to draw all kinds of vector graphics, all kinds of charts, as well as image clipping, rotation, motion animation and other functions. In addition, raphael.js is also cross-browser compatible, and also compatible with the old IE6 ah. Js can be found at http://raphaeljs.com/

The preparatory work

We need to prepare a vector map. We can find a vector map from the web, or we can draw a vector map in illustrator and export it to an SVG file. This file can be opened in a browser and the path information (the coordinates beginning with M) inside is extracted. And the path information, according to the format of chinamappath.js ready map path information.

var china = []; 

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 some ......... ,414.183z").attr(attr) 
    } 
    china.hk = { 
        //Format as above
    }; 
} 

Above is the map path information we have prepared to wrap in the () function, and save the file named chinamappath.js, for later call.

HTML

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

 

<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 want to put the map.
 

<div id="map"></div> 

JAVASCRIPT

First, we call the map in the page, the method is as follows:

window.onload = function () { 
    //map
    var R = Raphael("map", 600, 500);//Load the map into a div with an id of map and set the area to 600x500px.
    paintMap(R); 
} 

When we open it in the browser, it will show the map after loading. Next we will add the province name to the corresponding province area in the map, and the color change animation when the mouse moves over each province block.

 
window.onload = function () { 
    var R = Raphael("map", 600, 500); 
    //Calls the draw map 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) { 

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

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

The methods provided by Raphael in the above code include: getColor, getBBox, animate, toFront, etc. These can be found in the Raphael documentation and will not be covered in this article.
In addition, due to the size of the map, some province names are not properly placed in the map, and the offset needs to be corrected to make it look more comfortable.

window.onload = function () { 
    var R = 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 " 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); 
   } 
}