app:yui_map
| Widget Name | yahoo map |
| Element | <app:yui_map> |
| Author | Tejus Parikh |
| Homepage | http://www.appcelerator.org |
| Description | yahoo DHTML Map Widget |
- Required Attributes (1)
- Optional Attributes (8)
- Examples (1)
- Source code
| Name | Type | Description | Default value |
|---|---|---|---|
| api_key | Yahoo API | Your Yahoo API key | Not specified |
| Name | Type | Description | Default value |
|---|---|---|---|
| on | On Expression | May be used to call add marker | Not specified |
| on_marker_click | Appcelerator Message Send | Name of message sent when a marker is clicked, defaults to l:{id}_clicked | Not specified |
| height | CSS Dimension | Height of the map | 400px |
| width | CSS Dimension | Width of the map | 400px |
| initial_location | Unknown | The initial location for the map | USA |
| zoom_level | Unknown | the zoom level of the map | 15 |
| max_zoom_out | Unknown | if you are trying to use best_fit and running into problems, try setting this to what you think is a reasonable value | 99 |
| disable_key_controls | Unknown | Disable default keyboard/mouse wheel zoom and pan controls shortcuts | true |
Back to menuExample: Simple Example
\n
$MQ('l:add.map.markers', {'locations': [{'id': 1, 'location': '3535 Piedmont Rd, Atlanta, Georgia 30305'},
{'id': 2, 'location': '79 Buckhead Ave., Atlanta, GA 30305'}]});
This is a simple example that uses the <app:yui_map> and populates the location of the Appcelerator HQ and the nearest bar.
<app:yui_map id="mapContainer" api_key='Wcmd.ljV34Gz49YHhEFrjhaNgTer.SmTdtZYsVH97AMBd1PCp7FUL1y3wo8hSw--' initial_location="79 Buckhead Ave., Atlanta, GA 30305" zoom_level="5" max_zoom_out="8" height="230px" width="625px" on_marker_click='r:portal.select.location.request' on="l:add.map.markers then add_markers" ></app:yui_map> <app:script on="l:mapContainer_init then execute"> $MQ('l:add.map.markers', {'locations': [{'id': 1, 'location': '3535 Piedmont Rd, Atlanta, Georgia 30305'}, {'id': 2, 'location': '79 Buckhead Ave., Atlanta, GA 30305'}]}); </app:script>
Since <app:yui_map> requires a lot of additional, external javascript to load before being functional, it’s best to wait until l:<element_id>_init before calling any actions on the map.
1 /* 2 * This file is part of Appcelerator. 3 * 4 * Copyright (C) 2006-2008 by Appcelerator, Inc. All Rights Reserved. 5 * For more information, please visit http://www.appcelerator.org 6 * 7 * Appcelerator is free software: you can redistribute it and/or modify 8 * it under the terms of the GNU General Public License as published by 9 * the Free Software Foundation, either version 3 of the License, or 10 * (at your option) any later version. 11 * 12 * This program is distributed in the hope that it will be useful, 13 * but WITHOUT ANY WARRANTY; without even the implied warranty of 14 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 15 * GNU General Public License for more details. 16 * 17 * You should have received a copy of the GNU General Public License 18 * along with this program. If not, see <http://www.gnu.org/licenses/>. 19 * 20 */ 21 22 /** 23 * Yahoo Map widget wrapper 24 * 25 * The syntax for the object that needs to be passed to a marker is: 26 * { 27 * image: url, an optional image to be used for all markers, 28 * height: integer, if an image is specified, you must specify the height 29 * width: integer, if an image is specified, you must specify the width 30 * locations: an array of address strings, with an optional identifier: 31 * could either look like ['Atlanta', 'New York', 'Chicago', etc] or 32 * [{'id': 1, 'location': 'Atlanta'}, {'id': 2, 'location': 'Chicago'}, etc] 33 */ 34 Appcelerator.Widget.AppYuiMap = 35 { 36 included: false, 37 maps: [], 38 getName: function() 39 { 40 return 'yahoo map'; 41 }, 42 getDescription: function() 43 { 44 return 'yahoo DHTML Map Widget'; 45 }, 46 getVersion: function() 47 { 48 return 1.0; 49 }, 50 getSpecVersion: function() 51 { 52 return 1.0; 53 }, 54 getAuthor: function() 55 { 56 return 'Tejus Parikh'; 57 }, 58 getModuleURL: function () 59 { 60 return 'http://www.appcelerator.org'; 61 }, 62 isWidget: function () 63 { 64 return true; 65 }, 66 getWidgetName: function() 67 { 68 return 'app:yui_map'; 69 }, 70 getActions: function() 71 { 72 return ['add_markers', 'clear_map', 'center_and_zoom', 'best_fit', 'select_location']; 73 }, 74 clear_map: function(id,parameters,data,scope,version) 75 { 76 var map = Appcelerator.Widget.AppYuiMap.maps[id]; 77 map.removeMarkersAll(); 78 }, 79 center_and_zoom: function(id, parameters, data, scope, version) 80 { 81 var map = Appcelerator.Widget.AppYuiMap.maps[id]; 82 var zoom = (data['zoom_level']) ? parseInt(data["zoom_level"]) : map.getZoomLevel(); 83 map.drawZoomAndCenter(data["location"], zoom); 84 }, 85 best_fit: function(id, parameters, data, scope, version) 86 { 87 var map = Appcelerator.Widget.AppYuiMap.maps[id]; 88 var points = []; 89 var markers = map.getMarkerIDs(); 90 for(var i = 0, length = markers.length; i < length; i++) { 91 var coordPoint = map.getMarkerObject(markers[i]).getCoordPoint(); 92 points.push(map.convertXYLatLon(coordPoint)); 93 } 94 var ret = map.getBestZoomAndCenter(points); 95 var max_zoom = parseInt(parameters["max_zoom_out"]); 96 if(ret.zoomLevel > max_zoom) { 97 var interval = setInterval(function() { 98 ret = map.getBestZoomAndCenter(points); 99 if(ret.zoomLevel < max_zoom) { 100 map.panToLatLon(ret.YGeoPoint); 101 map.setZoomLevel(ret.zoomLevel); 102 clearInterval(interval); 103 } 104 }, 500); 105 } else { 106 map.panToLatLon(ret.YGeoPoint); 107 map.setZoomLevel(ret.zoomLevel); 108 } 109 }, 110 add_markers: function(id,parameters,data,scope,version) 111 { 112 var image = null, height = 33, width = 30; 113 if(typeof data['image'] != "undefined") { 114 image = data['image']; 115 height = (typeof data['height' != "undefined"]) ? parseInt(data['height']) : height; 116 width = (typeof data['width' != "undefined"]) ? parseInt(data['width']) : width; 117 } 118 119 var map = Appcelerator.Widget.AppYuiMap.maps[id]; 120 data['locations'].each(function(location) 121 { 122 var marker; 123 var myAddress = location, addrId = null; 124 if(typeof location['id'] != "undefined") 125 { 126 myAddress = location['location']; 127 addrId = location['id']; 128 } 129 130 if(null != image) 131 { 132 var myImage = new YImage(); 133 myImage.src = image; 134 myImage.size = new YSize(width, height); 135 myImage.offsetSmartWindow = new YCoordPoint(0,0); 136 marker = new YMarker(myAddress, myImage); 137 } else { 138 marker = new YMarker(myAddress); 139 } 140 141 var clickMessage = (typeof parameters["on_marker_click"] != "undefined") ? parameters["on_marker_click"] : "l:" + id + "_clicked"; 142 YEvent.Capture(marker, EventsList.MouseClick, function() { $MQ(clickMessage, {'id': addrId, 'location': myAddress}); }); 143 map.addOverlay(marker); 144 }); 145 }, 146 select_location: function(id,parameters,data,scope,version) 147 { 148 var image = null, height = 33, width = 30; 149 if(typeof data['image'] != "undefined") { 150 image = data['image']; 151 height = (typeof data['height' != "undefined"]) ? parseInt(data['height']) : height; 152 width = (typeof data['width' != "undefined"]) ? parseInt(data['width']) : width; 153 } 154 155 var map = Appcelerator.Widget.AppYuiMap.maps[id]; 156 var marker; 157 var myAddress = data['location']; 158 if(null != image) 159 { 160 var myImage = new YImage(); 161 myImage.src = image; 162 myImage.size = new YSize(width, height); 163 myImage.offsetSmartWindow = new YCoordPoint(0,0); 164 marker = new YMarker(myAddress, myImage, id + "_selected_marker"); 165 } else { 166 marker = new YMarker(myAddress, id + "_selected_marker"); 167 } 168 169 var selectedMarker = map.getMarkerObject( id + "_selected_marker"); 170 if(typeof selectedMarker != "undefined") 171 { 172 map.removeMarker(selectedMarker); 173 } 174 175 map.addOverlay(marker); 176 setTimeout( function() { 177 $(id + "_selected_marker").style.zIndex = "1000"; 178 }, 150); 179 }, 180 getAttributes: function() 181 { 182 return [ { 183 name: 'api_key', 184 optional: false, 185 type: Appcelerator.Types.pattern( 186 /^[a-zA-Z_][a-zA-Z0-9\-]*$/, 'Yahoo API'), 187 description: "Your Yahoo API key" 188 }, { 189 name: 'on', 190 optional: true, 191 type: Appcelerator.Types.onExpr, 192 description: "May be used to call add marker" 193 }, { 194 name: 'on_marker_click', 195 optional: true, 196 type: Appcelerator.Types.messageSend, 197 description: "Name of message sent when a marker is clicked, defaults to l:{id}_clicked" 198 }, { 199 name: 'height', 200 optional: true, 201 type: Appcelerator.Types.cssDimension, 202 description: "Height of the map", 203 defaultValue: "400px" 204 }, { 205 name: 'width', 206 optional: true, 207 type: Appcelerator.Types.cssDimension, 208 description: "Width of the map", 209 defaultValue: "400px" 210 }, { 211 name: "initial_location", 212 optional: true, 213 description: "The initial location for the map", 214 defaultValue: "USA" 215 }, { 216 name: "zoom_level", 217 optional: true, 218 description: "the zoom level of the map", 219 defaultValue: "15" 220 }, { 221 name: "max_zoom_out", 222 optional: true, 223 description: "if you are trying to use best_fit and running into problems, try setting this to what you think is a reasonable value", 224 defaultValue: "99" 225 }, { 226 name: "disable_key_controls", 227 optional: true, 228 description: "Disable default keyboard/mouse wheel zoom and pan controls shortcuts", 229 defaultValue: true 230 } 231 ]; 232 }, 233 initializeMap: function(params) 234 { 235 var mapDiv = $(params['id']); 236 237 var map = new YMap(document.getElementById(params['id'])); 238 this.maps[params['id']] = map; 239 map.removeZoomScale(); 240 map.setMapType(YAHOO_MAP_REG); 241 map.addZoomShort(); 242 if(params['disable_key_controls']) { 243 map.disableKeyControls(); 244 } 245 mapDiv.style.height = params['height']; 246 mapDiv.style.width = params['width']; 247 map.drawZoomAndCenter(params["initial_location"], parseInt(params["zoom_level"])); 248 $MQ('l:' + params['id'] + '_init'); 249 }, 250 compileWidget: function(params) 251 { 252 if(!this.included) { 253 var yahooKey = params['api_key']; 254 Appcelerator.Core.queueRemoteLoadScriptWithDependencies( 255 "http://api.maps.yahoo.com/ajaxymap?v=3.8&appid=" + yahooKey, 256 function() { Appcelerator.Widget.AppYuiMap.initializeMap(params);} 257 ); 258 included = true; 259 } else { 260 Appcelerator.Widget.AppYuiMap.initializeMap(params); 261 } 262 263 }, 264 buildWidget: function(element,params) 265 { 266 var html = []; 267 html.push("<div id='" + element.id + "'></div>"); 268 return { 269 'presentation' : html.join(' '), 270 'position' : Appcelerator.Compiler.POSITION_REPLACE, 271 'wire' : true, 272 'compile': true 273 }; 274 } 275 276 }; 277 278 Appcelerator.Widget.register('app:yui_map', Appcelerator.Widget.AppYuiMap); 279
Chapters
- Web Expressions (Interaction)
- Web Expressions (Visual)
- Web Expression Macros
-
Widget Reference
- app:as_flexflow
- app:box
- app:button
- app:calendar
- app:chart
- app:content
- app:datacache
- app:datatable
- app:download
- app:editinplace
- app:ext_grid
- app:ext_paging_grid
- app:ext_tree
- app:field
- app:folder
- app:graphical_music_player
- app:http
- app:if
- app:imagetransition
- app:iterator
- app:message
- app:modalbox
- app:modaldialog
- app:mp3player
- app:music_player
- app:pagination
- app:panel
- app:progressbar
- app:script
- app:search
- app:security
- app:shadowbox
- app:simple_panel
- app:statemachine
- app:stopwatch
- app:tabpanel
- app:template
- app:tooltip
- app:upload
- app:validation
- app:widget
- » app:yui_map
- CSS Helper Classes
- Advanced Configuration
- Debugging
- Forms
- Localization
- Interpolation
- Javascript Variables
- Javascript Functions
- Service Broker