IE7 speed compared to IE8, IE9 and Chrome and how google solved it on google maps

For the company I work for, I’m developing a mapping system to plot properties on a map.

We are using google maps, with custom markers, and a fare amount of GPolygon to plot the outcodes and sector codes on the map.

Some of our customers unfortunately are using IE7 so I’m doing some client side performance testing.

The test is a real basic one:

image

I create a GMap, create 5 polygons with 5 corners, create 20 polygons with 20 corners, so the same using svg, plot a matrix of markers 10×10 and then another of 20×20.

Here are some expected but interesting results:

https://onedrive.live.com/redir?resid=A117AA5E007A0648%212016

It’s interesting to see that drawing a lot of markers is a lot slower than drawing polygons. I was curious to see how google solved this problem, so running fiddler I started to analyse the my browser requests when viewing properties on google maps.

It turned out, google use layers to plot the markers, so instead of plotting hundreds of elements on  top of the map, it’s creating a transparent png image wit those markers on it and than layering this png on top of the map:

So basically the first layer show the earth

layer1

the second layer display the streets

layer2

and the third layer is where they plot the additional data to display on the map

layer3

what they then do is to track the position of the mouse on the map, and as soon as the mouse stops they do a webservice call to get more information about that specific tile.

very smart google, very smart….

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s