0

I am developing a website that uses Google Maps.
The map has 4000-5000 markers.

Upon the client enters the website the server determines all "active" markers and sends a JSON document telling the client information about each marker and what marker-icon to use (a url to an image on the server, ex: icon: '/icon/xxx.png').
The website loads instantly but it takes about 5 seconds until all markers are shown since the client has to fetch those ~5000 images.

The images can change so the server only knows when the client ask for it, exactly which image each marker uses.
How can I speedup this process?
Can I dynamically create a spritesheet of some sort or pack all those files and let the client unpack them for faster loading?
The server backend is PHP för this part.

Chrome network overview for fetching the images

Emilio Gaines
  • 95
  • 1
  • 10
  • Each of your markers has a unique image.. or most of them, and that's where you would like to use the sprite image? – Kristian Vitozev Jul 01 '20 at 05:44
  • @kav Correct, what takes time is transferring each individual image to the client as there is so many, as shown in the image. The images are supersmall so the final transfersize is not large at all, a few mb. – Emilio Gaines Jul 01 '20 at 06:07
  • That's what Google's now-deceased Fusion Tables was - *"server-side rendering"*. – Mark Setchell Jul 01 '20 at 07:58

1 Answers1

1

You can indeed create a spritesheet, or if they are relatively simple in style, you can also create them dynamically as SVGs within your page code, and when you declare each marker, you give it a path defined in SVG within your JS (as served by your main page, or a static file containing functions for many of them).

SVG info here: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

Some good examples in this prior answer : How to use SVG markers in Google Maps API v3

A spritesheet is a good way to do this if the total number is relatively unchanging, and each client is likely to use a large subset of the sprites.

The downside of a spritesheet in my experience is maintenance - combining a code and an art workflow can be a bit of a pain!

Howard Tomlinson
  • 71
  • 1
  • 2
  • 5
  • 1
    I would also go with sprites, server would generate one image for _all_ markers in background, and then serve it with coordinates of image location – Justinas Jul 01 '20 at 08:07
  • It depends on the type of images; if they are pictures then images is the only way forward; however you do get the problems where scaling eventually looks nasty. SVGs scale, and are typically (for icons) individually smaller. – Howard Tomlinson Jul 01 '20 at 08:19
  • On google map's images usually does not get scaled. – Justinas Jul 01 '20 at 08:24