Example of map area data statistical display using php and jquery

We need to display more information in limited blocks on the map. A better way is to achieve this through map interaction. This article will show you how to move the cursor to the specified province area of the map and show the corresponding province in the pop-up box.

We need to display more information in limited blocks on the map. A better way is to achieve this through map interaction. This article will show you how to move the cursor to the specified province area of the map and show the corresponding province in the pop-up box.

HTML

First, load raphael in the head. js library file and chinamapPath. the js path information file is not repeated in this article. The only difference is that you need to add a p # tip in the body to display the prompt box of MAP information.

The Code is as follows:

JQuery

Call raphael to draw a map of China and load the statistical data. Because the map block is small, we do not display the data on the map block when the map is loaded ,, we use mouse interaction to better display data to users. When the mouse slides to the province block. pageX and e. pageY locates the mouse coordinates, then uses jquery's css () method to locate the prompt box p # tip, and adds the name of the corresponding province and the number of active users to the prompt box for display. Please refer to the Code:

The Code is as follows:

$ (Function (){
$. Get ("json. php", function (json ){

Some codes are omitted here.

Var I = 0;
For (var state in china ){
China [state] ['path']. color = Raphael. getColor (0.9 );
(Function (st, state ){
Var prodata = data [I];
Var fillcolor = colors [arr [I];
St. attr ({fill: fillcolor}); // fill in the background color
XOffset = 70;
Yoffset= 180;
St. hover (function (e) {// scroll down
St. animate ({fill: "# fdd", stroke: "# eee" },500 );
R. safari ();
$ ("# Tip" ).css ({"top" :( e. pageY-xOffset) + "px", "left" :( e. pageX-yOffset) + "px "}). fadeIn ("fast ")
. Html ("" + china [state] ['name'] +"

Active users: "+ prodata +"

");
}, Function () {// move the mouse away
St. animate ({fill: fillcolor, stroke: "# eee" },500 );
R. safari ();
$ ("# Tip"). hide ();
});

St. mousemove (function (e) {// move the mouse
$ ("# Tip" ).css ({"top" :( e. pageY-xOffset) + "px", "left" :( e. pageX-yOffset) + "px "});
R. safari ();
});

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

The code above shows that when the jQuery hover () mouse slides to the province block, a prompt box is called and the data is loaded and displayed in the prompt box. It is worth noting that, we also need to add an effect, that is, when you move mousemove () on the province block, you should also call the prompt box to move along with the mouse, otherwise, when the mouse slides in a province block, the prompt box position will not change, which will affect the user experience. A small change can improve the user experience.
Finally, if you need to customize the effect of the prompt box, you can set the CSS style of the prompt box. The simple CSS code in this example is as follows:

The Code is as follows:

# Tip {position: absolute; width: 180px; border: 1px solid # d3d3d3; background: # fff; display: none;
-Moz-border-radius: 5px;-webkit-border-radius: 5px; overflow: hidden; border-radius: 5px;
-Moz-box-shadow: 1px 1px 2px rgba (0, 0,. 2);-webkit-box-shadow: 1px 1px 2px rgba (0, 0,. 2 );
Box-shadow: 1px 1px 2px rgba (0, 0,. 2 );}
# Tip h4 {height: 28px; line-height: 28px; padding-left: 6px; background: # f0f0f0}
# Tip p {line-height: 24px; padding: 2px 4px}