Adding images to Teasers (Info-window) in TileMill

Teasers in TileMIll are basically the same as Pop-up window in ArcMap or info-windows in CartoDB. Teasers display attribute data on a feature on the map. Adding images in the Pop-up window allows the map user access to pictorial information on the features of the map. Previously, we demonstrated how to customize the teaser in TileMill using HTML and CSS. This post will demonstrate how to add images to the Teaser using HTML tags.

 

For this demonstration, our dataset is a polygon map representing the administrative boundaries of local governing areas within a State. We will add a different images to the Teasers (pop-up window) for each local governing area.

 

PREPARE YOUR OWN IMAGES

– Create Images and save as png, jpg or gif formats.

– Preferably, host the images you have created online and copy the URL of each image.

– Create an attribute field for the Images and  fill in the rows with image links enclosed in a HTML img tag e.g. <img src=”Paste the URL of the Image”>.

 

Below is an example of what the Image attribute field should look like. Note that the URL address of the image is enclosed in HTML Image tags.

LGA Pop Image
Akure South 360268 <img src=”https://lh3.googleusercontent.com/grAsgBc_j48Zi4HEi7PTqHtdjZXWEZkpRYJRLYzyLkg=w169-h154-no”&gt;

 

OR JUST USE OUR SAMPLE DATA

Download the sample data by clicking this link- Shapefile

 

Add and Style Layer

launch TileMill. Create a new project and Add the layer (sample dataset).

image In the Style window, write this code to style the layer. To look exactly like the one in the demo, change the #countries layer line width to 2 (red boxed area on the screenshot).

Capture-1

 

 

image Add this CSS code to the style window to assign labels to the local government areas.

In the Screenshot below, the polygons are now labeled with their administrative names.

Capture-13

 

Open the Features window of the Layer. On the Image field, different images have been assigned to each row.

image

 

Create a Custom Teaser

Click on Templates (red box 1) and Teaser (red box 2). Go to the Layer to use for interactivity option and click the drop down button( small red box 3). Select Ondo2 and a list of attribute fields with mustache tags will become available (red boxed 4).

Capture-11

 

In the main window, paste the mustache tags and then enclose them in HTML codes as below. The HTML table tag will format some of the contents of the legend as a table. Note the <td>{{{NAME_2}}}</td> and <td>{{{Population}}}</td> is simply writing HTML code to enclose the values in these two attribute fields on a table row.

Click Save.

image

 

Take the cursor finger and hover or click on a polygon feature. The Teaser (red boxed) should display the image added on the attribute table. See example of our demo in the screenshot below. Do the same for the other two local districts with images allocated to them on the attribute table and see similar results.

image

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s