Chapter 5. Advanced topics

In this chapter we will discuss advanced topics such as Marker Manager or how different stuff works in Hotspots. To make user of this feature

Optimizing and scaling for large databases

If you are reading that section it means that you've managed to gather a lot of locations that you want to show on the map! Congratulations - you belong to the 1% of the Hotspots users.

Showing a lot of locations on the map present us with unique problems. Let us say that you have 20 000 locations that you want to show on the map. If we load all the locations at once there are 2 possible things that are going to happen.

  1. Your server will crash

  2. Your browser will crash

Obviously we don't want either of those to happen. There are different ways to take care of the problem and they all depend on the number of locations you want to show. If you have 2 000 locations you can use a javascript Marker manager and it will work fine, but the more locations you start to have, the more difficult it will become to use only javascript Marker Managers. Since with Hotspots we have no idea how many markers your site has, we've decided that a pure javascript solution is not the right thing.

In Hotspots we've implemented the server side boundary method + custom tile method.

Server side boundary method

The server side boundary method makes sure that the server won't return too many results and is generally usefull at high zoom levels. It basically requests only the points in your currently visible area. If your at zoom level 1, where the map covers the entire globe we'll obviously again have too many returned points. That is why the returned points are limited to 20 ( you can actually change this limit to 10, 20, 50 or 100 in the map settings)

Because the server side method returns only a specific amound of markers (up to 100) if you have more markers in a specific category on the right in the menu one will have the option to navigate to the next page. This will create a new query that will return the next results for this category.

[Note]Note

Due to the limited number of locations returned per query to some users it may seem that the locations are popping out of nowhere when they move around. That is why if you have more locations than the selected marker list length (in the map options) you'll need to combine this method with the custom tiles one

Custom tile method

When it comes to displaying large amount of information on the map the custom tile method is the most elegant solution available. It can be used to display a single point or milions of points.

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.

Conclusion

Thanks to the the server side boundary and the custom tile methods Hotspots will be able to sustain your database of locations event if it grows a lot! At the same time we ensure the best user experience with and loading times for the amount of data you have.

[Note]Note

If you don't have more than 100 locations per category in your database. You can set the marker list length to 100 and this way we will always load all the hotspots visible on the map. However if you have few categories on with 100 locations and the user selects to show "all tabs in the menu" on the map this would mean that we will return 100 for each category. If the user has 5 opened tabs -> we will return 500 locations. This makes the request bigger in kbs and it will be slower to process. That is why whenever you start to have a lot of markers in your categories it is advised to turn on the custom tile method and set the marker list length option to 20.