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. Locate an image and save it on your server. Save the URL for later.

   http://simplemaps.com/static/img/basketball.png

2. Edit the mapdata.js file in a text editor or using the online tool.

3. Specify in the main_settings of the mapdata.js file that you want to use images for locations:

location_type: 'image',

4. Specify in the main_settings of the mapdata.js file the url where the image you want to use exists:

   location_image_url: 'http://simplemaps.com/static/img/basketball.png',

5. You can overwrite either of these settings for an individual location. Either to make some locations a shape:

locations: {
  "0": {
    lat: 41.884,
    lng: -87.632,
    name: "Chicago",
    type: "circle"
  }
}

Or, to give some locations an image that differs from the default.

locations: {
  "0": {
    lat: 41.884,
    lng: -87.632,
    name: "Chicago",
    type: "image"
    image_url: "http://simplemaps.com/static/img/frog.png"
  }
}

You can change the size of the location to scale the image up or down.

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).