Add images to the popup | Documentation

A common question is how to add images to the popups or tooltips that appear on hover. For example, we often include an image of a frog in the popup on our website:

Adding an image like this to your popup is straightforward using a little HTML. Follow these steps:

1. Upload your image to the map_images folder or anywhere on the web.

2. Add the HTML for an image to the state_description property in the main_settings of the mapdata.js file.

   state_description: '<img width="104" height="110" style="float:left; margin-right: 10px;" src="map_images/frog.png"/>Line 1<br />Line 2<br />,'

3. You'll want to change the image src to should correspond to the location of the image from Step 1. Also, set the width and height to match your image.

   In this example, I added some CSS styling and a couple of lines of text to replicate the look in the example above. You are free to delete these or replace them with your own custom HTML/CSS. Note that <br /> is HTML a new line (line break).