examples/ux/GMapPanel.js

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