Use custom images as location markers | Documentation

Locations can be a number of predefined types (e.g. circle, heart, marker) of any size and opacity. In general, this offers a very clean and flexible look. However, sometimes it's 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 use the online tool and skip to Step 6.

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.

6. Alternative: Use the online editor. Here is a screenshot illustrating

   

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