app:yui_map
  • 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
Back to menuExample: Simple Example

This is a simple example that uses the <app:yui_map> and populates the location of the Appcelerator HQ and the nearest bar.

\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'}]});
<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