[ Index ]

MailPress 7.2

[ Index ]     [ Classes ]     [ Functions ]     [ Variables ]     [ Constants ]     [ Statistics ]    

title

Body

[close]

/mp-includes/class/options/map/ -> mp_map_m_form_geotag.js (source)

   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      this.suffix      = '_' + this.settings.form + '_' + this.settings.field;
   8  
   9      this.center_lng = jQuery('#' + this.prefix + '_center_lng');
  10      this.center_lat = jQuery('#' + this.prefix + '_center_lat');
  11  
  12      this.zoomlevel  = jQuery('#' + this.prefix + '_zoomlevel');
  13      this.maptype      = jQuery('#' + this.prefix + '_maptype');
  14  
  15      this.container     = this.prefix + '_map';
  16  
  17      this.lng     = jQuery('#' + this.prefix + '_lng,#' + this.prefix + '_lng_d');
  18      this.lat     = jQuery('#' + this.prefix + '_lat,#' + this.prefix + '_lat_d');
  19      this.rgeocode     = jQuery('#' + this.prefix + '_geocode');
  20  
  21      this.popup = false;
  22      mapboxgl.accessToken = mp_mapL10n.mapboxtoken;
  23  
  24  
  25      this.init = function() {
  26  
  27          this.center = this.getLatLng(this.setLoLa(this.settings.center_lng, this.settings.center_lat));
  28  
  29          var myOptions = {
  30              container:     this.container,
  31  
  32              center:     this.center,
  33              zoom:         parseInt(this.zoomlevel.val()),
  34              style:         this.get_maptype(this.maptype.val()),
  35  
  36              dragRotate:    false
  37          };
  38  
  39          this.map = new mapboxgl.Map(myOptions);
  40  
  41          this.map.on('load', function(){
  42              _this.setMarker();
  43              _this.setEvents();
  44                     _this.setControls();
  45                  });
  46      };
  47  
  48      this.sanitize = function(x) {
  49          x = parseFloat(x);
  50          return x.toFixed(8);
  51      };
  52  
  53      this.setLoLa = function(lng, lat) {
  54          return { lo: this.sanitize(lng), la: this.sanitize(lat) };
  55      };
  56  
  57      this.getLoLa = function(LatLng) {
  58          return (Array.isArray(LatLng))
  59              ? { lo: this.sanitize(LatLng[0]),  la: this.sanitize(LatLng[1])  }
  60              : { lo: this.sanitize(LatLng.lng), la: this.sanitize(LatLng.lat) };
  61      };
  62  
  63      this.getLatLng = function(LoLa) {
  64          return { lon: LoLa.lo, lat: LoLa.la };
  65      };
  66  
  67      this.setCenter = function() {
  68          var LoLa = this.getLoLa(this.marker.getLngLat());
  69  
  70          this.map.setCenter(this.getLatLng(LoLa));
  71          this.center_lat.val(LoLa.la);
  72          this.center_lng.val(LoLa.lo);
  73      };
  74  
  75      this.setMarker = function() {
  76  
  77          this.marker = new mapboxgl.Marker({draggable: true}).setLngLat(this.center).addTo(this.map);
  78      };
  79  
  80      this.moveMarker = function(LoLa) {
  81                  this.hideMarkerInfo();
  82          this.marker.setLngLat(this.getLatLng(LoLa));
  83          this.lat.val(LoLa.la);
  84          this.lng.val(LoLa.lo);
  85  
  86          this.setCenter();
  87      };
  88  
  89      this.showMarkerInfo = function(LatLng, data) {
  90          this.popup = new mapboxgl.Popup({offset: 25}).setHTML(data);
  91          this.popup.setLngLat(this.marker.getLngLat()).addTo(this.map);
  92      };
  93  
  94      this.hideMarkerInfo = function() {
  95          if (this.popup) this.popup.remove();
  96      };
  97  
  98      this.get_maptype = function(maptype) {
  99                  var s = v = null;
 100          switch(maptype)
 101          {
 102              case 'SATELLITE': s = 'satellite'; v = '9';    break;
 103              case 'HYBRID'    : s = 'satellite-streets'; v = '11'; break;
 104              case 'TERRAIN'    : s = 'outdoors'; v = '11';    break;
 105              default         : s = 'streets'; v = '11';    break;
 106          }
 107                  return 'mapbox://styles/mapbox/' + s + '-v' + v;
 108      };
 109  
 110      this.setEvents = function() {
 111          // map
 112                  this.map.on('dragend', function(){
 113              var LoLa = _this.getLoLa(_this.map.getCenter());
 114              _this.center_lat.val(LoLa.la);
 115              _this.center_lng.val(LoLa.lo);
 116                  }); 
 117  
 118                  this.map.on('zoom', function(){
 119              _this.zoomlevel.val(parseInt(_this.map.getZoom()));
 120                  });
 121  
 122          // marker
 123                  this.marker.on('drag', function(){
 124              _this.hideMarkerInfo();
 125              var LoLa = _this.getLoLa(_this.marker.getLngLat());
 126              _this.lat.val(LoLa.la);
 127              _this.lng.val(LoLa.lo);
 128          });
 129  
 130                  this.marker.on('dragend', function(){
 131              var LoLa = _this.getLoLa(_this.marker.getLngLat());
 132              _this.lat.val(LoLa.la);
 133              _this.lng.val(LoLa.lo);
 134          });
 135  
 136          // geocoder
 137          this.geocoder = new MapboxGeocoder({accessToken: mapboxgl.accessToken});
 138          this.geocoder.options.flyTo = false;
 139          this.geocoder.options.limit = 1;
 140          this.map.addControl(this.geocoder);
 141          jQuery('.mapboxgl-ctrl-geocoder').hide();
 142  
 143  
 144          jQuery('#' + this.prefix + '_geocode_button').click( function() {
 145              _this.geocoder.options.reverseGeocode = false;
 146              var address = jQuery('#' + _this.prefix + '_geocode').val();
 147  
 148              _this.geocoder.query(address);
 149  
 150              _this.geocoder.on( 'result', _this.geocoding);
 151              _this.geocoder.on( 'error' , _this.geocoding_ko);
 152  
 153          });
 154      };
 155      this.geocoding = function(e) {
 156          var LoLa = _this.getLoLa(e.result.center);
 157          _this.moveMarker(LoLa);
 158          _this.geocoder.off( 'result', _this.geocoding);
 159          _this.geocoder.off( 'error' , _this.geocoding_ko);
 160      };
 161  
 162      this.geocoding_ko = function(e) {
 163          alert("Geocoder failed");
 164          _this.geocoder.off( 'result', _this.geocoding);
 165          _this.geocoder.off( 'error' , _this.geocoding_ko);
 166      };
 167                  
 168      this.setControls = function() {
 169  
 170          if ( 0 == this.settings.changemap+this.settings.center+this.settings.rgeocode ) return;
 171  
 172          this.map.mailpress = { changemap: this.settings.changemap, center: this.settings.center, rgeocode: this.settings.rgeocode, suffix: this.suffix };
 173                 this.ctrls = new MP_Mapbox_Controls();
 174                 this.map.addControl( this.ctrls );
 175  
 176          if ( 1 == this.settings.changemap ) {
 177                     jQuery('#map_control'+this.suffix).click(function(){
 178                         switch (_this.maptype.val())
 179                         {
 180                             case 'ROADMAP' : _this.maptype.val('SATELLITE'); break;
 181                             case 'SATELLITE' : _this.maptype.val('HYBRID');  break;
 182                             case 'HYBRID' : _this.maptype.val('TERRAIN');    break;
 183                             default:     _this.maptype.val('ROADMAP');    break;
 184                              }
 185                              var s = _this.get_maptype(_this.maptype.val());
 186                              _this.map.setStyle(s);
 187                  return false;
 188                     });
 189          }
 190  
 191          if ( 1 == this.settings.center ) {
 192                     jQuery('#map_center'+this.suffix).click(function(){
 193                         _this.setCenter();
 194                  return false;
 195                });
 196          }
 197  
 198          if ( 1 == this.settings.rgeocode ) {
 199              jQuery('#map_geocode'+this.suffix).click(function() {
 200                  _this.geocoder.options.reverseGeocode = true;
 201                  var location = _this.lat.val() + ', ' + _this.lng.val();
 202  
 203                  _this.geocoder.query(location);
 204  
 205                  _this.geocoder.on( 'result', _this.Rgeocoding);
 206                  _this.geocoder.on( 'error' , _this.Rgeocoding_ko);
 207  
 208                  return false;
 209              });
 210          }
 211      };
 212  
 213      this.Rgeocoding = function(e) {
 214          if (!e.result) return;
 215          var a = e.result.place_name;
 216          _this.setCenter();
 217          _this.showMarkerInfo(e.result.center, a);
 218          _this.geocoder.off( 'result', _this.Rgeocoding);
 219          _this.geocoder.off( 'error' , _this.Rgeocoding_ko);
 220      };
 221  
 222      this.Rgeocoding_ko = function(e) {
 223          alert("No result found");
 224          _this.geocoder.off( 'result', _this.Rgeocoding);
 225          _this.geocoder.off( 'error' , _this.Rgeocoding_ko);
 226      };
 227  
 228      var _this = this;
 229  
 230      this.init();
 231  }
 232  
 233  class MP_Mapbox_Controls {
 234      onAdd(map) {
 235          this.map = map;
 236          this.settings = this.map.mailpress;
 237  
 238          this.container = document.createElement('div');
 239          this.container.setAttribute('class', 'mapboxgl-ctrl mapboxgl-ctrl-group');
 240  
 241          if ( 1 == this.settings.changemap ) {
 242              var button = document.createElement('button');
 243               button.setAttribute('type', 'button');
 244              button.setAttribute('id',   'map_control'+this.settings.suffix);
 245              button.setAttribute('class','mapboxgl-ctrl-icon map_control');
 246              button.setAttribute('alt',   mp_mapL10n.changemap);
 247              button.setAttribute('title', mp_mapL10n.changemap);
 248               this.container.appendChild(button);
 249          }
 250  
 251          if ( 1 == this.settings.center ) {
 252                  var button = document.createElement('button');
 253              button.setAttribute('type', 'button');
 254              button.setAttribute('id',   'map_center'+this.settings.suffix);
 255              button.setAttribute('class','mapboxgl-ctrl-icon map_center');
 256              button.setAttribute('alt',   mp_mapL10n.center);
 257              button.setAttribute('title', mp_mapL10n.center);
 258               this.container.appendChild(button);
 259          }
 260  
 261          if ( 1 == this.settings.rgeocode ) {
 262              button = document.createElement('button');
 263              button.setAttribute('type', 'button');
 264              button.setAttribute('id',   'map_geocode'+this.settings.suffix);
 265              button.setAttribute('class','mapboxgl-ctrl-icon map_geocode');
 266              button.setAttribute('alt',   mp_mapL10n.rgeocode);
 267              button.setAttribute('title', mp_mapL10n.rgeocode);
 268               this.container.appendChild(button);
 269          }
 270  
 271          return this.container;
 272      }
 273      onRemove() {
 274          this.container.parentNode.removeChild(this.container);
 275          this.map = undefined;
 276      }
 277  }


Generated: Tue May 19 15:55:14 2020 Cross-referenced by PHPXref 0.7.1