1 <%@ Page Language="C#" MasterPageFile="~/MasterPages/SamplePageWithCode.master" AutoEventWireup="true"
2 CodeFile="04c_WeatherGadgetVEMap.aspx.cs" Inherits="_05_OtherSamples_04c_WeatherGadgetVEMap"
3 Title="Weather Gadget w/Virtual Earth" %>
4
5 <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="Server">
6 <script type="text/javascript">
7 function GetWeatherData_Click() {
8 WeatherService.GetWeatherData(document.getElementById("ctl00_MainContent_ZipCode").value, OnWeatherComplete);
9 }
10
11 function OnWeatherComplete(results) {
12 document.getElementById("mapResults").control.set_data(results);
13 var map = document.getElementById("mapResults");
14 //map.control.setBestMapView(results);
15 map.control.panTo(results[0].Latitude, results[0].Longitude);
16 }
17
18 </script>
19 <div>
20 Showing the VEMap control mapping the plot and adding the forecast information to
21 the pushpin when a weather item is retrieved.<br />
22 <table border="0" cellpadding="0" cellspacing="2">
23 <tr>
24 <td>
25 <div id="gadgetResults">
26 <atlas:UpdatePanel ID="WeatherGadget" runat="server" Mode="conditional">
27 <ContentTemplate>
28 <table id="gadgetTable" border="0" cellpadding="2" cellspacing="0" style="border: solid 1px black">
29 <tr>
30 <td nowrap align="center">
31 <asp:Label ID="CityTitle" runat="server"></asp:Label></td>
32 </tr>
33 <tr>
34 <td valign="top">
35 <table border="0" cellpadding="0" cellspacing="0">
36 <tr>
37 <td nowrap>
38 <asp:Image ID="ImageIcon" Width="128" Height="128" runat="server" /></td>
39 <td>
40 <asp:Label ID="Temperature" runat="server" CssClass="temp"></asp:Label>°F</td>
41 </tr>
42 </table>
43 </td>
44 </tr>
45 <tr>
46 <td>
47 <table border="0" cellpadding="3" cellspacing="0">
48 <tr>
49 <td nowrap>
50 <b>Current Conditions:</b></td>
51 <td>
52 <asp:Label ID="Conditions" runat="server"></asp:Label></td>
53 </tr>
54 <tr>
55 <td nowrap>
56 <b>Feels Like:</b></td>
57 <td>
58 <asp:Label ID="FeelsLike" runat="server"></asp:Label></td>
59 </tr>
60 <tr>
61 <td nowrap>
62 <b>Humidity:</b></td>
63 <td>
64 <asp:Label ID="Humidity" runat="server"></asp:Label>%</td>
65 </tr>
66 <tr>
67 <td nowrap>
68 <b>Updated:</b></td>
69 <td>
70 <asp:Label ID="LastUpdated" runat="server"></asp:Label></td>
71 </tr>
72 </table>
73 </td>
74 </tr>
75 <tr>
76 <td style="border-top: solid 1px black; text-align: center; vertical-align: middle"
77 align="center" valign="middle">
78 <asp:TextBox ID="ZipCode" runat="server"></asp:TextBox> <asp:Button ID="RefreshData"
79 runat="server" Text="Get Weather" OnClick="GetWeather_OnClick" OnClientClick="GetWeatherData_Click()" />
80 <atlas:AutoCompleteExtender ID="ZipComplete" runat="server">
81 <atlas:AutoCompleteProperties Enabled="true" ServiceMethod="GetCities" ServicePath="~/CityLocations.asmx"
82 TargetControlID="ZipCode" />
83 </atlas:AutoCompleteExtender>
84 </td>
85 </tr>
86 <tr>
87 <td style="border-top: solid 1px black; text-align: center; vertical-align: middle"
88 align="center" valign="middle">
89 <asp:Image ID="Image1" ImageUrl="~/Images/weather/logos/TWClogo_32px.png" runat="server" /> <span
90 style="font-size: x-small">Weather data provided by <a href="http://weather.com">Weather.com</a></span>.
91 </td>
92 </tr>
93 </table>
94 </ContentTemplate>
95 </atlas:UpdatePanel>
96 </div>
97 </td>
98 <td valign="top">
99 <div class="map">
100 <div id="mapResults"></div>
101 <div style="position: relative; left: 0px; top: 0px;">
102 <div id="mapResults_mapTemplate">
103 <img id="mapResults_mapTemplate_ctl00" alt="Map Controller" src="/images/MapUI.png"
104 usemap="#mapResults_mapTemplate_controller__map" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/WebResource.axd?d=-N70QYAjrPenCphBtdTHM5LM-qWLAaQERP-Xz3yBaI5e6U6JSg6bYfskApC84CM8ofK5hjCugtb5hI80vFRvgg2&t=632677741364531250);
105 border-style: none; height: 53px; width: 118px;" />
106 <map id="mapResults_mapTemplate_controller__map" name="mapResults_mapTemplate_controller__map">
107 <area id="mapResults_mapTemplate_controller__panLeft" alt="Pan Left" title="Pan Left"
108 nohref="nohref" shape="circle" coords="17,25,7" href="#" />
109 <area id="mapResults_mapTemplate_controller__panRight" alt="Pan Right" title="Pan Right"
110 nohref="nohref" shape="circle" coords="41,25,7" href="#" />
111 <area id="mapResults_mapTemplate_controller__panTop" alt="Pan Top" title="Pan Top"
112 nohref="nohref" shape="circle" coords="29,16,7" href="#" />
113 <area id="mapResults_mapTemplate_controller__panBottom" alt="Pan Bottom" title="Pan Bottom"
114 nohref="nohref" shape="circle" coords="29,35,7" href="#" />
115 <area id="mapResults_mapTemplate_controller__zoomIn" alt="Zoom In" title="Zoom In"
116 nohref="nohref" shape="circle" coords="70,18,7" href="#" />
117 <area id="mapResults_mapTemplate_controller__zoomOut" alt="Zoom Out" title="Zoom Out"
118 nohref="nohref" shape="circle" coords="56,18,7" href="#" />
119 <area id="mapResults_mapTemplate_controller__road" alt="Road" title="Road" nohref="nohref"
120 shape="rect" coords="86,8,102,24" href="#" />
121 <area id="mapResults_mapTemplate_controller__hybrid" alt="Hybrid" title="Hybrid"
122 nohref="nohref" shape="rect" coords="86,27,102,43" href="#" />
123 <area id="mapResults_mapTemplate_controller__reset" alt="Reset" title="Reset" nohref="nohref"
124 shape="rect" coords="49,28,62,43" href="#" />
125 </map>
126 </div>
127 </div>
128 </div>
129 <div style="display: none;">
130 <div id="mapResults_popupTemplate">
131 <div class="item" style="background-color:White;color:Black; padding:10px; border:solid 1px black">
132 <span id="mapResults_popupTemplate_name" style="font-weight:bold"></span>
133 <br />
134 <span id="mapResults_popupTemplate_description"></span>
135 <br />
136 Tomorrow's High: <span id="mapResults_popupTemplate_forecastHi"></span>
137 <br />
138 Tomorrow's Low: <span id="mapResults_popupTemplate_forecastLow"></span>
139 </div>
140 </div>
141 </div>
142 </td>
143 </tr>
144 </table>
145 </div>
146
147 <script type="text/xml-script">
148 <page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
149 <components>
150 <dataSource id="weatherDS" serviceURL="/WeatherService.asmx">
151 <bindings>
152 <binding property="selectParameters" propertyKey="zipCode"
153 dataContext="ctl00_MainContent_ZipCode" dataPath="text" />
154 </bindings>
155 </dataSource>
156 <itemView id="weatherView">
157 <bindings>
158 <binding property="data" dataContext="weatherDS" dataPath="data" />
159 </bindings>
160 <itemTemplate>
161 <template id="gadgetTable">
162 <label id="ctl00_MainContent_CityTitle">
163 <bindings>
164 <binding property="text" dataPath="Location" />
165 </bindings>
166 </label>
167 <image id="ctl00_MainContent_ImageIcon">
168 <bindings>
169 <binding property="imageURL" dataPath="IconType"
170 transform="ToString" transformerArgument="/images/weather/128x128/{0}.png" />
171 </bindings>
172 </image>
173 <label id="ctl00_MainContent_Conditions">
174 <bindings>
175 <binding property="text" dataPath="Description" />
176 </bindings>
177 </label>
178 <label id="ctl00_MainContent_Temperature">
179 <bindings>
180 <binding property="text" dataPath="Temperature"
181 transform="ToString" transformerArgument="{0} °F" />
182 </bindings>
183 </label>
184 <label id="ctl00_MainContent_LastUpdated">
185 <bindings>
186 <binding property="text" dataPath="LastUpdated"
187 transform="ToString" transformerArgument="Last Updated: {0}" />
188 </bindings>
189 </label>
190 <label id="ctl00_MainContent_Humidity">
191 <bindings>
192 <binding property="text" dataPath="Humidity"
193 transform="ToString" transformerArgument="{0}%" />
194 </bindings>
195 </label>
196 <label id="ctl00_MainContent_FeelsLike">
197 <bindings>
198 <binding property="text" dataPath="FeelsLike" />
199 </bindings>
200 </label>
201 </template>
202 </itemTemplate>
203 </itemView>
204 <virtualEarthMap id="mapResults" targetElement="mapResults" latitude="34.053316" longitude="-118.253017" zoomLevel="12" mapStyle="Road" popupPositioningMode="BottomLeft" pushpinActivation="Hover" pushpinImageURL="/Images/pushpin.gif" pushpinImageWidth="0" pushpinImageHeight="0" popupCssClass="itemContainer" dataLatitudeField="Latitude" dataLongitudeField="Longitude">
205 <popupTemplate>
206 <template layoutElement="mapResults_popupTemplate">
207 <label cssClass="itemNameLabel" targetElement="mapResults_popupTemplate_name">
208 <bindings>
209 <binding dataPath="Location" property="text" />
210 </bindings>
211 </label>
212 <label targetElement="mapResults_popupTemplate_description">
213 <bindings>
214 <binding dataPath="Description" property="text" />
215 </bindings>
216 </label>
217 <label targetElement="mapResults_popupTemplate_forecastHi">
218 <bindings>
219 <binding dataPath="NextDayForecastTempHi" property="text" />
220 </bindings>
221 </label>
222 <label targetElement="mapResults_popupTemplate_forecastLow">
223 <bindings>
224 <binding dataPath="NextDayForecastTempLow" property="text" />
225 </bindings>
226 </label>
227 </template>
228 </popupTemplate>
229 </virtualEarthMap>
230 <button targetElement="mapResults_mapTemplate_controller__panLeft">
231 <click>
232 <invokeMethod target="mapResults" method="continuousPanBy">
233 <parameters deltaX="-10" deltaY="0" count="20" />
234 </invokeMethod>
235 </click>
236 </button>
237 <button targetElement="mapResults_mapTemplate_controller__panRight">
238 <click>
239 <invokeMethod target="mapResults" method="continuousPanBy">
240 <parameters deltaX="10" deltaY="0" count="20" />
241 </invokeMethod>
242 </click>
243 </button>
244 <button targetElement="mapResults_mapTemplate_controller__panTop">
245 <click>
246 <invokeMethod target="mapResults" method="continuousPanBy">
247 <parameters deltaX="0" deltaY="-10" count="20" />
248 </invokeMethod>
249 </click>
250 </button>
251 <button targetElement="mapResults_mapTemplate_controller__panBottom">
252 <click>
253 <invokeMethod target="mapResults" method="continuousPanBy">
254 <parameters deltaX="0" deltaY="10" count="20" />
255 </invokeMethod>
256 </click>
257 </button>
258 <button targetElement="mapResults_mapTemplate_controller__zoomIn">
259 <click>
260 <invokeMethod target="mapResults" method="zoomIn" />
261 </click>
262 </button>
263 <button targetElement="mapResults_mapTemplate_controller__zoomOut">
264 <click>
265 <invokeMethod target="mapResults" method="zoomOut" />
266 </click>
267 </button>
268 <button targetElement="mapResults_mapTemplate_controller__road">
269 <click>
270 <setProperty target="mapResults" property="mapStyle" value="Road" />
271 </click>
272 </button>
273 <button targetElement="mapResults_mapTemplate_controller__hybrid">
274 <click>
275 <setProperty target="mapResults" property="mapStyle" value="Hybrid" />
276 </click>
277 </button>
278 <button targetElement="mapResults_mapTemplate_controller__reset">
279 <click>
280 <setProperty target="mapResults" property="mapStyle" value="Road" />
281 <setProperty target="mapResults" property="zoomLevel" value="10" />
282 <setProperty target="mapResults" property="latitude" value="34.053316" />
283 <setProperty target="mapResults" property="longitude" value="-118.253017" />
284 </click>
285 </button>
286 </components>
287 </page>
288 </script>
289
290 </asp:Content>
291