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.


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 width, height, and src 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.