Map loading & rendering time

[geoffturk]

After launching the Murmurations Map a few days ago, we've had some comments about the time it takes the map to load. This post will explain how the map loads, why the load time varies, and most importantly, how to speed up the initial load time when sharing the map with others.

Loading and rendering

Map data

As I write this there are about 30,000 nodes recorded in the Murmurations index. We consolidate the data for these 30,000 nodes into about 780kbytes so that we can draw them on the map.

Loading time

Depending on your connection speed, it may take anywhere from 2 seconds up to 20 seconds or more to download this data along with the rest of the code that renders the map. On a fiber connection in a major city, it takes about 2 to 3 seconds.

Rendering time

It is a relatively intense amount of work for your computer or smartphone to take those 30,000 nodes and render the map that plots them. On a 3 year old MacBook Pro it takes about 6 seconds to complete this rendering. On a 3 year old Samsung S series smartphone, it takes 14 seconds. On a 10 year old MacBook Pro it takes 16.5 seconds.

Making the initial load/render faster

Right now when you go to map.murmurations.network all of the nodes are loaded by default. We will eventually change this behavior in the future when there is more data, but for now it is nice to see "the whole Murmurations universe" when you load the map site.

If you want to make the load time faster, you can specify just a subset of the data using URL parameters. For example, this link will load only the nodes that use the Complementary Currencies schema, which is about 300, or 1/100th of the total nodes.
https://map.murmurations.network/?schema=complementary_currencies-v2.0.0

You can even narrow it down to just one site:
https://map.murmurations.network/?primary_url=open.coop

If you compare the load times of the above two links to the default map, you'll see there is a significant improvement in both loading and rendering time.

Here are the loading and rendering statistics for different numbers of nodes:

Nodes	Data/Page Load Time	Data/Page Render Time
30,000	3.08s	5.48s
3,000	1.95s	0.51s
300	1.19s	0.09s
1	0.98s	0.05s

[samuk]

Thanks Geoff, Would it be possible to load the map tiles first, then pull the pins in. It might help make it feel faster, even if the total load time remained the same.

[geoffturk]

Yeah, I thought about that but when we get even more nodes in the future, everyone will just be staring at a blank map for a long time while all of the points are being calculated for rendering.

Check this new range parameter out:
https://docs.murmurations.network/guides/map.html#controlling-data-size-with-the-range-parameter

Now you can zoom in on a location and find all of the points within Xkm/Ymi from it. When there are 100s of thousands if not millions of nodes in the index in the future with geolocation points, this will be the only performant way to show live data quickly. We'll look at aggregation of data later for snapshots of the whole map.