MIME-Version: 1.0
Received: by 10.150.174.35 with SMTP id w35mr241183ybe.9.1253907297573; Fri, 
	25 Sep 2009 12:34:57 -0700 (PDT)
Date: Fri, 25 Sep 2009 12:34:57 -0700 (PDT)
In-Reply-To: <b9f26e63-a0c5-4b81-a917-1cfc18237bf0@j19g2000vbp.googlegroups.com>
X-IP: 140.239.66.66
References: <f5abec45-792d-46ea-9863-8c37cbdc939b@r36g2000vbn.googlegroups.com> 
	<77ab8c900909170646o2b46edb7u1fcac414b7f6cde@mail.gmail.com> 
	<d601909d-5108-40a8-8013-d6080852ecee@s6g2000vbp.googlegroups.com> 
	<77ab8c900909171506t12270be0y43d766eed75ab066@mail.gmail.com> 
	<c483bf4f-85d0-4b11-960c-8dd86066b0a5@r36g2000vbn.googlegroups.com> 
	<438d1292-9960-4a71-9ffa-af2713ad5738@33g2000vbe.googlegroups.com> 
	<9bbf0b23-0c77-4655-b5d7-9334c2f88435@e34g2000vbm.googlegroups.com> 
	<b1069320-e62a-4ed9-a749-d2d073669640@m20g2000vbp.googlegroups.com> 
	<b9f26e63-a0c5-4b81-a917-1cfc18237bf0@j19g2000vbp.googlegroups.com>
User-Agent: G2/1.0
X-HTTP-UserAgent: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) 
	AppleWebKit/532.0 (KHTML, like Gecko) Chrome/3.0.195.21 Safari/532.0,gzip(gfe),gzip(gfe)
Message-ID: <a12fa766-fc70-4db3-83fd-eb6e68f7b47a@q14g2000vbi.googlegroups.com>
Subject: Re: Thousands of Markers at Once
From: Shaun <shaun.hus...@gmail.com>
To: Google Maps API For Flash <google-maps-api-for-flash@googlegroups.com>
Content-Type: text/plain; charset=ISO-8859-1
Content-Transfer-Encoding: quoted-printable

Hi peoples,
Sorry to bring this one back up after such a long time (3 days is
forever in forums :) but I just wanted to say thanks to Jonathan I was
struggling some with getting lots of markers (around 1000) to show up
on the map without getting seriously bogged down.  I tried a few
different methods, initially I tried doing about a 1/4 of what you did
by using one overlay but still having a sprite for each asset so that
I could put listeners on them.  Unfortunately this results in an
unbearable amount of latency when moving the map around although it
was a simple way to get listeners and more markers than I could
before, also this way the sprites can do some cool animation type
things pretty easily, whereas my next try I lost the ability to easily
animate the sprites but gained significantly in terms of
responsiveness.  The next method I tried was using the same type of
thing as is explained here where I'm just doing the drawing for each
one in the overlay and getting rid of the sprites, this worked great,
dragging was extremely responsive however I had completely lost my
interactivity as you can't add a listener to the pixels you're
drawing, was looking into how 3d apps do hit detection, explained here
http://michaelvandaniker.com/blog/ but I just couldn't figure out how
that kind of hit detection works quickly enough (and am still not sure
it's a viable solution since the markers do need to move quite a bit)
so I started implementing you're idea posted here about using the
distance on mouse over unfortunately I didn't split my items into
sectors (just seemed complicated although yours does perform
phenomenally) so I run through every marker in the viewport.  Anyways
I decided I should post what I've got for others to benefit from since
I benefited so much from you're post, can't thank you enough and it
came at the perfect time the 23rd is when I started looking into how
to deal with large groups of markers.  In my implementation I pare out
the markers that are not going to appear in the current view port then
I cluster the markers that are in view using a clusterer I found out
on the internets (thanks to Kelvin Luck for that check it out here
http://www.appelsiini.net/2008/11/introduction-to-marker-clustering-with-go=
ogle-maps)
and here's what I ended up with (right click to view source):

http://www.shaunhusain.com/GoogleMapManyMarker/
http://www.shaunhusain.com/GoogleMapManyMarker/srcview/
(just found out context menu doesn't seem to work on top of the map
[for right click view source], might be due to something in my
implementation but maybe this is what another post I replied to was
referring to about the ContextMenu)

it's not perfect still acts a bit buggy in terms of the clustering
when panning because it needs to include any new markers that have
come into the view and re-cluster and depending on the pan position
the local position of the markers changes some so when you're zoomed
out really far and almost everything is a cluster there's a good
chance that panning will cause the markers to jump to different
clusters.  My version isn't 100% clean but figured it still might be
useful for others to learn some of these concepts from and isn't quite
as complicated as Jonathan's class (not a bad thing since it works so
damn well but hard for beginners/intermediate programmers to
understand)
Thanks again,
Shaun

On Sep 22, 4:52=A0pm, Jonathan Wagner <m...@jonathanwagner.ca> wrote:
> Hey Kevin,
>
> I didn't build it into the class but here is a function you can add
> and use to display the data after the markers are registered:
>
> public function renderAll() {
> clearRenderQueue();
> for(var i:int =3D 0; i < _tiles.length; i++) {
> =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 cleanTile=
(_tiles[i][0]);
> =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 addToRend=
erQueue(_tiles[i][0], _tiles[i][1], _tiles[i][2])
> =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 }
>
> }
>
> This function will stop all current rendering, and the force all the
> tiles to re-render. If you're loading from a server I would recommend
> disabling the rendering under loadTile until your data is loaded. This
> class is mostly useful for visualization, it really depends on what
> you're doing. If you're interested in implementing interactivity, the
> most efficient way would be to get the mouse latlng, then grab the
> closest index sector and flip through it figuring out which marker is
> closest to the mouse latlng. This way you would not have to flip
> through all 100k markers trying to find the right marker.
>
> On Sep 22, 5:24=A0pm, Kevin Macdonald <kevin.macdon...@pentura.ca>
> wrote:
>
>
>
> > Jonathan,
>
> > That's a lot of markers.
>
> > Do you have any thoughts about how to populate the map with 100,000
> > records fetched asynchronously from a server?
>
> > On Sep 22, 4:59=A0pm, Your Mapper <schnue...@gmail.com> wrote:
>
> > > Jonathan,
>
> > > That's a terrific example, almost comical. And it shows the distortio=
n
> > > of the map projection with a lower density of points at the north and
> > > south pole areas.
>
> > > I downloaded the source code too. =A0I have not used Flex nor do I ha=
ve
> > > it installed (I only have CS3 Web which has Flash), but did try to
> > > open the files in a new project in the Flex 60-day demo version. =A0I=
t's
> > > going to take a bit more time on my end to learn the new environment
> > > and decide if Flex is worth it, but it's definitely promising.
>
> > > Would it be possible to build a generic Flex app like the one you
> > > made, where one could pass in a 'lightweight' JSON or XML file that
> > > just had 100K location ID, lat, lon, and marker color fields, and the
> > > app could create the map on the fly from that data? =A0Even better wo=
uld
> > > be a Name field that could show on hover, and a link to a dynamic web
> > > page based on the ID field.
>
> > > Anyway, maybe just a rhetorical brainstorming question there. =A0Than=
ks,
>
> > > Michael
>
> > > On Sep 22, 11:39=A0am, Jonathan Wagner <m...@jonathanwagner.ca> wrote=
:
>
> > > > So I wanted a challenge and actually built a class for handling lar=
ge
> > > > amounts of markers, I have included the demo and source at:
>
> > > >http://www.scribblemaps.com/markerComplex/
>
> > > > It does not include interactivity, but it could be built in, in the
> > > > example I used 100k markers distributed randomly through the world,=
 I
> > > > have better explanations of everything in the class. Hope this help=
s
> > > > someone.
>
> > > > Jonathan
>
> > > > On Sep 21, 9:53=A0am, Your Mapper <schnue...@gmail.com> wrote:
>
> > > > > Thanks for the great responses Pamela and Jonathan. =A0Just what =
I was
> > > > > looking for.
>
> > > > > Pamela, I had seen your presentation online a few months ago but =
had
> > > > > forgotten the details. =A0Thanks for the link.
>
> > > > > The bottom line seems to be that in order to show that many 'mark=
ers'
> > > > > the solution is to create tiles/custom overlay and detect clicks =
to
> > > > > show popups. =A0Makes sense, I'll give it a try. =A0More work tha=
n just
> > > > > throwing a couple thousand markers at the API, but worth it.
>
> > > > > Michael
>
> > > > > On Sep 17, 6:06=A0pm, "pamela (Google Employee)" <pamela...@gmail=
.com>
> > > > > wrote:
>
> > > > > > Good point, Jonathan. Here's an example from Javier that shows
> > > > > > something like that:http://s3.amazonaws.com/biodiversityatlas.c=
om/mouseovertile/MouseOver...
>
> > > > > > On Fri, Sep 18, 2009 at 1:55 AM, Jonathan Wagner <m...@jonathan=
wagner.ca> wrote:
>
> > > > > > > Flash actually has the ability to work with bitmaps, the main=
 choke
> > > > > > > point with Flash is the vector renderer, so if you have the m=
arkers as
> > > > > > > bitmap data what you could do is have bitmap tiles, then copy=
 the
> > > > > > > markers using copy pixels. Finally do the collision detection=
 ( mouse
> > > > > > > rollover etc..) in action script. If you did it properly, you=
 could
> > > > > > > probably get it even smoother then the example you provided. =
Just be
> > > > > > > aware that if you are using draw() it utilizes the vector ren=
derer, so
> > > > > > > you won't necessarily get any performance increases.
>
> > > > > > > On Sep 17, 9:46=A0am, "pamela (Google Employee)" <pamela...@g=
mail.com>
> > > > > > > wrote:
> > > > > > >> Hi Your Mapper-
>
> > > > > > >> I discuss that in this video:http://www.youtube.com/watch?v=
=3DzI8at1EmJjA
>
> > > > > > >> Slides here:http://docs.google.com/present/view?id=3Ddggjrx3=
s_325gr9vthfq
>
> > > > > > >> The basic idea is that they create a highly-performant custo=
m overlay,
> > > > > > >> and they likely draw many shapes into just one overlay, inst=
ead of one
> > > > > > >> shape per overlay. That technique is described by Redfin in =
the video
> > > > > > >> + slides.
>
> > > > > > >> - pamela
>
> > > > > > >> On Thu, Sep 17, 2009 at 10:44 PM, Your Mapper <schnue...@gma=
il.com> wrote:
>
> > > > > > >> > Can anyone explain how the New York Times is able to show =
thousands of
> > > > > > >> > markers on their Google Flash maps at once without cluster=
ing? =A0Each
> > > > > > >> > marker has hover info, popup info, and when clicked activa=
tes
> > > > > > >> > JavaScript on the page.
>
> > > > > > >> > Here is an example with 32,000 markers on one map, and it'=
s super
> > > > > > >> > fast:
>
> > > > > > >> >http://projects.nytimes.com/toxic-waters/polluters/californ=
ia
>