Loading large amount of shapes (circles) to google map on client

48 views
Skip to first unread message

Matic Diba

unread,
Jan 30, 2018, 6:31:16 PM1/30/18
to Google Maps JavaScript API v3

Hi,
I have an interesting problem that I'm not event sure if has another solution.

I would like to show 12k+ point on my map, distributed over the whole country. I could do this with markers or custom overlay, or even with fusion tables. I have tried with all of these, but I don't like the result. The thing is that if I use Circle shape to display the location of the point, I get a really nice result of distribution of these points across my country. I can change the size of those points and when user zooms in, there is additional information, because some points are slightly bigger then others. My resulting map is attached to this post.

So my issue is that rendering this amount of Circle shapes, takes a lot of time and resources. Resulting in "page breaking" during loading which makes page useless for 10 or more seconds. So my question is, whether I missed something and could I create a layer like this some other, more optimal way. My main flaw with other way of displaying POIs is that point size is fixed, resulting in maps that are completely covered with "large" points.

Any suggestion or reference would be more then appreciated.
Matic
Thanks,

maps.JPG

Olha Buchel

unread,
Jan 30, 2018, 10:47:41 PM1/30/18
to google-map...@googlegroups.com
I would suggest to take a look at D3 layers for Mapbox API. They are faster.

Olha

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-maps-js-api-v3+unsub...@googlegroups.com.
To post to this group, send email to google-maps-js-api-v3@googlegroups.com.
Visit this group at https://groups.google.com/group/google-maps-js-api-v3.
For more options, visit https://groups.google.com/d/optout.

Barry Hunter

unread,
Jan 31, 2018, 5:20:21 AM1/31/18
to google-maps-js-api-v3
Have you looked at the Heatmap layer?

that's optimized for large number of points. Could tweak the colour scale if only want Red colour. 

Reply all
Reply to author
Forward
0 new messages