How to process a large number of tags in Google map (ASP. NET) (original-translation)

 

When you have a reasonable number of tags, it is common to make Google map tags. However, once you have hundreds or even more targets, your performance quickly begins to decrease. InArticle, I will tell you some ways to improve performance. At the same time, I will put a test page to compare their efficiency.

If you are using Google map for the first time, I suggest you first understand some basic principles and operations for using tags on Google map.

The marker Manager-keeps track of them

Your first choice may be to use markermanager because it is a utility library provided by Google. First, add the tag to markermanager, instead of adding each marker to map one by one using gmap2.addoverlay. Markermanager keeps track of all your tags. By defining several different zoom-levels, you can place the marker set that may appear at the same level to avoid displaying a large number of marker at the same time.

Markermanager is a little slower at first than adding it directly to a map, but the advantage of adding this is that you can better control them.

Use addmarker (gmarker, minzoom, maxzoom ?) Add the tag to markermanager. This method carries three parameters. The first one is the tag you want to add, and the last two parameters are optional, however, it defines the level at which the mark is visible.

A simple example

// Create a new map

VaR map = new gmap2 (document. getelementbyid ('map '));

Map. setcenter (New glatlng (59.5, 14.0), 6 );

// Create a new instance of the markermanager

VaR Mgr = new markermanager (MAP );

// Create a new marker

VaR marker = new gmarker (New glatlng (59.0, 13.80 ));

// Add marker to the markermanager

Mgr. addmarker (Marker );

Obviously, no one wants to add a single tag to the markermanager, but if you have hundreds of tags, this may be the case.

Bulk adding the markers

The more efficient way to use markermanager is to add all the tags to an array, and then use addmarkers (markerarray, minzoom, maxzoom ?) Add this array to markermanager.

 

// Create a new instance of the markermanager

VaR Mgr = new markermanager (MAP );

// Create marker Array

VaR markers = [];

// Loop to create markers and adding them to the markermanager

For (VAR I = 0; I <50; I ++ = 0.1 ){

VaR marker = new gmarker (New glatlng (59.0 + I, 13.80 + I ));

Markers. Push (Marker );

}

// Add the array to the markermanager

Mgr. addmarkers (markers );

// Refresh the markermanager to make the markers appear on the map

Mgr. Refresh ();

Note that you must call Mgr. Refresh () after adding an array with tags to markermanager (). You do not need to add marker one by one.

Additional Method Removemarker (Marker)

Remove a tag from markermanager.

Clearmarkers ()

Remove all tags.

Getmarkercount (zoom)

Returns the number of tags under the specified zoom-level.

 

Markermanager is a utility library provided by Google. You can download the following link:Source codeAnd instructions and examples. Google Maps markermanager SVN:

Http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/

 

Marker light-markers on a diet (highlight mark-capital mark)

Google's Pamela Fox makes a simple markerlight to reduce complex tags and improve efficiencyProgram. The price for doing so is that you can only display an image on a map, but you cannot interact with it. If you do not need to interact with the program, this method is really a simple way to improve the performance, the only difference is that you create a markerlight, not a gmarker.

The author pamelas later explained why this method improves efficiency:

Gmarker takes so long because it is actually composed of multiple DOM elements-foreground, shadow, print version, clickable area, etc.

If your purpose is only to display, you can create a goverlay extension (or background color or even better) Like a div with a background URL like markerlight)

------ Pamela Fox

Here is how to use it:

Map. addoverlay (New markerlight (latlng, {image: "red_dot.png "}));

 

Red_dot.png is used in marker. This is the smallest and simplest one. You can try to test the efficiency with different numbers of tags on pamelas test page. Download markerlight. js

 

Using marker light in combination with markermanager-use marker light with markermanager

Adding markerlight with markermanager in a centralized manner has many advantages, and it is really easy, just to combine the two.

Mgr. addmarker (New markerlight (latlng, {image: "red_dot.png "}));

The reason for this is that you can display different numbers of tags at different scaling levels. This method ensures that not many tags are displayed at the same time.

Clusterer-only show what you need

Another method is to use the Acme lab cluster clusterer. This is a third-party library that allows you to add tags more quickly. It is released under the BSD license and is provided free of charge.

You only need to do two things, and the efficiency will be faster:

1.Only visible tags are created.

2.If too many tags need to be displayed, they are combined to form a cluster tag. 

This will enable your map to maintain good performance even with thousands of tags. My tests show that this method is much more efficient than using markermanager.

Here is how to use it:

// Create a clusterer object

VaR clusterer = new clusterer (MAP );

// Create marker

VaR marker = new gmarker (New glatlng (57.8, 14.0 ));

// Add marker to the map

Clusterer. addmarker (Marker, 'text to infobox ');

Call clusterer. removemarker (Marker) to remove the tag from the map. There are also some ways to change the behavior of the logo.

1. 1.Clusterer. seticon (gicon) 

Change the cluster icon

1. 2.Clusterer. setmaxvisiblemarkers (N) 

Set the maximum number of visible tags. The default value is 150.

1. 3.Clusterer. setminmarkerspercluster (N)

Sets the minimum number of tags for a tag set. The default value is5.

1. 4.Clusterer. setmaxlinesperinfobox (N)

Set the maximum number of lines of text in the information box. The default value is 10.

Download clusterer2.js

 

Clustermarker-chunk 'em all up

Clustermarker is a free JavaScript Library released according to the GNU General Public License and can add tags in a centralized manner. The unique line of this library is that it will automatically detect tags, intersect with each other and aggregate them into a tag cluster.

The following figure shows how it works:

Images by Martin Pearman

The constructor has two parameters:

VaR cluster = new clustermarker (MAP, options ).

 

Map is a reference for map objects and options referenced by an object with the following attributes (MapIs a reference to the map object andOptionsIs an object literal that can have these properties :)

1. 1.Clustermarkericon [gicon]

Change the default cluster icon to the selected icon.

1. 2.Markers [array]

All you want to passClustermarkerArray of tags

In addition to these attributes, you can also use all other attributes in the class to view the complete document description list documentation.

The following is how to use the leastCodeTermarker:

VaR markerarray = [];

// Insert code to fill the markerarray with markers...

// Creating a new cluster by adding the map and the markerarray

VaR cluster = new clustermarker (MAP, {markers: markerarray });

// Refreshing to show the added markers

Cluster. Refresh ();

This code will insert tags on the map. If they are close enough, they will be represented by an icon. For more information about the methods and attributes of fine-grained operations, see the clustermarker project page. Clustermarker project page.

Markerclusterer-the new kid in town

All of the tools used in this library are up-to-date. I did not write this article yet. This library is written by Wu xiaoxi and is part of the open source code tool library of Google map. It is easy to use and has excellent performance.

Like other class libraries, They aggregate together to make it easier to have an overview, reducing the number of visible tags. View the following image to see how:

 

Image by xiaoxi Wu

 

Its constructor requires three parameters. The first is the map reference, the second is a gmarkers array, and the third is the selected object and text. Only the first parameter is required.

VaR markers = [];

// Insert code to fill the markerarray with markers...

// Creating a new cluster by adding the map and the array of markers

VaR markercluster = new markerclusterer (MAP, markers );

View the complete documentation and its function documentation. For more information, go to the googlegeo development blog to read markerclusterer: a solution to the too release markers problem.

 

Compare performance

Compare the different techniques on the test page

I was inspired by Pamela Fox's test page on markerlight, and I made my own test page.

You can also test the performance of all different practices in this article.

Result:

I run a test in several different browsers. For each test, I use different technologies to add 500 tags, And I refresh the browser between each test. All testing platforms use a 3.60 GHz Pentium 4 processor and a 2 GB memory PC with super threads running Windows XP.

Load times in milliseconds (MS)

 

In this test, clusterer2 is the fastest in all technologies. But you need to know if this is real data, because I can only measure the time from when I submit them to when the mark is passed to the map, rather than knowing the actual time when the mark is seen on the map. With this in mind, I think markerclusterer is the fastest technology, followed by clustermarker.

 

When talking about browsers, the best-performing browser is a browser with green labels, and the worst-performing browser with red labels. No doubt, ie has poor performance. Google Chrome and Safari show that their JavaScript Engine and performance have been fast.

 

If you have any good idea to improve this test so that it can be better measured until the actual time is displayed on the map, please contact me through sharing or my homepage in the comments. Contact page.

 

Conclusion

Using the technology in this article, the execution results are generally good, because you don't have an incredible number of tags. For some special occasions, these technologies cannot meet your needs, and you will have to take more extreme measures, such as creating a large cover layer to cover all the tags, however, this is beyond the scope of this article.

 

I hope these technologies will help you, happy coding!