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