<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" media="all">
a:hover { color: red; }
a {
text-decoration: none;
color: #0088cc;
}
a.primaryactionlink:link, a.primaryactionlink:visited { background-color: #2585B2; color: #fff; }
a.primaryactionlink:hover, a.primaryactionlink:active { background-color: #11729E !important; color: #fff !important; }
/*
@media only screen and (max-device-width: 480px) {
.post { min-width: 700px !important; }
}
*/
</style>
<title>WordPress.com</title>
<!--[if gte mso 12]>
<style type="text/css" media="all">
body {
font-family: arial;
font-size: 0.8em;
}
.post, .comment {
background-color: white !important;
line-height: 1.4em !important;
}
</style>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body style="background: #DDDDDD; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; color: #666; text-align: center; margin: 0; padding: 0;" class="subscription-body-tag">
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#DDDDDD" style="background: #DDDDDD; width: 100%;">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" align='center' style="padding: 10px; width: 100%;" class="subscribe-body">
<tr>
<td>
<div style="max-width: 600px; margin: 0 auto; overflow: hidden;">
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff" style="background-color: #fff; text-align: left; margin: 0 auto; max-width: 1024px; min-width: 320px; width: 100%;" class="subscribe-wrapper">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" height="8" background="http:/s.wordpress.com/i/emails/stripes.gif" style="background-image: url( 'http:/s.wordpress.com/i/emails/stripes.gif'); background-repeat: repeat-x; background-color: #43A4D0; height: 8px; width: 100%;" class="subscribe-header-wrap">
<tr>
<td></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" style="color: #0088cc; margin: 0 0 5px 0; font-size: 1.6em; color: #0088cc; margin: 0 0 0px 0; font-size: 1.6em; background-color: #EFEFEF; padding: 0; border-bottom: 1px solid #DDD; width: 100%;" class="subscribe-header">
<tr>
<td>
<h2 style="padding: 0px; margin: 5px 20px; font-size: 16px; line-height: 1; font-weight: normal; color: #464646; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;" class="subscribe-title">
New post on <strong>Nathans QGIS and GIS blog</strong> </h2>
</td>
<td style="text-align: right;">
<img border="0" style="margin: 5px 20px 5px 0; vertical-align: middle;" class="head-avatar" src='http://s.wordpress.com/i/emails/blavatar-default.png' alt='' style='vertical-align: middle;' />
</td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="20" bgcolor="#ffffff" style="width: 100%;">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" style="width: 100%;">
<tr>
<td valign="top" class="the-post">
<table border="0" cellspacing="0" cellpadding="0" style="width: 100%;">
<tr>
<td style="width: 60px !important; white-space: nowrap; vertical-align: top;">
<a href="http://woostuff.wordpress.com/author/madmanwoo/" style="display: block; margin-right: 10px; text-decoration: none; color: #0088cc; text-decoration: underline; color: #2585B2;"><img border="0" alt='' src='http://0.gravatar.com/avatar/03ccba009c26488991d9ec669e3fccf6?s=50&d=' class='avatar avatar-50' height='50' width='50' /></a>
</td>
<td>
<h2 style="margin: 0; font-size: 1.6em; color: #555; margin: 0; font-size: 1.6em; color: #555; font-size: 20px;" class="post-title"><a style="text-decoration: none !important; text-decoration: none; color: #0088cc; text-decoration: underline; color: #2585B2;" href="http://woostuff.wordpress.com/2012/08/05/html-map-tips-in-qgis/">HTML map tips in QGIS</a></h2>
<span style="color: #888;">by <a href="http://woostuff.wordpress.com/author/madmanwoo/" style="color: #888 !important; text-decoration: none; color: #0088cc; text-decoration: underline; color: #2585B2;">Nathan</a></span>
</td>
</tr>
</table>
<div style="margin-top: 1em; max-width: 560px;" class="post-content">
<p style="font-size: 14px; line-height: 1.4em; color: #444444; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0 0 1em 0;">New fresh QGIS feature! So fresh in fact you can still smell the wet paint :)</p>
<p style="font-size: 14px; line-height: 1.4em; color: #444444; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0 0 1em 0;">QGIS (development build) can <a href="https://github.com/qgis/Quantum-GIS/commit/8aa160bcb3548a881248c7d46d92c4f2e12ffc02" style="text-decoration: none; color: #0088cc; text-decoration: underline; color: #2585B2;">now</a> display map tips using HTML (a <a href="http://doc.qt.nokia.com/4.7-snapshot/richtext-html-subset.html" style="text-decoration: none; color: #0088cc; text-decoration: underline; color: #2585B2;">subset</a> anyway).</p>
<p style="font-size: 14px; line-height: 1.4em; color: #444444; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0 0 1em 0;">To enable the new map tips: Open the Layer Properties dialog for a layer and select the Display tab</p>
<p style="font-size: 14px; line-height: 1.4em; color: #444444; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0 0 1em 0;">
<div id="attachment_1099" class="" style=" clear:both; text-align: center; margin: 0 auto; padding: 4px; background-color: white; border: 1px solid #ccc"><a href="http://woostuff.files.wordpress.com/2012/08/html.png" style="text-decoration: none; color: #0088cc; text-decoration: underline; color: #2585B2;"><img border="0" style="max-width: 100%; height: auto; margin-bottom: 12px;" class="size-full wp-image-1099" title="html" src="http://woostuff.files.wordpress.com/2012/08/html.png" alt="" /></a>
<p class="wp-caption-text" style="font-size: 14px; line-height: 1.4em; color: #444444; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0 0 1em 0;">Display tab to set HTML map tips</p>
</div>
<h2>In action</h2>
<p style="font-size: 14px; line-height: 1.4em; color: #444444; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0 0 1em 0;">
<div id="attachment_1100" class="" style=" clear:both; text-align: center; margin: 0 auto; padding: 4px; background-color: white; border: 1px solid #ccc"><a href="http://woostuff.files.wordpress.com/2012/08/html-inaction.png" style="text-decoration: none; color: #0088cc; text-decoration: underline; color: #2585B2;"><img border="0" style="max-width: 100%; height: auto; margin-bottom: 12px;" class="size-full wp-image-1100" title="html-inaction" src="http://woostuff.files.wordpress.com/2012/08/html-inaction.png" alt="" /></a>
<p class="wp-caption-text" style="font-size: 14px; line-height: 1.4em; color: #444444; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0 0 1em 0;">Layer properties for HTML map tip</p>
</div>
<p style="font-size: 14px; line-height: 1.4em; color: #444444; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0 0 1em 0;">Notice how we can also use a QGIS expression. Anything inside <code>[% %]</code> will be evaluated and replaced with the value in real-time. We can even use a CASE statement. Pretty cool!</p>
<p style="font-size: 14px; line-height: 1.4em; color: #444444; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0 0 1em 0;">And the result when hovering over a feature</p>
<p style="font-size: 14px; line-height: 1.4em; color: #444444; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0 0 1em 0;">
<div id="attachment_1101" class="" style=" clear:both; text-align: center; margin: 0 auto; padding: 4px; background-color: white; border: 1px solid #ccc"><a href="http://woostuff.files.wordpress.com/2012/08/html-inaction2.png" style="text-decoration: none; color: #0088cc; text-decoration: underline; color: #2585B2;"><img border="0" style="max-width: 100%; height: auto; margin-bottom: 12px;" class="size-full wp-image-1101" title="html-inaction2" src="http://woostuff.files.wordpress.com/2012/08/html-inaction2.png" alt="" /></a>
<p class="wp-caption-text" style="font-size: 14px; line-height: 1.4em; color: #444444; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0 0 1em 0;">HTML in QGIS map tip? Yes! WOOT!</p>
</div>
<p style="font-size: 14px; line-height: 1.4em; color: #444444; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0 0 1em 0;">Hold on. Pause the track! We can even use some CSS to make it more fancy.</p>
<p style="font-size: 14px; line-height: 1.4em; color: #444444; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0 0 1em 0;">
<pre class="brush: xml;" style="font-size: 14px; line-height: 1.4em; color: #444444; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0 0 1em 0;">
<style>
h1 {color:red;}
p.question {color:blue;}
</style>
<h1> [% "NAME" %] </h1>
<br>
<img src="[% "image" %]" />
<br>
<p class="question">Is this place a country?</p>
<br>
[% CASE WHEN "TYPE" = 'Country' THEN 'Yes' ELSE 'No. It is a ' || "TYPE" END %]
</pre>
</p>
<p style="font-size: 14px; line-height: 1.4em; color: #444444; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0 0 1em 0;">
<div id="attachment_1105" class="" style=" clear:both; text-align: center; margin: 0 auto; padding: 4px; background-color: white; border: 1px solid #ccc"><a href="http://woostuff.files.wordpress.com/2012/08/css.png" style="text-decoration: none; color: #0088cc; text-decoration: underline; color: #2585B2;"><img border="0" style="max-width: 100%; height: auto; margin-bottom: 12px;" class="size-full wp-image-1105" title="css" src="http://woostuff.files.wordpress.com/2012/08/css.png" alt="" /></a>
<p class="wp-caption-text" style="font-size: 14px; line-height: 1.4em; color: #444444; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0 0 1em 0;">CSS in a html map tip</p>
</div>
<p style="font-size: 14px; line-height: 1.4em; color: #444444; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0 0 1em 0;">Happy Mapping :)</p>
<div style="clear: both"></div> </div>
<div style="color: #999; font-size: 0.9em; margin-top: 4px; color: #999; font-size: 0.9em; margin-top: 4px; line-height: 160%; padding: 15px 0 15px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; overflow: hidden" class="meta">
<strong><a href="http://woostuff.wordpress.com/author/madmanwoo/" style="text-decoration: none; color: #0088cc; text-decoration: underline; color: #2585B2;">Nathan</a></strong> | August 5, 2012 at 9:35 pm | Tags: <a href="http://woostuff.wordpress.com/?tag=fossgis" style="text-decoration: none; color: #0088cc; text-decoration: underline; color: #2585B2;">FOSSGIS</a>, <a href="http://woostuff.wordpress.com/?tag=gis" style="text-decoration: none; color: #0088cc; text-decoration: underline; color: #2585B2;">gis</a>, <a href="http://woostuff.wordpress.com/?tag=mapping" style="text-decoration: none; color: #0088cc; text-decoration: underline; color: #2585B2;">mapping</a>, <a href="http://woostuff.wordpress.com/?tag=open-source" style="text-decoration: none; color: #0088cc; text-decoration: underline; color: #2585B2;">Open Source</a>, <a href="http://woostuff.wordpress.com/?tag=qgis" style="text-decoration: none; color: #0088cc; text-decoration: underline; color: #2585B2;">qgis</a>, <a href="http://woostuff.wordpress.com/?tag=styling" style="text-decoration: none; color: #0088cc; text-decoration: underline; color: #2585B2;">styling</a>, <a href="http://woostuff.wordpress.com/?tag=tips" style="text-decoration: none; color: #0088cc; text-decoration: underline; color: #2585B2;">tips</a>
| Categories: <a href="http://woostuff.wordpress.com/?cat=25" style="text-decoration: none; color: #0088cc; text-decoration: underline; color: #2585B2;">Open Source</a>, <a href="http://woostuff.wordpress.com/?cat=534019" style="text-decoration: none; color: #0088cc; text-decoration: underline; color: #2585B2;">qgis</a>
| URL: <a href="http://wp.me/pjIwZ-hI" style="text-decoration: none; color: #0088cc; text-decoration: underline; color: #2585B2;">http://wp.me/pjIwZ-hI</a> </div>
<p style="font-size: 14px; padding: 0; color: #666; padding-top: 1em; padding-bottom: 0em; margin-bottom: 0; margin-left: 0; padding-left: 0;" class="subscribe-action-links">
<table border="0" cellspacing="0" cellpadding="0" style="width: 100%;">
<tr>
<td style="width: 10px;"><a style='-moz-border-radius: 10em; -webkit-border-radius: 10em; border-radius: 10em; border: 1px solid #11729E; text-decoration: none; color: #fff; text-shadow: 0 1px 0 #11729E; background-color: #2585B2; padding: 5px 15px; font-size: 16px; line-height: 1.4em; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-weight: normal; margin-left: 0; white-space: nowrap;' href="http://woostuff.wordpress.com/2012/08/05/html-map-tips-in-qgis/#respond" style="text-decoration: none; color: #0088cc; text-decoration: underline; color: #2585B2;">Comment</a></td>
<td> <a style="font-size: 14px; text-decoration: underline; text-decoration: none; color: #0088cc; text-decoration: underline; color: #2585B2;" class="subscribe-action-link" href="http://woostuff.wordpress.com/2012/08/05/html-map-tips-in-qgis/#comments">See all comments</a></td>
</tr>
</table>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="20" bgcolor="#efefef" style="background-color: #efefef; text-align: left; border-top: 1px solid #dddddd; width: 100%;" class="subscribe-wrapper-sub">
<tr>
<td style="border-top: 1px solid #f3f3f3; color: #888; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; background: #efefef;" class="subscribe-content">
<p style='font-size: 12px; line-height: 1.4em; margin: 0px 0px 10px 0px;' style="font-size: 14px; line-height: 1.4em; color: #444444; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0 0 1em 0;">
Unsubscribe or change your email settings at <a href="https://subscribe.wordpress.com/?key=5d8fffc771bced9f7eeeda3b07f875c6&email=cavallini%40faunalia.it" style="text-decoration: none; color: #0088cc; text-decoration: underline; color: #2585B2;">Manage Subscriptions</a>. </p>
<p style='font-size: 12px; line-height: 1.4em; margin: 0px 0px 0px 0px;' style="font-size: 14px; line-height: 1.4em; color: #444444; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0 0 1em 0;">
<strong>Trouble clicking?</strong> Copy and paste this URL into your browser: <br />
<a href="http://woostuff.wordpress.com/2012/08/05/html-map-tips-in-qgis/" style="text-decoration: none; color: #0088cc; text-decoration: underline; color: #2585B2;">http://woostuff.wordpress.com/2012/08/05/html-map-tips-in-qgis/</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" height="3" background="http:/s.wordpress.com/i/emails/stripes.gif" style="background-image: url( 'http://s.wordpress.com/i/emails/stripes.gif'); background-repeat: repeat-x; background-color: #43A4D0; height: 3px; width: 100%;" class="subscribe-footer-wrap">
<tr>
<td></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align='center' style="padding-bottom: 2em; color: #555555; font-size: 12px; height: 18px; text-align: center; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; width: 100%;" class="subscribe-footer">
<tr>
<td align='center'>
<a style="font-size: 14px; color: #555555 !important; text-decoration: none; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #555 !important; font-size: 14px; text-decoration: none;" class="subscribe-footer-link" href="http://wordpress.com">Thanks for flying with <img border="0" src="http://s.wordpress.com/i/emails/wp-footericon.png" alt="" style="vertical-align: middle;" width="16" and height="17" /> WordPress.com</a> </td>
</tr>
</table>
<br />
</td>
</tr>
</table>
<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=woostuff.wordpress.com&blog=4699413&post=1098&subd=woostuff&ref=&email=1&email_o=wpcom" width="1" height="1" /></body></html>