examples/window/Ext.ux.GMapPanel.js

   1 /*\r
   2  * Ext JS Library 2.2.1\r
   3  * Copyright(c) 2006-2009, Ext JS, LLC.\r
   4  * licensing@extjs.com\r
   5  * \r
   6  * http://extjs.com/license\r
   7  */\r
   8 \r
   9 /**\r
  10  * @author Shea Frederick\r
  11  */\r
  12 \r
  13 Ext.namespace('Ext.ux');\r
  14  \r
  15 /**\r
  16  *\r
  17  * @class GMapPanel\r
  18  * @extends Ext.Panel\r
  19  */\r
  20 Ext.ux.GMapPanel = Ext.extend(Ext.Panel, {\r
  21     initComponent : function(){\r
  22         \r
  23         var defConfig = {\r
  24             plain: true,\r
  25             zoomLevel: 3,\r
  26             yaw: 180,\r
  27             pitch: 0,\r
  28             zoom: 0,\r
  29             gmapType: 'map',\r
  30             border: false\r
  31         };\r
  32         \r
  33         Ext.applyIf(this,defConfig);\r
  34         \r
  35         Ext.ux.GMapPanel.superclass.initComponent.call(this);        \r
  36 \r
  37     },\r
  38     afterRender : function(){\r
  39         \r
  40         var wh = this.ownerCt.getSize();\r
  41         Ext.applyIf(this, wh);\r
  42         \r
  43         Ext.ux.GMapPanel.superclass.afterRender.call(this);    \r
  44         \r
  45         if (this.gmapType === 'map'){\r
  46             this.gmap = new GMap2(this.body.dom);\r
  47         }\r
  48         \r
  49         if (this.gmapType === 'panorama'){\r
  50             this.gmap = new GStreetviewPanorama(this.body.dom);\r
  51         }\r
  52         \r
  53         if (typeof this.addControl == 'object' && this.gmapType === 'map') {\r
  54             this.gmap.addControl(this.addControl);\r
  55         }\r
  56         \r
  57         if (typeof this.setCenter === 'object') {\r
  58             if (typeof this.setCenter.geoCodeAddr === 'string'){\r
  59                 this.geoCodeLookup(this.setCenter.geoCodeAddr);\r
  60             }else{\r
  61                 if (this.gmapType === 'map'){\r
  62                     var point = new GLatLng(this.setCenter.lat,this.setCenter.lng);\r
  63                     this.gmap.setCenter(point, this.zoomLevel);    \r
  64                 }\r
  65                 if (typeof this.setCenter.marker === 'object' && typeof point === 'object'){\r
  66                     this.addMarker(point,this.setCenter.marker,this.setCenter.marker.clear);\r
  67                 }\r
  68             }\r
  69             if (this.gmapType === 'panorama'){\r
  70                 this.gmap.setLocationAndPOV(new GLatLng(this.setCenter.lat,this.setCenter.lng), {yaw: this.yaw, pitch: this.pitch, zoom: this.zoom});\r
  71             }\r
  72         }\r
  73 \r
  74         GEvent.bind(this.gmap, 'load', this, function(){\r
  75             this.onMapReady();\r
  76         });\r
  77 \r
  78     },\r
  79     onMapReady : function(){\r
  80         this.addMarkers(this.markers);\r
  81         this.addMapControls();\r
  82         this.addOptions();  \r
  83     },\r
  84     onResize : function(w, h){\r
  85 \r
  86         if (typeof this.getMap() == 'object') {\r
  87             this.gmap.checkResize();\r
  88         }\r
  89         \r
  90         Ext.ux.GMapPanel.superclass.onResize.call(this, w, h);\r
  91 \r
  92     },\r
  93     setSize : function(width, height, animate){\r
  94         \r
  95         if (typeof this.getMap() == 'object') {\r
  96             this.gmap.checkResize();\r
  97         }\r
  98         \r
  99         Ext.ux.GMapPanel.superclass.setSize.call(this, width, height, animate);\r
 100         \r
 101     },\r
 102     getMap : function(){\r
 103         \r
 104         return this.gmap;\r
 105         \r
 106     },\r
 107     getCenter : function(){\r
 108         \r
 109         return this.getMap().getCenter();\r
 110         \r
 111     },\r
 112     getCenterLatLng : function(){\r
 113         \r
 114         var ll = this.getCenter();\r
 115         return {lat: ll.lat(), lng: ll.lng()};\r
 116         \r
 117     },\r
 118     addMarkers : function(markers) {\r
 119         \r
 120         if (Ext.isArray(markers)){\r
 121             for (var i = 0; i < markers.length; i++) {\r
 122                 var mkr_point = new GLatLng(markers[i].lat,markers[i].lng);\r
 123                 this.addMarker(mkr_point,markers[i].marker,false,markers[i].setCenter, markers[i].listeners);\r
 124             }\r
 125         }\r
 126         \r
 127     },\r
 128     addMarker : function(point, marker, clear, center, listeners){\r
 129         \r
 130         Ext.applyIf(marker,G_DEFAULT_ICON);\r
 131 \r
 132         if (clear === true){\r
 133             this.getMap().clearOverlays();\r
 134         }\r
 135         if (center === true) {\r
 136             this.getMap().setCenter(point, this.zoomLevel);\r
 137         }\r
 138 \r
 139         var mark = new GMarker(point,marker);\r
 140         if (typeof listeners === 'object'){\r
 141             for (evt in listeners) {\r
 142                 GEvent.bind(mark, evt, this, listeners[evt]);\r
 143             }\r
 144         }\r
 145         this.getMap().addOverlay(mark);\r
 146 \r
 147     },\r
 148     addMapControls : function(){\r
 149         \r
 150         if (this.gmapType === 'map') {\r
 151             if (Ext.isArray(this.mapControls)) {\r
 152                 for(i=0;i<this.mapControls.length;i++){\r
 153                     this.addMapControl(this.mapControls[i]);\r
 154                 }\r
 155             }else if(typeof this.mapControls === 'string'){\r
 156                 this.addMapControl(this.mapControls);\r
 157             }else if(typeof this.mapControls === 'object'){\r
 158                 this.getMap().addControl(this.mapControls);\r
 159             }\r
 160         }\r
 161         \r
 162     },\r
 163     addMapControl : function(mc){\r
 164         \r
 165         var mcf = window[mc];\r
 166         if (typeof mcf === 'function') {\r
 167             this.getMap().addControl(new mcf());\r
 168         }    \r
 169         \r
 170     },\r
 171     addOptions : function(){\r
 172         \r
 173         if (Ext.isArray(this.mapConfOpts)) {\r
 174             var mc;\r
 175             for(i=0;i<this.mapConfOpts.length;i++){\r
 176                 this.addOption(this.mapConfOpts[i]);\r
 177             }\r
 178         }else if(typeof this.mapConfOpts === 'string'){\r
 179             this.addOption(this.mapConfOpts);\r
 180         }        \r
 181         \r
 182     },\r
 183     addOption : function(mc){\r
 184         \r
 185         var mcf = this.getMap()[mc];\r
 186         if (typeof mcf === 'function') {\r
 187             this.getMap()[mc]();\r
 188         }    \r
 189         \r
 190     },\r
 191     geoCodeLookup : function(addr) {\r
 192         \r
 193         this.geocoder = new GClientGeocoder();\r
 194         this.geocoder.getLocations(addr, this.addAddressToMap.createDelegate(this));\r
 195         \r
 196     },\r
 197     addAddressToMap : function(response) {\r
 198         \r
 199         if (!response || response.Status.code != 200) {\r
 200             Ext.MessageBox.alert('Error', 'Code '+response.Status.code+' Error Returned');\r
 201         }else{\r
 202             place = response.Placemark[0];\r
 203             addressinfo = place.AddressDetails;\r
 204             accuracy = addressinfo.Accuracy;\r
 205             if (accuracy === 0) {\r
 206                 Ext.MessageBox.alert('Unable to Locate Address', 'Unable to Locate the Address you provided');\r
 207             }else{\r
 208                 if (accuracy < 7) {\r
 209                     Ext.MessageBox.alert('Address Accuracy', 'The address provided has a low accuracy.<br><br>Level '+accuracy+' Accuracy (8 = Exact Match, 1 = Vague Match)');\r
 210                 }else{\r
 211                     point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);\r
 212                     if (typeof this.setCenter.marker === 'object' && typeof point === 'object'){\r
 213                         this.addMarker(point,this.setCenter.marker,this.setCenter.marker.clear,true, this.setCenter.listeners);\r
 214                     }\r
 215                 }\r
 216             }\r
 217         }\r
 218         \r
 219     }\r
 220  \r
 221 });\r
 222 \r
 223 Ext.reg('gmappanel',Ext.ux.GMapPanel);