Databases
StackOverflow2013
Postsdbo
POLarge number of moving markers on google map
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POLarge number of moving markers on google map
    primarykey
    data
    text
    <p>I have about 200 markers on google map. That's not so much and that's relatively fast to draw them all using default google.maps.Marker factory.</p> <p>But in my case every marker constantly changes it's position, so I have to animate them all and I have to draw track after each marker. Other condition is that all markers are situated in small area about 20x20km.</p> <p>That's why I'm going to use one big canvas layer and redraw all markers on them in one loop. I see three ways here.</p> <ol> <li><p>The first is to use google.maps.OverlayView. We create absolutely positioned canvas element and add it to google.maps panes overlayLayer. In case of bounds_changed event we recalculate canvas position and size and redraw all markers on it. <strong><em>Practically this works a little bit slow - if we drag a map too fast there appears a lag with redrawing markers.</em></strong></p></li> <li><p>We use relatively positioned canvas instead of absolutely positioned. After that we don't do anything on bounds_changed event, and redraw canvas only on zoom_changed event. <strong><em>There's no lag with dragging (because we drag the canvas itself), but we have to calculate and create canvas that contains all markers, and for max zoom it's about 5000x5000px (a lot of memory).</em></strong></p></li> <li>We don't use OverlayView at all, instead of this we just hover the whole map with one outer canvas and redraw markers on bounds_changed event. <strong><em>Here we don't recalculate canvas position and size, so that's a little bit faster, but it seems tricky to add canvas under the controls and over the tile layer so that the map movements don't affect it.</em></strong></li> </ol> <p>So what way would you prefer?</p> <p>Upd. The only reasonable way is the first one. I've spent a lot of time solving tasks that refer to this one. So here's an article about drawing a lot of moving markers on the google map (in russian, <a href="http://habrahabr.ru/post/195950/" rel="nofollow">http://habrahabr.ru/post/195950/</a>) and here is the demo that compares 4 different engines: <a href="http://kasheftin.github.io/gmaps/" rel="nofollow">http://kasheftin.github.io/gmaps/</a></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USKasheftin
    1. USKasheftin
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. POLarge number of moving markers on google map
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POLarge number of moving markers on google map
      1. This table or related slice is empty.
      1. VTUpMod
    1. COWhen you say the markers constantly change position.. in reality how frequently? I have an application that has 400 markers that move every 5 seconds.. using the standard V3 API it works fine.. I update the position of the markers, I dont redraw them.
      singulars
      1. POLarge number of moving markers on google map
      1. USDuncan_m
    2. COConstant movement means animation. That is canvas redraws every frame and frame has requestAnimFrame frequency (up to 60 times per second). Even if there's no coords change this time, I find the previous and next changes and build linear interpolation. Markers move very smooth.
      singulars
      1. POLarge number of moving markers on google map
      1. USKasheftin
    3. COAlso I draw tracks after markers. That is very expensive if You use default Polyline for each marker.
      singulars
      1. POLarge number of moving markers on google map
      1. USKasheftin
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload