istarkov / google-map-thousands-markers

How to draw thousands markers with google-map-react

How to draw thousands markers on the map

Example of drawing 10000 animated on hover markers

The problem

With few thousands markers on the map a single hover animation over any marker will be slow.
It's not because of javascript, it's because browser can't render them fast.
All that layer composition events becomes too slow to show any single animation.

The solution

To draw markers on the html 5 canvas, and to hold a small buffer of components to draw hover events.

How to run locally

clone and cd into the project.

run

yarn
yarn run start

Why

For unknown reasons some clients don't like any clustering on the map.

PS

Example is highly unoptimized BTW it works well.
Also you can use this project as an example how to draw anything over the google-map-react

PPS

Can anybody help to explain why vendor.js is different on every rebuild

yarn run pages