git.roojs.org Git - roojs1/blob - Roo/bootstrap/LocationPicker.js

   1 /*
   2  * - LGPL
   3  *
   4  * Location Picker
   5  *
   6  */
   7
   8 /**
   9  * @class Roo.bootstrap.LocationPicker
  10  * @extends Roo.bootstrap.Component
  11  * Bootstrap LocationPicker class
  12  * @cfg {Number} latitude Position when init default 0
  13  * @cfg {Number} longitude Position when init default 0
  14  * @cfg {Number} zoom default 15
  15  * @cfg {String} mapTypeId default google.maps.MapTypeId.ROADMAP
  16  * @cfg {Boolean} mapTypeControl default false
  17  * @cfg {Boolean} disableDoubleClickZoom default false
  18  * @cfg {Boolean} scrollwheel default true
  19  * @cfg {Boolean} streetViewControl default false
  20  * @cfg {Number} radius default 0
  21  * @cfg {String} locationName
  22  * @cfg {Boolean} draggable default true
  23  * @cfg {Boolean} enableAutocomplete default false
  24  * @cfg {Boolean} enableReverseGeocode default true
  25  * @cfg {String} markerTitle
  26  *
  27  * @constructor
  28  * Create a new LocationPicker
  29  * @param {Object} config The config object
  30  */
  31
  32
  33 Roo.bootstrap.LocationPicker = function(config){
  34
  35     Roo.bootstrap.LocationPicker.superclass.constructor.call(this, config);
  36
  37     this.addEvents({
  38         /**
  39          * @event initial
  40          * Fires when the picker initialized.
  41          * @param {Roo.bootstrap.LocationPicker} this
  42          * @param {Google Location} location
  43          */
  44         initial : true,
  45         /**
  46          * @event positionchanged
  47          * Fires when the picker position changed.
  48          * @param {Roo.bootstrap.LocationPicker} this
  49          * @param {Google Location} location
  50          */
  51         positionchanged : true,
  52         /**
  53          * @event resize
  54          * Fires when the map resize.
  55          * @param {Roo.bootstrap.LocationPicker} this
  56          */
  57         resize : true,
  58         /**
  59          * @event show
  60          * Fires when the map show.
  61          * @param {Roo.bootstrap.LocationPicker} this
  62          */
  63         show : true,
  64         /**
  65          * @event hide
  66          * Fires when the map hide.
  67          * @param {Roo.bootstrap.LocationPicker} this
  68          */
  69         hide : true,
  70         /**
  71          * @event mapClick
  72          * Fires when click the map.
  73          * @param {Roo.bootstrap.LocationPicker} this
  74          * @param {Map event} e
  75          */
  76         mapClick : true,
  77         /**
  78          * @event mapRightClick
  79          * Fires when right click the map.
  80          * @param {Roo.bootstrap.LocationPicker} this
  81          * @param {Map event} e
  82          */
  83         mapRightClick : true,
  84         /**
  85          * @event markerClick
  86          * Fires when click the marker.
  87          * @param {Roo.bootstrap.LocationPicker} this
  88          * @param {Map event} e
  89          */
  90         markerClick : true,
  91         /**
  92          * @event markerRightClick
  93          * Fires when right click the marker.
  94          * @param {Roo.bootstrap.LocationPicker} this
  95          * @param {Map event} e
  96          */
  97         markerRightClick : true,
  98         /**
  99          * @event OverlayViewDraw
 100          * Fires when OverlayView Draw
 101          * @param {Roo.bootstrap.LocationPicker} this
 102          */
 103         OverlayViewDraw : true,
 104         /**
 105          * @event OverlayViewOnAdd
 106          * Fires when OverlayView Draw
 107          * @param {Roo.bootstrap.LocationPicker} this
 108          */
 109         OverlayViewOnAdd : true,
 110         /**
 111          * @event OverlayViewOnRemove
 112          * Fires when OverlayView Draw
 113          * @param {Roo.bootstrap.LocationPicker} this
 114          */
 115         OverlayViewOnRemove : true,
 116         /**
 117          * @event OverlayViewShow
 118          * Fires when OverlayView Draw
 119          * @param {Roo.bootstrap.LocationPicker} this
 120          * @param {Pixel} cpx
 121          */
 122         OverlayViewShow : true,
 123         /**
 124          * @event OverlayViewHide
 125          * Fires when OverlayView Draw
 126          * @param {Roo.bootstrap.LocationPicker} this
 127          */
 128         OverlayViewHide : true,
 129         /**
 130          * @event loadexception
 131          * Fires when load google lib failed.
 132          * @param {Roo.bootstrap.LocationPicker} this
 133          */
 134         loadexception : true
 135     });
 136
 137 };
 138
 139 Roo.extend(Roo.bootstrap.LocationPicker, Roo.bootstrap.Component,  {
 140
 141     gMapContext: false,
 142
 143     latitude: 0,
 144     longitude: 0,
 145     zoom: 15,
 146     mapTypeId: false,
 147     mapTypeControl: false,
 148     disableDoubleClickZoom: false,
 149     scrollwheel: true,
 150     streetViewControl: false,
 151     radius: 0,
 152     locationName: '',
 153     draggable: true,
 154     enableAutocomplete: false,
 155     enableReverseGeocode: true,
 156     markerTitle: '',
 157
 158     getAutoCreate: function()
 159     {
 160
 161         var cfg = {
 162             tag: 'div',
 163             cls: 'roo-location-picker'
 164         };
 165
 166         return cfg
 167     },
 168
 169     initEvents: function(ct, position)
 170     {
 171         if(!this.el.getWidth() || this.isApplied()){
 172             return;
 173         }
 174
 175         this.el.setVisibilityMode(Roo.Element.DISPLAY);
 176
 177         this.initial();
 178     },
 179
 180     initial: function()
 181     {
 182         if(typeof(google) == 'undefined' || typeof(google.maps) == 'undefined'){
 183             this.fireEvent('loadexception', this);
 184             return;
 185         }
 186
 187         if(!this.mapTypeId){
 188             this.mapTypeId = google.maps.MapTypeId.ROADMAP;
 189         }
 190
 191         this.gMapContext = this.GMapContext();
 192
 193         this.initOverlayView();
 194
 195         this.OverlayView = new Roo.bootstrap.LocationPicker.OverlayView(this.gMapContext.map);
 196
 197         var _this = this;
 198
 199         google.maps.event.addListener(this.gMapContext.marker, "dragend", function(event) {
 200             _this.setPosition(_this.gMapContext.marker.position);
 201         });
 202
 203         google.maps.event.addListener(this.gMapContext.map, 'click', function(event){
 204             _this.fireEvent('mapClick', this, event);
 205
 206         });
 207
 208         google.maps.event.addListener(this.gMapContext.map, 'rightclick', function(event){
 209             _this.fireEvent('mapRightClick', this, event);
 210
 211         });
 212
 213         google.maps.event.addListener(this.gMapContext.marker, 'click', function(event){
 214             _this.fireEvent('markerClick', this, event);
 215
 216         });
 217
 218         google.maps.event.addListener(this.gMapContext.marker, 'rightclick', function(event){
 219             _this.fireEvent('markerRightClick', this, event);
 220
 221         });
 222
 223         this.setPosition(this.gMapContext.location);
 224
 225         this.fireEvent('initial', this, this.gMapContext.location);
 226     },
 227
 228     initOverlayView: function()
 229     {
 230         var _this = this;
 231
 232         Roo.bootstrap.LocationPicker.OverlayView.prototype = Roo.apply(new google.maps.OverlayView(), {
 233
 234             draw: function()
 235             {
 236                 _this.fireEvent('OverlayViewDraw', _this);
 237             },
 238
 239             onAdd: function()
 240             {
 241                 _this.fireEvent('OverlayViewOnAdd', _this);
 242             },
 243
 244             onRemove: function()
 245             {
 246                 _this.fireEvent('OverlayViewOnRemove', _this);
 247             },
 248
 249             show: function(cpx)
 250             {
 251                 _this.fireEvent('OverlayViewShow', _this, cpx);
 252             },
 253
 254             hide: function()
 255             {
 256                 _this.fireEvent('OverlayViewHide', _this);
 257             }
 258
 259         });
 260     },
 261
 262     fromLatLngToContainerPixel: function(event)
 263     {
 264         return this.OverlayView.getProjection().fromLatLngToContainerPixel(event.latLng);
 265     },
 266
 267     isApplied: function()
 268     {
 269         return this.getGmapContext() == false ? false : true;
 270     },
 271
 272     getGmapContext: function()
 273     {
 274         return (typeof(this.gMapContext) == 'undefined') ? false : this.gMapContext;
 275     },
 276
 277     GMapContext: function()
 278     {
 279         var position = new google.maps.LatLng(this.latitude, this.longitude);
 280
 281         var _map = new google.maps.Map(this.el.dom, {
 282             center: position,
 283             zoom: this.zoom,
 284             mapTypeId: this.mapTypeId,
 285             mapTypeControl: this.mapTypeControl,
 286             disableDoubleClickZoom: this.disableDoubleClickZoom,
 287             scrollwheel: this.scrollwheel,
 288             streetViewControl: this.streetViewControl,
 289             locationName: this.locationName,
 290             draggable: this.draggable,
 291             enableAutocomplete: this.enableAutocomplete,
 292             enableReverseGeocode: this.enableReverseGeocode
 293         });
 294
 295         var _marker = new google.maps.Marker({
 296             position: position,
 297             map: _map,
 298             title: this.markerTitle,
 299             draggable: this.draggable
 300         });
 301
 302         return {
 303             map: _map,
 304             marker: _marker,
 305             circle: null,
 306             location: position,
 307             radius: this.radius,
 308             locationName: this.locationName,
 309             addressComponents: {
 310                 formatted_address: null,
 311                 addressLine1: null,
 312                 addressLine2: null,
 313                 streetName: null,
 314                 streetNumber: null,
 315                 city: null,
 316                 district: null,
 317                 state: null,
 318                 stateOrProvince: null
 319             },
 320             settings: this,
 321             domContainer: this.el.dom,
 322             geodecoder: new google.maps.Geocoder()
 323         };
 324     },
 325
 326     drawCircle: function(center, radius, options)
 327     {
 328         if (this.gMapContext.circle != null) {
 329             this.gMapContext.circle.setMap(null);
 330         }
 331         if (radius > 0) {
 332             radius *= 1;
 333             options = Roo.apply({}, options, {
 334                 strokeColor: "#0000FF",
 335                 strokeOpacity: .35,
 336                 strokeWeight: 2,
 337                 fillColor: "#0000FF",
 338                 fillOpacity: .2
 339             });
 340
 341             options.map = this.gMapContext.map;
 342             options.radius = radius;
 343             options.center = center;
 344             this.gMapContext.circle = new google.maps.Circle(options);
 345             return this.gMapContext.circle;
 346         }
 347
 348         return null;
 349     },
 350
 351     setPosition: function(location)
 352     {
 353         this.gMapContext.location = location;
 354         this.gMapContext.marker.setPosition(location);
 355         this.gMapContext.map.panTo(location);
 356         this.drawCircle(location, this.gMapContext.radius, {});
 357
 358         var _this = this;
 359
 360         if (this.gMapContext.settings.enableReverseGeocode) {
 361             this.gMapContext.geodecoder.geocode({
 362                 latLng: this.gMapContext.location
 363             }, function(results, status) {
 364
 365                 if (status == google.maps.GeocoderStatus.OK && results.length > 0) {
 366                     _this.gMapContext.locationName = results[0].formatted_address;
 367                     _this.gMapContext.addressComponents = _this.address_component_from_google_geocode(results[0].address_components);
 368
 369                     _this.fireEvent('positionchanged', this, location);
 370                 }
 371             });
 372
 373             return;
 374         }
 375
 376         this.fireEvent('positionchanged', this, location);
 377     },
 378
 379     resize: function()
 380     {
 381         google.maps.event.trigger(this.gMapContext.map, "resize");
 382
 383         this.gMapContext.map.setCenter(this.gMapContext.marker.position);
 384
 385         this.fireEvent('resize', this);
 386     },
 387
 388     setPositionByLatLng: function(latitude, longitude)
 389     {
 390         this.setPosition(new google.maps.LatLng(latitude, longitude));
 391     },
 392
 393     getCurrentPosition: function()
 394     {
 395         return {
 396             latitude: this.gMapContext.location.lat(),
 397             longitude: this.gMapContext.location.lng()
 398         };
 399     },
 400
 401     getAddressName: function()
 402     {
 403         return this.gMapContext.locationName;
 404     },
 405
 406     getAddressComponents: function()
 407     {
 408         return this.gMapContext.addressComponents;
 409     },
 410
 411     address_component_from_google_geocode: function(address_components)
 412     {
 413         var result = {};
 414
 415         for (var i = 0; i < address_components.length; i++) {
 416             var component = address_components[i];
 417             if (component.types.indexOf("postal_code") >= 0) {
 418                 result.postalCode = component.short_name;
 419             } else if (component.types.indexOf("street_number") >= 0) {
 420                 result.streetNumber = component.short_name;
 421             } else if (component.types.indexOf("route") >= 0) {
 422                 result.streetName = component.short_name;
 423             } else if (component.types.indexOf("neighborhood") >= 0) {
 424                 result.city = component.short_name;
 425             } else if (component.types.indexOf("locality") >= 0) {
 426                 result.city = component.short_name;
 427             } else if (component.types.indexOf("sublocality") >= 0) {
 428                 result.district = component.short_name;
 429             } else if (component.types.indexOf("administrative_area_level_1") >= 0) {
 430                 result.stateOrProvince = component.short_name;
 431             } else if (component.types.indexOf("country") >= 0) {
 432                 result.country = component.short_name;
 433             }
 434         }
 435
 436         result.addressLine1 = [ result.streetNumber, result.streetName ].join(" ").trim();
 437         result.addressLine2 = "";
 438         return result;
 439     },
 440
 441     setZoomLevel: function(zoom)
 442     {
 443         this.gMapContext.map.setZoom(zoom);
 444     },
 445
 446     show: function()
 447     {
 448         if(!this.el){
 449             return;
 450         }
 451
 452         this.el.show();
 453
 454         this.resize();
 455
 456         this.fireEvent('show', this);
 457     },
 458
 459     hide: function()
 460     {
 461         if(!this.el){
 462             return;
 463         }
 464
 465         this.el.hide();
 466
 467         this.fireEvent('hide', this);
 468     }
 469
 470 });
 471
 472 Roo.apply(Roo.bootstrap.LocationPicker, {
 473
 474     OverlayView : function(map, options)
 475     {
 476         options = options || {};
 477
 478         this.setMap(map);
 479     }
 480
 481
 482 });