In some cases, if the map style contains many sources and layers or if the visitor has a slow connection, it can take some time for the map to start appearing visually. There are several tricks you can use to improve the perceived performance of the application.
The most basic solution is to set the page background to the expected (most dominant) map color, which in itself can significantly reduce the visual change that suddenly occurs once the map loads.
Static Maps API image to temporary supplement zoomable map
A more advanced solution is using our Static Maps API to supplement the map initiation process and provide a very smooth user experience.
These are the steps to follow:
Initialize the map the standard way.
Add the image of the area you want to display/the whole world (from Static Maps API) as the bottom-most layer (the visitor can still navigate the map).
The vector map will start appearing on top of the raster, gradually adding details and making it "come alive".
Once the whole map is loaded for the first time, it's better to remove the raster background to avoid potential rendering artifacts on the ocean edges.
Complete source code example:
You can change the area of interest (instead of the whole world) to get a better resolution of the Static Maps image. In such a case, you need to correctly calculate the resolution based on the area and also fit the whole zoom levels of a Mercator projection tile pyramid. See
Using this approach will generate additional API requests and can result in higher charges.