Hotspots Docs

How does it work?

On the server we create transparent .png images with the markers for a specific tile and lay them on top of the current map.

Whenever you move around, the map requests new tiles from the server by sending the X and Y coordiantes + the zoom level. On the server we transform those to a database query and draw the markers on our custom tile image. The tile image is then saved and sent back to the client(browser). The next time the map request the same tile -> we will just return the created image and won't have to do any processing.

Now comes the tricky part. The dots on the image are actually clickable markers. So we need to somehow simulate a click on the image. Whenever the user moves with the mouse and he goes to a new tile we create an ajax request in the backend that returns the coordinates of the markers on the given tile. Once we have those coordinates we create new markers on the map and the user is able to click on the dot. This way we only have to process information when we need it.