[Summary view] [Print] [Text view]

   1  function mp_field_type_geotag(settings)
   2  {
   3      this.map     = null;
   4  
   5      this.settings     = settings;
   6      this.prefix     = 'mp_' + this.settings.form + '_' + this.settings.field;
   7  
   8      this.center_lat = jQuery('#' + this.prefix + '_center_lat');
   9      this.center_lng = jQuery('#' + this.prefix + '_center_lng');
  10          
  11      this.zoomlevel  = jQuery('#' + this.prefix + '_zoomlevel');
  12      this.maptype      = jQuery('#' + this.prefix + '_maptype');
  13  
  14      this.container     = document.getElementById(this.prefix + '_map');
  15  
  16      this.lat     = jQuery('#' + this.prefix + '_lat,#' + this.prefix + '_lat_d');
  17      this.lng     = jQuery('#' + this.prefix + '_lng,#' + this.prefix + '_lng_d');
  18      this.rgeocode     = jQuery('#' + this.prefix + '_geocode');
  19          
  20      this.bubble = false;
  21  
  22  
  23      this.init = function() {
  24  
  25          // Initialize communication with the platform
  26          var ptOptions = {
  27              'app_id'  : mp_mapL10n.app_id,
  28              'app_code': mp_mapL10n.app_code
  29          }
  30          if (location.protocol == 'https:') ptOptions.useHTTPS = true;
  31  
  32          this.platform = new H.service.Platform(ptOptions);
  33  
  34          // Obtain the default map types from the platform object
  35          this.Layers = this.platform.createDefaultLayers();
  36  
  37          this.center = this.getLatLng(this.setLoLa(this.settings.center_lng, this.settings.center_lat));
  38  
  39          var myOptions = {
  40              center:     this.center,
  41              zoom:         parseInt(this.zoomlevel.val()),
  42          };
  43  
  44          // Initialize a map
  45          this.map = new H.Map(    this.container,
  46                      this.get_maptype(this.maptype.val()),
  47                      myOptions
  48          );
  49  
  50          // Make the map interactive
  51          // MapEvents enables the event system
  52          // Behavior implements default interactions for pan/zoom
  53          this.behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map));
  54  
  55          // Create the UI (controls)
  56          this.ui = new H.ui.UI(this.map);
  57  
  58          this.setMarker();
  59          this.setEvents();
  60                 this.setControls();
  61      };
  62  
  63      this.sanitize = function(x) {
  64          x = parseFloat(x);
  65          return x.toFixed(8);
  66      };
  67  
  68      this.setLoLa = function(lng, lat) {
  69          return { lo: this.sanitize(lng), la: this.sanitize(lat) };
  70      };
  71  
  72      this.getLoLa = function(LatLng) {
  73          return { lo: this.sanitize(LatLng.lng), la: this.sanitize(LatLng.lat) };
  74      };
  75  
  76      this.getLatLng = function(LoLa) {
  77          return { lat: LoLa.la, lng: LoLa.lo };
  78      };
  79  
  80      this.setCenter = function() {
  81          var LoLa = this.getLoLa(this.marker.getGeometry());
  82  
  83          this.map.setCenter(this.getLatLng(LoLa));
  84          this.center_lat.val(LoLa.la);
  85          this.center_lng.val(LoLa.lo);
  86      };
  87  
  88      this.setMarker = function() {
  89  
  90          // Create a group that can hold map objects:
  91          this.group = new H.map.Group();
  92  
  93          // Add the group to the map object:
  94          this.map.addObject(this.group);
  95  
  96          this.marker = new H.map.Marker(this.center);
  97          this.marker.draggable = true;
  98  
  99          this.group.addObject(this.marker);
 100      };
 101  
 102      this.moveMarker = function(LoLa) {
 103                  this.hideMarkerInfo();
 104          this.marker.setGeometry(this.getLatLng(LoLa));
 105          this.lat.val(LoLa.la);
 106          this.lng.val(LoLa.lo);
 107  
 108          this.setCenter();
 109      };
 110  
 111      this.showMarkerInfo = function(LatLng, data) {
 112          data = '<table><tr><td style="text-align:center;padding-left:5px;min-width: 120px;">'+data+'</td></tr></table>';
 113          this.bubble =  new H.ui.InfoBubble(LatLng, {content: data});
 114          this.ui.addBubble(this.bubble);
 115      };
 116  
 117      this.hideMarkerInfo = function() {
 118          if (this.bubble) this.ui.removeBubble(this.bubble);
 119      };
 120  
 121      this.get_maptype = function(maptype) {
 122                  var s = v = null;
 123          switch(maptype)
 124          {
 125              case 'SATELLITE': s = this.Layers.satellite.xbase; break;
 126              case 'HYBRID'    : s = this.Layers.satellite.map;   break;
 127              case 'TERRAIN'    : s = this.Layers.terrain.map;     break;
 128              default         : s = this.Layers.normal.map;       break;
 129          }
 130                  return s;
 131      };
 132  
 133      this.setEvents = function() {
 134          // map
 135                  this.map.addEventListener('dragend', function(e){
 136              var LoLa = _this.getLoLa(_this.map.getCenter());
 137              _this.center_lat.val(LoLa.la);
 138              _this.center_lng.val(LoLa.lo);
 139                  }); 
 140  
 141                   this.map.addEventListener('mapviewchangeend', function(){
 142              _this.zoomlevel.val(parseInt(_this.map.getZoom()));
 143                  });
 144  
 145                   this.map.addEventListener('baselayerchange', function(){
 146              switch(_this.map.getBaseLayer())
 147              {
 148                  case _this.Layers.satellite.xbase: s = 'SATELLITE'; break;
 149                  case _this.Layers.satellite.map     : s = 'HYBRID';    break;
 150                  case _this.Layers.terrain.map     : s = 'TERRAIN';   break;
 151                  default                  : s = 'ROADMAP';   break;
 152              }
 153              _this.maptype.val(s);
 154                  });
 155  
 156          // marker
 157          // disable the default draggability of the underlying map
 158          // when starting to drag a marker object:
 159          this.map.addEventListener('dragstart', function(ev) {
 160              var target = ev.target;
 161              if (target instanceof H.map.Marker) {
 162                  _this.behavior.disable();
 163                  _this.hideMarkerInfo();
 164              }
 165          }, false);
 166  
 167          // Listen to the drag event and move the position of the marker
 168          // as necessary
 169          this.map.addEventListener('drag', function(ev) {
 170              var target = ev.target,
 171              pointer = ev.currentPointer;
 172              if (target instanceof mapsjs.map.Marker) { target.setPosition(_this.map.screenToGeo(pointer.viewportX, pointer.viewportY));
 173                  var LoLa = _this.getLoLa(target.getPosition());
 174                  _this.lat.val(LoLa.la);
 175                  _this.lng.val(LoLa.lo);
 176              }
 177          }, false);
 178  
 179          // re-enable the default draggability of the underlying map
 180          // when dragging has completed
 181          this.map.addEventListener('dragend', function(ev) {
 182              var target = ev.target;
 183              if (target instanceof mapsjs.map.Marker) { _this.behavior.enable();
 184                  var LoLa = _this.getLoLa(target.getPosition());
 185                  _this.lat.val(LoLa.la);
 186                  _this.lng.val(LoLa.lo);
 187              }
 188          }, false);
 189  
 190          // geocoder
 191          this.geocoder = _this.platform.getGeocodingService();
 192  
 193          jQuery('#' + this.prefix + '_geocode_button').click( function() {
 194              var address = jQuery('#' + _this.prefix + '_geocode').val();
 195  
 196              // Create the parameters for the geocoding request:
 197              var geocodingParams = { searchText: address, maxresults: 1 };
 198  
 199              // Call the geocode method with the geocoding parameters,
 200              // the callback and an error callback function (called if a
 201              // communication error occurs):
 202              _this.geocoder.geocode(geocodingParams, _this.geocoding, function(e) {
 203                  alert("(Geocoder failed)");
 204              });
 205              return false;
 206          });
 207      };
 208  
 209      this.setControls = function() {
 210  
 211          if ( 0 == this.settings.changemap+this.settings.center+this.settings.rgeocode ) return;
 212  
 213          var container = new H.ui.Control();
 214                  container.addClass('here-ctrl here-ctrl-group');
 215  
 216          if ( 1 == this.settings.changemap ) {
 217              var button = new H.ui.base.Element('button', 'here-ctrl-icon map_control');
 218                container.addChild(button);
 219          }
 220  
 221  
 222          if ( 1 == this.settings.center ) {
 223              var button = new H.ui.base.Element('button', 'here-ctrl-icon map_center');
 224                container.addChild(button);
 225          }
 226  
 227          if ( 1 == this.settings.rgeocode ) {
 228              var button = new H.ui.base.Element('button', 'here-ctrl-icon map_geocode');
 229                container.addChild(button);
 230          }
 231  
 232          container.setAlignment('top-right');
 233  
 234          this.ui.addControl('mailpress', container );
 235          this.ui.addControl('ScaleBar', new H.ui.ScaleBar() );
 236  
 237          if ( 1 == this.settings.changemap ) {
 238              jQuery('#' + _this.prefix + '_map .map_control').attr({alt:mp_mapL10n.changemap,title:mp_mapL10n.changemap}).click(function(){
 239                         switch (_this.maptype.val())
 240                         {
 241                             case 'ROADMAP' : _this.maptype.val('SATELLITE'); break;
 242                             case 'SATELLITE': _this.maptype.val('HYBRID');  break;
 243                             case 'HYBRID' :  _this.maptype.val('TERRAIN');    break;
 244                             default:      _this.maptype.val('ROADMAP');    break;
 245                              }
 246                  _this.map.setBaseLayer(_this.get_maptype(_this.maptype.val()));
 247                  return false;
 248              });
 249          }
 250  
 251          if ( 1 == this.settings.center ) {
 252              jQuery('#' + _this.prefix + '_map .map_center').attr({alt:mp_mapL10n.center,title:mp_mapL10n.center}).click(function(){
 253                  _this.setCenter();
 254                  return false;
 255              });
 256          }
 257  
 258          if ( 1 == this.settings.rgeocode ) {
 259              jQuery('#' + _this.prefix + '_map .map_geocode').attr({alt:mp_mapL10n.rgeocode,title:mp_mapL10n.rgeocode}).click(function(){
 260  
 261                  // Create the parameters for the reverse geocoding request:
 262                  var reverseGeocodingParameters = { prox: _this.lat.val()+','+_this.lng.val(), maxresults: 1, mode: 'retrieveAddresses' };
 263  
 264                  // Call the geocode method with the geocoding parameters,
 265                  // the callback and an error callback function (called if a
 266                  // communication error occurs):
 267                  _this.geocoder.reverseGeocode(reverseGeocodingParameters, _this.rgeocoding, function(e) { 
 268                      alert("No result found");
 269                  });
 270                  return false;
 271              });
 272  
 273          }
 274  
 275      };
 276  
 277      this.geocoding = function(data) {
 278              if (typeof(data.Response.View[0].Result[0].Location) == null) 
 279              {
 280                  alert("Geocoder failed");
 281                  return;
 282              }
 283              r = data.Response.View[0].Result[0].Location;
 284              var a   =  ( typeof(r.Address.Label ) != "undefined")              ? r.Address.Label             : '';
 285              var lat =  ( typeof(r.DisplayPosition.Latitude  ) != "undefined" ) ? r.DisplayPosition.Latitude  : 0;
 286              var lng =  ( typeof(r.DisplayPosition.Longitude ) != "undefined")  ? r.DisplayPosition.Longitude : 0;
 287      
 288              _this.moveMarker(_this.setLoLa(lng, lat));
 289      };
 290  
 291      this.rgeocoding = function(data) {
 292              if (typeof(data.Response.View[0].Result[0].Location) == null) 
 293              {
 294                  alert("No result found!");
 295                  return;
 296              }
 297              r = data.Response.View[0].Result[0].Location;
 298              var a   =  ( typeof(r.Address.Label ) != "undefined")              ? r.Address.Label             : '?';
 299              _this.setCenter();
 300              _this.showMarkerInfo(_this.getLatLng(_this.setLoLa(_this.lng.val(), _this.lat.val())), a)
 301      };
 302  
 303      var _this = this;
 304  
 305      this.init();
 306  }