Example of map area data statistical display using php and jquery

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 data information of the corresponding province in the pop-up box. Applicable to scenarios such as data statistics and map block display

 

 

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 div # tip in the body to display the prompt box of MAP information.

The Code is as follows:

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

<Div id = "tip"> </div>

 

 

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 div # tip, and adds the name of the corresponding province and the number of active users to the prompt box for display. See 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 ("

}, 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}