-
Notifications
You must be signed in to change notification settings - Fork 2
/
Example2.tml
52 lines (47 loc) · 2.17 KB
/
Example2.tml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<html t:type="componentDemoLayout" title="Google Map demo"
xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd"
xmlns:p="tapestry:parameter"
xmlns:ex="tapestry-library:exanpe">
<p:description>
This page displays a Google Map with some custom markers.<br/>
<b>gmapMarker</b> component is used to add a Google Map marker.<br /><br />
The <b>info</b> parameter is used to display an information bubble when user click on a marker.<br />
Marker icon can be customized with <b>icon</b> parameter.<br /><br />
Notice the <b>sidebar</b> parameter used to display a menu with active links of the markers.<br /><br />
Notice that <b>info</b>, <b>title</b> and <b>icon</b> can be loaded from resources file.<br />
The keys have to be named:
<ul>
<li>id-title</li>
<li>id-info</li>
<li>id-icon</li>
</ul>
</p:description>
<p:code>
<ex:gmap t:id="map1" latitude="48.8577" longitude="2.295" mapType="roadmap" sidebar="true">
<ex:gmapMarker t:id="metro" latitude="48.867781" longitude="2.313982" />
<ex:gmapMarker title="la-duree-title" latitude="48.870812" longitude="2.303081" info="Best macarons in Paris." />
<ex:gmapMarker title="literal:Eiffel Tower" latitude="48.8577" longitude="2.295"
icon="context:img/gmap/tour-eiffel.png">
<p:info>
<t:outputraw value="message:tour-eiffel-info" />
</p:info>
</ex:gmapMarker>
<ex:gmapMarker title="literal:Arc De Triumph" latitude="48.87389" longitude="2.29500">
<p:info>
<b>Arc De Triumph</b><br />
<div>${arcDeTriumphDescription}</div>
</p:info>
</ex:gmapMarker>
</ex:gmap>
</p:code>
<p:notice>
These keys are defined in the property file of the current page: <br/><br/>
Example2.properties :
<t:highlightBody type="ini">
tour-eiffel-info=<h4>Eiffel Tower</h4>Parc du Champ de Mars <br />5 Avenue Anatole France 75007 Paris
la-duree-title=La Durée
metro-title=Champs-Élysées Metro
metro-icon=context:img/gmap/metro.png
</t:highlightBody>
</p:notice>
</html>