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:
Upload your image to the map_images folder or anywhere on the web.
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 />,'
You'll want to change the image
src to should correspond to the location of the image from Step 1. Also, set the
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).