How to handle a large number of buttons in Bing Maps

Question

I use Bing Maps with Ajax and I have about 80,000 places to reset pushpins. The purpose of this function is to allow the user to search for restaurants in Louisiana and click on the button to view information about the physical examination.

Obviously, it’s not very good to have 80,000 contacts on the card, but I am trying my best to find the best solution to this problem. Another problem is that the distance between these places is very small (all 80,000 are in Louisiana). I know that I can use clustering so as not to clutter up the card, but it looks like it will cause performance problems anyway.

What I'm trying to do now is simply not to show any contacts to a certain zoom level, and then only show contacts in the current view. The way I'm currently trying to do this is to use the changechange event to find the zoom level and map borders, and then query the database (via the web service) for any points in this range.

It seems to me that I'm wrong. Is there a better way to manage this large amount of data? It would be better to try to download all the points first, and then have the data at hand without hitting my web service every time the map moves. If so, how do I do this?

I could not find the answers to my questions, which usually means that I am asking the wrong questions. If someone could help me figure out the right question, it would be very helpful.

Answer 1

Well, I took a slightly different approach to this. It was just a fun exercise, but I display all my data (about 140,000 points) in Bing Maps using an HTML5 canvas.

I preloaded all the data to the client. Then I optimized the drawing process so much that I attached it to the "Viewchange" event (which constantly fires during the process of changing the view).

I wrote about this on my blog. You can check it out here .

There is no interaction in my example, but can be easily done (should be a good topic for a blog post). Thus, you must manually process the events and look for the corresponding points yourself or, if the number of points to draw and / or the zoom level was below a certain threshold, display the usual buttons.

---

Anyway, another option, if you are not limited to Bing Maps, is to use similar Leaflet . It allows you to create a canvas layer, which is a tile-based layer, but rendered on the client side using an HTML5 canvas. This opens up new possibilities. See, for example, this map in GisCloud .

---

Another option, although more suitable for static data, uses the UTFGrid method. The guys who developed it can explain it better than me, but it scales as many points as possible if you want with a phenomenal performance. It consists in the fact that you have a layer with your information and an accompanying json file with something like an ascii-art file that describes functions on tiles. Then, using a library called wax , it provides a complete mouse click, mouse click events on it without any impact on performance.

I am also blogging about this.

Answer 2

I think clustering would be your best bet if you manage to use it. You say you tried to use clustering but still caused performance issues? I went to check it with 80,000 data points in the V7 Interactive SDK , and it seems to work fine. Check this by clicking on the link and changing the line in the Load module - clustering tab:

 TestDataGenerator.GenerateData(100,dataCallback); 

to

 TestDataGenerator.GenerateData(80000,dataCallback); 

then click the Run button. Performance seems acceptable to me with a lot of data points.