6

I am using Bing Maps with Ajax and I have about 80,000 locations to drop pushpins into. The purpose of the feature is to allow a user to search for restaurants in Louisiana and click the pushpin to see the health inspection information.

Obviously it doesn't do much good to have 80,000 pins on the map at one time, but I am struggling to find the best solution to this problem. Another problem is that the distance between these locations is very small (All 80,000 are in Louisiana). I know I could use clustering to keep from cluttering the map, but it seems like that would still cause performance problems.

What I am currently trying to do is to simply not show any pins until a certain zoom level and then only show the pins within the current view. The way I am currently attempting to do that is by using the viewchangeend event to find the zoom level and the boundaries of the map and then querying the database (through a web service) for any points in that range.

It feels like I am going about this the wrong way. Is there a better way to manage this large amount of data? Would it be better to try to load all points initially and then have the data on hand without having to hit my web service every time the map moves. If so, how would I go about it?

I haven't been able to find answers to my questions, which usually means that I am asking the wrong questions. If anyone could help me figure out the right question it would be greatly appreciated.

Kara
  • 6,115
  • 16
  • 50
  • 57
Justin
  • 869
  • 1
  • 11
  • 16
  • If you are trying to visualize that many data points, perhaps pushpins are not the best way to do it. Have you thought about using a heatmap instead? – Bojin Li Apr 18 '12 at 21:40
  • Thanks for the comment! I hadn't thought of that, but after checking it out, I don't think it will work for my scenario because users need to be able to select an individual location and be taken to an info page for that location. I'll edit my question to make that more clear. – Justin Apr 19 '12 at 17:05

2 Answers2

9

Well, I've implemented a slightly different approach to this. It was just a fun exercise, but I'm displaying all my data (about 140.000 points) in Bing Maps using the HTML5 canvas.

I previously load all the data to the client. Then, I've optimized the drawing process so much that I've attached it to the "Viewchange" event (which fires all the time during the view change process).

I've blogged about this. You can check it here.

My example does not have interaction on it but could be easily done (should be a nice topic for a blog post). You would have thus to handle the events manually and search for the corresponding points yourself or, if the amount of points to draw and/or the zoom level was below some threshold, show regular pushpins.

Anyway, another option, if you're not restricted to Bing Maps, is to use the likes of Leaflet. It allows you to create a Canvas Layer which is a tile-based layer but rendered in client-side using HTML5 canvas. It opens a new range of possibilities. Check for example this map in GisCloud.

Yet another option, although more suitable to static data, is using a technique called UTFGrid. The lads that developed it can certainly explain it better than me, but it scales for as many points as you want with a fenomenal performance. It consists on having a tile layer with your info, and an accompanying json file with something like an "ascii-art" file describing the features on the tiles. Then, using a library called wax it provides complete mouse-over, mouse-click events on it, without any performance impact whatsoever.

I've also blogged about it.

psousa
  • 6,676
  • 1
  • 32
  • 44
  • Interesting concept, I have actually done something very similar for a roof mapping application, where the canvas is used to display detailed dimensions(linedrawing style length, angles etc) on top of the map. However the problem with this approach is that the canvas element now receives all pointer events that used to go to the map. The none standard css property pointer-events:none can solve this but it's not supported in some browsers, notably IE. Trying to pass through the events manually in javascript just seems like a mess. I'd be interested to know if you know a way to solve this. – Bojin Li Apr 19 '12 at 23:02
  • Actually the events go to the map directly. Have you seen the video that I've shown? All the zooms and pans are handled directly by Bing Maps. – psousa Apr 19 '12 at 23:10
  • Ahh I see what you are doing. You inserted the canvas into the map div itself while I just placed it on top of the map div. However even with your approach the canvas will still be on top of other map elements like the pushpins that one might subsequently add. I suppose one could do something clever such as trying to insert the canvas on top of the map tiles but below the other map elements like pushpins or shapes, but that sounds like a pain to implement correctly. Anyway +1 ;) – Bojin Li Apr 19 '12 at 23:45
  • I agree, that would be a major pain. Anyway, I've been getting my HTML5 on maps fix using Leaflet and the Canvas Layer. It just works :) – psousa Apr 19 '12 at 23:49
  • Wow! That's incredible. I'll have to try that out. Unfortunately, the client request Bing Maps specifically, but maybe I'll be able to sway them if it looks like Leaflet will be faster. Thanks for the help! – Justin Apr 23 '12 at 22:53
  • Well, you could use the Leaflet API with the Bing Maps imagery. The Bing license agreement allows you to :) – psousa Apr 23 '12 at 23:52
  • Really? In that case, I'll definitely have to try that. Thanks again! – Justin Apr 25 '12 at 16:43
3

I think clustering would be your best bet if you can get away with using it. You say that you tried using clustering but it still caused performance problems? I went to test it out with 80000 data points at the V7 Interactive SDK and it seems to perform fine. Test it out yourself by going to the link and change the line in the Load module - clustering tab:

TestDataGenerator.GenerateData(100,dataCallback);

to 

TestDataGenerator.GenerateData(80000,dataCallback);

then hit the Run button. The performance seems acceptable to me with that many data points.

Bojin Li
  • 5,769
  • 2
  • 24
  • 37
  • To be honest, I hadn't tested that. I wasn't only concerned about the performance of drawing it on the map, but also with hitting the web service and loading from the database. I was thinking that I was approaching the problem the wrong way, but it may actually work. Thanks for the help! (I'm new here and I don't have 15 reputation points yet, so I can't +1 your answer... Sorry). – Justin Apr 23 '12 at 22:41