[GIS] How to add hyperlinks & embedded images to TileMill / Mapbox Tooltips

mapboxtilemill

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

Best Answer

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"