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.

© 2010-2017 | Home | License | Privacy Policy | Releases | Testimonials | Resources | Documentation
Formerly and