For a recent redesign we mananged to reduce the page size to under 500kB for almost every part, expect the sections where we included a dynamic map. The size of an average dynamic map was about 600kbB, thus we had to find different ways to show a map and came across Static Maps, which turned out to be the perfect solution for us.
Static Maps are relatively lightweight, can be customized and are the ideal candidate for progressive enhancement.
I found the following solutions:
First of all, Google Maps. As described in the Developer Guide there are quite a few options to change the style of the map, add markers, paths and polygons. There are also various Map Generators available to help get you started.
http://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap &markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318 &markers=color:red%7Clabel:C%7C40.718217,-73.998284&sensor=false
The maximum image size is 640×640 (or 1280×1280 if you use scale=2) for the free version and 2048×2048 for the Business version.
The maximum quota per day is 1000 Static Maps image requests per IP address per 24 hour period and 25 000 Static Maps image requests per day if you use the Google Maps API for Business.
There are different ways to use OpenStreetMap Static Maps. As with Google Map all of these options comes with ways to customize the map. In most cases I would recommend either setting up your own web service or using the free online services available. If you however want to use a very specific map there are also paid plans available.
- staticMapLite PHP webservice
- Tyler Python webservice
- MapQuest Online Service (Free)
- MapBox Online Service (Free Plan available)
The solutions staticMapLite and Tyler which you can host on your own server comes with no restrictions.
If you use Mapquest the maximum image size is 3840×3840 and there is no quota as far as I can see.
MapBox has a size limit of 1280×1280 and the quota depends on your plan (3000/month for the free plan).
Nokia HERE also offers a Static Map solution. To use it you have to create an API Key.
As you can see in the examples there are various ways to style a map, including heat maps and picture-in-picture maps.
The free plan has a limit of 10,000 requests / day and as far as I can see there are no restrictions regarding image size.
Last but not least also Yandex offers a Static Map API. It also offers basic options to set markers, define lines and polygons but lacks support for different styles.
http://static-maps.yandex.ru/1.x/?lang=en-US&ll=32.810152,39.889847& \ size=450,450&z=10&l=map&pt=32.810152,39.889847,pm2rdl1~32.870152,39.869847,pm2rdl99
The maximum size allowed for the map display is 650×450 pixels and the maximum requests per day is 25,000.
Every solution has pros and cons and it’s up to you which solution works best for you and if you are either willing to pay or can live with the restrictions. If you however want no restrictions and be independent the best way is to host one of the OpenStreetMap solutions by yourself.
Questions, Comments? Tweet to @justmarkup