Table of Contents
- Optimizing and scaling for large databases
- Filtering text in a hotspot
- Routing - aka SEF urls
- Styled maps (Pro feature)
- Centering the map using the user's location (Pro feature)
- Available module positions (Pro feature)
- Overriding any JS variable on the Hotspots Map view (Pro feature)
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
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.
Your server will crash
Your browser will crash
In Hotspots we've implemented the server side boundary method + custom tile 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.
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
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.
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.
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.
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.