Use custom images as location markers | Documentation

Locations can be squares and circles of any size and opacity. In general, this offers a very clean and flexible look. However, sometimes it would be nice use pictures for locations. This is now possible!

For example, if you want to visualize all US cities with NBA teams. You could use basketballs for each location, like so:

To use a custom image (or images), follow these steps:

1. Download the image and place it inside the map_image folder (.png images are ideal):
   
   
   
   
2. Edit the mapdata.js file in a text editor


3. Change the location's type to 'image':
   type: 'image',
   
   
4. Change the location's image_source to the name and extension of the image:
   image_source: 'basketball.png',
   
   

You can change the size of the location to scale the image up or down. You can also set the default location type in the main_settings to 'image' and then set a corresponding location_image_source. For, example the above basketball example was achieved with:

Limitations

Locations must be square for scaling and projection reasons. However, you can use opacity (like in the above example), to make images look non-square.

Custom images are supported in all browsers including IE7 and IE8. However, IE7 and IE8 have problems with custom images when the map is zoomed into extreme levels (for example, country-level zooming a world map).