current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

I am developing a web application that is supposed to display land traffic in real time in any part of the world. For a couple months I've been developing it using JavaScript and OpenLayers (http://www.openlayers.org) framework.

Unfortunately, this solution appears to be inefficient. There are hundreds (200-300) of objects on the map that are updated every couple minutes. The sheer operation of refreshing and rendering them takes significant amount of time that makes the application less usable (slow responsivity to user actions).

At the moment I am considering changing the technology. Adobe Flex seems to be the most reasonable solution. There is at least one application written in it that does similar things to mine (http://casper.frontier.nl/).

However, I have a couple of concerns regarding Flex:

  • can it be easily integrated with the HTML/CSS/JavaScript based part of the application (for example, the graphical interface should be coherent when it comes to styles and colors)?
  • I get an impression that with latest browsers (mainly Chrome 9.0) JavaScript and CSS becoming more efficient. What are the chances that in a couple of months JavaScript+CSS will make it possible to implement efficient, flash-like rich internet application? (A note is needed here: famous Canvas tag is not a solution for my problem, at least not for now. Rendering objects on map with canvas proved to be less efficient than with traditional SVG because the size of the canvas is really big - a whole browser window)
  • What are the chances that Flash technology will be abandoned (Apple policy, HTML5 growing support etc.) in not-so-near-future (a couple of years)?
  • There is a possibility that my client would like to view this application on mobile devices, including iPhone.
  • Any other solution for web-based interactive maps?

Can anybody address these issues?

share|improve this question
    
Are you re-rendering the whole page every time a single object changes? You probably want to re-render at periodic intervals and if possible only re-render the part that has changed. Note also that canvas has transparency and you could stack multiple canvas objects that render different layers/parts of the map (and only change the ones that change). –  kanaka Nov 5 '10 at 14:19
1  
I've used Google Maps JavaScript API + a custom canvas tile layer (see here and here) to draw maps with 10k+ markers, really quickly. Perhaps you just need to rethink your particular approach rather than totally rewriting your maps. –  Matt Ball Nov 5 '10 at 14:26
    
@kanaka - I only rerender single object when this particular object changes. I do not know much about Canvas tag but as I wrote in the question it appears to be less effective than SVG due to the canvas size @Matt - I'm afraid this kind of solution is not good for my problem. I have to update every object (marker) independently and make it responsive to various actions (clicking, selecting, highlighting, hiding/filtering). In examples you gave markers are generated on the server-side and cannot be manipulated by user. –  gregorej Nov 8 '10 at 6:27
    
@Matt - you may disregard the above comment addressed to you. I admit I did not take a full deep look into the solution you gave (grid of canvas elements) when writing them. It really does look promising and worth considering. Thanks! –  gregorej Nov 8 '10 at 7:02
    
@gregorej: would you like me to post the comment as answer? –  Matt Ball Nov 8 '10 at 13:17

4 Answers 4

up vote 1 down vote accepted

Lazy comment repost:

I've used Google Maps JavaScript API + a custom canvas tile layer (see here and here) to draw maps with 10k+ markers, really quickly. Perhaps you just need to rethink your particular approach rather than totally rewriting your maps.

share|improve this answer
1  
After a few months of designing and implementing I can say that this solution worked. Indeed, the problem was in JavaScript implementation that turned out to be inefficient. The solution with Canvas grid markers proved to be very useful. I have managed to display literally thousands of objects at the same moment. –  gregorej May 5 '11 at 10:11
    
Thanks for the feedback! It's good to know that this solution is viable for others. –  Matt Ball May 5 '11 at 12:30
up vote 1 down vote

JavaScript running on a modern browser (say, IE7 or later) should easily be able to handle 200 or 300 object updates every few minutes. Granted, if you want to do all 300 updates at the same time, things might get a little slow. But if those updates occur spread out over that period, then you shouldn't have any trouble.

There are Asteroids games and 3D shooters written in JavaScript and that are very playable. They do dozens of updates per second.

I would suspect your framework (I know nothing about OpenLayers) or the way in which you're doing the updates before I suspected the platform.

My experience with Flash has been less that positive. Although it will interoperate with JavaScript, there are some strange edge cases that will trip you up. And my experience is that it's almost impossible not to trip over those edge cases unless what you're doing is truly trivial. And, of course, the lack of Flash support on the iPad and iPhone will make supporting those platforms impossible.

I think it's unlikely that Flash will be abandoned any time soon, as there are too many customers who continue to believe the silly notion that Flash is the way to build interactive Web apps. Although that was almost certainly true four years ago, browsers, computers, and JavaScript techniques have advanced to the point that the only use I currently have for Flash is to play video. And that use will go away in the next few years when HTML5 video becomes more prevalent. With Google's WebM video format and the expected high-quality tools to build WebM, Flash becomes almost irrelevant as a movie player, except for older content.

My advice would be to take a long hard look at your current implementation, study some other JavaScript applications that do frequent updates, and determine if it's really the platform rather than the way you're using it that is causing your performance problem.

share|improve this answer
    
Could you give some more information about those edge cases? Do they concern the problem of integration with CSS/HTML-based application? –  gregorej Nov 8 '10 at 6:26
up vote 0 down vote

No idea how many objects you can manage and update in js, but in my company (flashmaps.com) we have built flash-based maps handling many thousands of objects. The key issue in many cases in fact is that the map is completely overlapped by the markers. We use to recommend filtering the markers in those cases. We have a huge experience in building flash/flex-based maps, so on't hesitate to ask me any question on that.

By the way, I don't think Flash will get out of use soon. Apple's strategy on controlling iPhone/iPad apps (the real reason behind Flash banning) is causing a lot of trouble to web developers, that need to create specific versions of their websites for these devices, it's crazy. But I'm sure Apple will permit Flash, someday... Probably when many other tablets hit the streets supporting Flash. We'll see.

share|improve this answer
up vote 0 down vote

The awesome thing about MVC architecture is as long as you keep your domain logic separate from your business logic and UI, then it's relatively easy to create platform specific apps that access the same data. For example, you could build the same UI to run in the web browser (via html/javascript or flash player), on the desktop (via Air), and on an iPhone/iPad (via iOS) that all connect to the same server-side scripts. It's all a matter of personal choice which platform you choose. If a platform happens to fall out of fashion in the future, then you simply create a new UI on another platform.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.