How to add hyperlinks & embedded images to TileMill / Mapbox Tooltips?

Question

I have a shapefile I am styling in TileMill; which will be imported later into a Mapbox webmap as MBTiles.

There is an attribute field for each feature in the shapefile that contains a link to an online image. Can I embed this image and add a clickable hyperlink within a tooltip?

The formatting I have now in the tooltip dialog is:

”Link: {{{hyperlink}}}“ where {{{hyperlink}}} is the unique url of an image for each feature. The link will display in the tooltip, but it isn’t clickable. I would also like to embed the image within the tooltip if that is possible as well. Thanks

Answer 1

Ended up figuring both methods out using online images, not embedding the images within the tiles. This was most efficient for my case because there were ~700 points and associated images to incorporate for this project. Hopefully this will be of help to others in future searches:

1) Example code to embed an online image in a tooltip:

<img src="{{{PHOTO_HYPERLINK}}}" width="280px" />

where {{{PHOTO_HYPERLINK}}} is a shapefile attribute field containing urls to online images and the embedded image is constrained to being 280 pixels wide

2) Example code to link to an online image in a tooltip:

<a href="{{{PHOTO_HYPERLINK}}}" target="_blank">View Photo in New Window</a>

where {{{PHOTO_HYPERLINK}}} is a shapefile attribute field containing urls to online images

in the tooltip the text "View Photo in New Window" will appear, and by clicking that text the online image will be opened in a new browser tab target="_blank"

Answer 2

As for embedding the image within the tooltip, you have 2 options:

a] convert the image to base64

b] or upload each image onto a server somewhere, put the URL as the property (and create an id like imgurl for each feature that you want it to hover over.

Here's an example of how I did option [B] in Tilemill.

If I had to do my project over again, I would not have done option B; instead I would have uploaded the objects as geojson and written this interaction in leaflet. This may not be feasible for you if you have a lot of objects that you’re trying to style.