Hacking Google Maps and Google Earth (ExtremeTech)

(Dana P.) #1

Chapter 12 — The Realtors and Archaeologists Toolkit 231


From Figure 12-2 you can see that the anchor point remains as the point for the entire label
(according to the apex of the arrow). An offset then specifies the location of the arrow in rela-
tion to the content of the rest of the label. You achieve this in XHTML by specifying the
padding around the text label and using the arrow as the background image.


FIGURE12-2: Adding an arrow to the label.


An outer XHTML block defines the entire label, and the inner XHTML block defines the
text portion of the label. The label demonstrated in Figure 12-1 can be created using the fol-
lowing XHTML:


<div style=”padding: 16px 24px 0px 0px; background: url(topright.png) ;
no-repeat top right;”>
<div style=”background-color: #ff0000; padding: 2px; font-size: 0.7em;”>
Inner text




The padding defines the offset size of the arrow being used, which is also used as the back-
ground image, appended to the top right of the displayed fragment. The effect is to offset the
arrow away from the actual label.


The only issue with this process is that you must separately define and create a suitable arrow
according to the anchor point you want to use for your label. In the preceding example, the
arrow is on the top right; separate arrows (and appropriate XHTML) would be required if
you wanted an anchor point on the bottom left, top middle, and so on.


There is one final trick with the TLabelextension — using it for embedding an arbitrary
image.


Embedding Pictures as Labels


You can adapt the TLabelobject so that it shows an image, rather than text. Simply change
the XHTML so that the embedded component is an image, rather than some text. It really is
as simple as that.


Inner <div>

Outer <div>
Padding top

Padding right
Free download pdf