examples/ux/GMapPanel.js

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