<?xml version='1.0' encoding='UTF-8'?>
<section>
	<sectioninfo>
		<keywordset>
			<keyword>map</keyword>
			<keyword>Virtual Earth</keyword>
		</keywordset>
	</sectioninfo>

	<table>
		<title>Component identification parameters</title>
		<tgroup cols="2">
			<thead>
				<row>
					<entry>Name</entry>
					<entry>Value</entry>
				</row>
			</thead>
			<tbody>
				<row>
					<entry>component-type</entry>
					<entry>org.richfaces.VirtualEarth</entry>
				</row>
				<row>
					<entry>component-class</entry>
					<entry>
						org.richfaces.component.html.HtmlVirtualEarth
					</entry>
				</row>
				<row>
					<entry>component-family</entry>
					<entry>org.richfaces.VirtualEarth</entry>
				</row>
				<row>
					<entry>renderer-type</entry>
					<entry>org.richfaces.VirtualEarthRenderer</entry>
				</row>
				<row>
					<entry>tag-class</entry>
					<entry>org.richfaces.taglib.VirtualEarthTag</entry>
				</row>
			</tbody>
		</tgroup>
	</table>

	<section>
		<title>Creating the Component with a Page Tag</title>
		<para>
			To create the simplest variant on a page use the following
			syntax:
		</para>

		<para>
			<emphasis role="bold">Example:</emphasis>
		</para>
		<programlisting role="XML"><![CDATA[...
    <rich:virtualEarth lat="..." lng="..."/>
...
]]></programlisting>
	</section>
	<section>
		<title>Creating the Component Dynamically Using Java</title>

		<para>
			<emphasis role="bold">Example:</emphasis>
		</para>
		<programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlVirtualEarth;
...
HtmlVirtualEarth myMap = new HtmlVirtualEarth();
...
]]></programlisting>
	</section>
	<section>
		<title>Details of Usage</title>

		<para>
			Here are the main settings of initial rendering performed
			with a component
			<property>map</property>
			that are accessible with the following attributes:
		</para>
		<itemizedlist>
			<listitem>
				<para>
					<emphasis>
						<property>&quot;zoom&quot;</property>
					</emphasis>
					defines an approximation size (boundary values 1-18)
				</para>
			</listitem>
			<listitem>
				<para>
					<emphasis>
						<property>&quot;lat&quot;</property>
					</emphasis>
					specifies an initial latitude coordinate in degrees,
					as a number between -90 and +90
				</para>
			</listitem>
			<listitem>
				<para>
					<emphasis>
						<property>&quot;lng&quot;</property>
					</emphasis>
					specifies an initial longitude coordinate in
					degrees, as a number between -180 and +180
				</para>
			</listitem>
			<listitem>
				<para>
					<emphasis>
						<property>&quot;dashboardSize&quot;</property>
					</emphasis>
					specifies a type of a rendered map (Normal, Small,
					Tiny)
				</para>
			</listitem>
		</itemizedlist>
		<para>
			For example, the city of Paris is shown after rendering with
			the following initial settings:
			<code>lat = &quot;48.833&quot;</code>
			,
			<code>lng = &quot;2.40&quot;</code>
			and
			<code>zoom = &quot;11&quot;</code>
			.
		</para>
		<figure>
			<title>
				<emphasis role="bold">
					<property>&lt;rich:virtualEarth&gt;</property>
				</emphasis>
				initial rendering
			</title>
			<mediaobject>
				<imageobject>
					<imagedata fileref="images/virtualEarth2.png" />
				</imageobject>
			</mediaobject>
		</figure>
		<para>Code for this example is placed below:</para>
		<para>
			<emphasis role="bold">Example:</emphasis>
		</para>
		<programlisting role="XML"><![CDATA[...
    <rich:virtualEarth  style="width:800px;" id="vm" lat="48.833" lng="2.40" 
                                     dashboardSize="Normal"  zoom="11" mapStyle="Hybrid" var="map" />
...
]]></programlisting>

		<para>
			To set all these parameters and perform some activity (Zoom
			In/Out etc.) is possible with your JavaScript, i.e. declare
			a name of an object on a
			<property>map</property>
			in the
			<emphasis>
				<property>&quot;var&quot;</property>
			</emphasis>
			attribute and then call the object directly with API
			<emphasis>
				<property>Microsoft Virtual Earth map</property>
				.
			</emphasis>
		</para>
		<para>
			For example, to approximate a map for
			<code>var = &quot;map&quot;</code>
			declared inside the component, call
			<code>map.ZoomIn()</code>
			on an event.
		</para>
		<para>
			Moreover, to add e.g. some JavaScript effects, events
			defined on it are used.
		</para>
		<itemizedlist>
			<listitem>
				<para><emphasis><property>&quot;onmouseover&quot;</property></emphasis></para>
			</listitem>
			<listitem>
				<para><emphasis><property>&quot;onclick&quot;</property></emphasis></para>
			</listitem>
			<listitem>
				<para><emphasis><property>&quot;onmouseout&quot;</property></emphasis></para>
			</listitem>
			<listitem>
				<para>etc.</para>
			</listitem>
		</itemizedlist>

		<note>
			<para>
				Virtual Earth does not support XHTML format of the page.
				Thus, if you use Facelets and JSF 1.2, do not forget to
				put the following tags somewhere on the page:
			</para>
			<programlisting role="XML"><![CDATA[...
<f:view contentType="text/html">...</f:view>
...
]]></programlisting>
		</note>

	</section>
	<section>
		<title>Look-and-Feel Customization</title>
		<para>
			<emphasis role="bold">
				<property>&lt;rich:virtualEarth&gt;</property>
			</emphasis>
			component isn&apos;t tied to skin parameters, as there is no
			additional elements on it, except the ones provided with
			<emphasis>
				<property>Virtual Earth map</property>
				.
			</emphasis>
		</para>
	</section>

	<section>
		<title>Definition of Custom Style Classes</title>
		<table>
			<title>
				Classes names that define a component appearance
			</title>
			<tgroup cols="2">
				<thead>
					<row>
						<entry>Class name</entry>
						<entry>Description</entry>
					</row>
				</thead>
				<tbody>
					<row>
						<entry>rich-virtualEarth</entry>
						<entry>
							Defines styles for a wrapper &lt;div&gt;
							element of a component
						</entry>
					</row>
				</tbody>
			</tgroup>
		</table>

		<para>
			In order to redefine styles for all
			<emphasis role="bold">
				<property>&lt;rich:virtualEarth&gt;</property>
			</emphasis>
			components on a page using CSS, it&apos;s enough to create
			class with the same name and define necessary properties in
			it.
		</para>

		<para>
			To change styles of particular
			<emphasis role="bold">
				<property>&lt;rich:virtualEarth&gt;</property>
			</emphasis>
			components, define your own style class in the corresponding
			<emphasis role="bold">
				<property>&lt;rich:virtualEarth&gt;</property>
			</emphasis>
			attribute.
		</para>
	</section>
	<section>
		<title>Relevant Resources Links</title>
		<para>
			<ulink
				url="http://msdn2.microsoft.com/en-us/library/bb429619.aspx">
				Here
			</ulink>
			you can found additional information about Microsoft
			<property>Virtual Earth map</property>
			.
		</para>
                  <para>
	  Some additional information about usage of component can be found 
	  <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/virtualEarth.jsf?c=virtualEarth">on its LiveDemo page</ulink>.</para>


	</section>

</section>
