examples/ux/GMapPanel.js

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