[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      this.suffix      = '_' + this.settings.form + '_' + this.settings.field;
   8  
   9      this.center_lat    = jQuery('#' + this.prefix + '_center_lat');
  10      this.center_lng    = jQuery('#' + this.prefix + '_center_lng');
  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.lat     = jQuery('#' + this.prefix + '_lat,#' + this.prefix + '_lat_d');
  18      this.lng    = jQuery('#' + this.prefix + '_lng,#' + this.prefix + '_lng_d');
  19      this.rgeocode     = jQuery('#' + this.prefix + '_geocode');
  20  
  21      this.popup      = false;
  22          this.tileLayer  = null;
  23  
  24      this.init = function() {
  25  
  26          this.center = this.getLatLng(this.setLoLa(this.settings.center_lng, this.settings.center_lat));
  27  
  28          var myOptions = {
  29              center:     this.center,
  30              zoom:         parseInt(this.zoomlevel.val()),
  31  
  32              zoomControl:    ( this.settings.zoom == '1' )
  33          };
  34  
  35          this.map = L.map(this.container, myOptions);
  36  
  37          var layer = this.get_maptype(this.maptype.val());
  38          this.tileLayer = L.tileLayer(layer.tile, layer.opts);
  39          this.tileLayer.addTo(this.map);
  40  
  41          this.setMarker();
  42          this.setEvents();
  43                 this.setControls();
  44      }
  45  
  46      this.sanitize = function(x) {
  47          x = parseFloat(x);
  48          return x.toFixed(8);
  49      };
  50  
  51      this.setLoLa = function(lng, lat) {
  52          return { lo: this.sanitize(lng), la: this.sanitize(lat) };
  53      };
  54  
  55      this.getLoLa = function(LatLng) {
  56          return { lo: this.sanitize(LatLng.lng), la: this.sanitize(LatLng.lat) };
  57      };
  58  
  59      this.getLatLng = function(LoLa) {
  60          return L.latLng( LoLa.la, LoLa.lo );
  61      };
  62  
  63      this.setCenter = function() {
  64          var LoLa = this.getLoLa(this.marker.getLatLng());
  65  
  66          this.map.setView(this.getLatLng(LoLa));
  67          this.center_lat.val(LoLa.la);
  68          this.center_lng.val(LoLa.lo);
  69      };
  70  
  71      this.setMarker = function() {
  72  
  73          this.marker = L.marker(this.center, {draggable: true, autoPan: true});
  74          this.map.addLayer(this.marker);
  75      };
  76  
  77      this.moveMarker = function(LoLa) {
  78                  this.hideMarkerInfo();
  79          this.marker.setLatLng(this.getLatLng(LoLa));
  80          this.lat.val(LoLa.la);
  81          this.lng.val(LoLa.lo);
  82  
  83          this.setCenter();
  84      };
  85  
  86      this.showMarkerInfo = function(LatLng, data) {
  87          this.popup = true;
  88          this.marker.bindPopup(data).addTo(this.map);
  89          this.marker.openPopup();
  90      };
  91  
  92      this.hideMarkerInfo = function() {
  93          if (!this.popup) return;
  94          this.popup = false;
  95          this.marker.closePopup();
  96          this.marker.unbindPopup();
  97  
  98      };
  99  
 100      this.get_maptype = function(maptype) {
 101                  var layer = {};
 102          switch(maptype)
 103          {
 104              case 'SATELLITE': 
 105                  layer.tile = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}';
 106                  layer.opts = {attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'};
 107              break;
 108              case 'HYBRID'    :
 109                  layer.tile = 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png';
 110                  layer.opts = {maxZoom: 17, attribution: 'Map data: &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a ref="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'};
 111              break;
 112              case 'TERRAIN'    :
 113                  layer.tile = 'https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}{r}.{ext}';
 114                  layer.opts = {    subdomains: 'abcd', minZoom: 0, maxZoom: 18, ext: 'png', attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'};
 115              break;
 116              default         :
 117                  layer.tile = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
 118                  layer.opts = {attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'};
 119              break;
 120          }
 121                  return layer;
 122      };
 123  
 124      this.setEvents = function() {
 125          // map
 126                  this.map.on('dragend', function(){
 127              var LoLa = _this.getLoLa(_this.map.getCenter());
 128              _this.center_lat.val(LoLa.la);
 129              _this.center_lng.val(LoLa.lo);
 130                  }); 
 131  
 132                  this.map.on('zoom', function(){
 133              _this.zoomlevel.val(parseInt(_this.map.getZoom()));
 134                  }); 
 135  
 136          // marker
 137                  this.marker.on('drag', function(e){ var marker = e.target;
 138              _this.hideMarkerInfo();
 139              var LatLng = marker.getLatLng();
 140              var LoLa = _this.getLoLa(LatLng);
 141              _this.lat.val(LoLa.la);
 142              _this.lng.val(LoLa.lo);
 143              marker.setLatLng(LatLng,{draggable: true, autoPan: true});
 144          });
 145  
 146                  this.marker.on('dragend', function(e){ var marker = e.target;
 147              var LatLng = marker.getLatLng();
 148              var LoLa = _this.getLoLa(LatLng);
 149              _this.lat.val(LoLa.la);
 150              _this.lng.val(LoLa.lo);
 151              marker.setLatLng(LatLng,{draggable: true, autoPan: true});
 152          });
 153  
 154          // geocoder
 155          jQuery('#' + this.prefix + '_geocode_button').click( function() {
 156              var address = jQuery('#' + _this.prefix + '_geocode').val();
 157  
 158              var data = {};
 159              data['action']        = 'mp_ajax';
 160              data['mp_action']     = 'geocoding';
 161              data['map_provider']     = 'o';
 162              data['addr']        = address;
 163  
 164              jQuery.ajax({
 165                  data: data,
 166                  beforeSend: null,
 167                  type: "POST",
 168                  url: mp_mapL10n.url,
 169                  success: _this.geocoding
 170              });
 171          });
 172  
 173      };
 174  
 175      this.setControls = function() {
 176  
 177          if ( 0 == this.settings.changemap+this.settings.center+this.settings.rgeocode ) return;
 178  
 179          L.Control.Ctrls = L.Control.extend({
 180              onAdd: function(map) {
 181                  var suffix = map.mailpress.suffix;
 182                  var div = L.DomUtil.create('div', 'leaflet-ctrl leaflet-ctrl-group');
 183                  div.innerHTML  = '';
 184                  if ( 1 == map.mailpress.changemap ) div.innerHTML += '<button type="button" id="map_control'+suffix+'" class="leaflet-ctrl-icon map_control" alt="'+mp_mapL10n.changemap+'" title="'+mp_mapL10n.changemap+'"></button>';
 185                  if ( 1 == map.mailpress.center    ) div.innerHTML += '<button type="button" id="map_center' +suffix+'" class="leaflet-ctrl-icon map_center"  alt="'+mp_mapL10n.center   +'" title="'+mp_mapL10n.center+'"   ></button>';
 186                  if ( 1 == map.mailpress.rgeocode  ) div.innerHTML += '<button type="button" id="map_geocode'+suffix+'" class="leaflet-ctrl-icon map_geocode" alt="'+mp_mapL10n.rgeocode +'" title="'+mp_mapL10n.rgeocode+'" ></button>';
 187                  return div;
 188              },
 189              onRemove: function(map) {
 190              }
 191          });
 192  
 193          L.control.ctrls = function(opts) {
 194              return new L.Control.Ctrls(opts);
 195          }
 196          this.map.mailpress = {changemap : this.settings.changemap , center : this.settings.center , rgeocode : this.settings.rgeocode,  suffix: this.suffix};
 197          L.control.ctrls({ position: 'topright' }).addTo(this.map);
 198  
 199          if ( 1 == this.settings.changemap ) {
 200              jQuery('#map_control'+this.suffix).click(function(){
 201                  switch (_this.maptype.val())
 202                  {
 203                      case 'ROADMAP' : _this.maptype.val('SATELLITE'); break;
 204                      case 'SATELLITE' : _this.maptype.val('HYBRID');  break;
 205                      case 'HYBRID' : _this.maptype.val('TERRAIN');    break;
 206                      default:     _this.maptype.val('ROADMAP');    break;
 207                  }
 208                  _this.tileLayer.remove(_this.map);
 209                  var layer = _this.get_maptype(_this.maptype.val());
 210                  _this.tileLayer = L.tileLayer(layer.tile, layer.opts);
 211                  _this.tileLayer.addTo(_this.map);
 212                  return false;
 213              });
 214          }
 215  
 216          if ( 1 == this.settings.center ) {
 217              jQuery('#map_center'+this.suffix).click(function(){
 218                  _this.setCenter();
 219                  return false;
 220              });
 221          }
 222  
 223  
 224          if ( 1 == this.settings.rgeocode ) {
 225              jQuery('#map_geocode'+this.suffix).click(function(){
 226                  var data = {};
 227                  data['action']        = 'mp_ajax';
 228                  data['mp_action']     = 'rgeocoding';
 229                  data['map_provider']     = 'o';
 230                  data['lng']        = _this.lng.val();
 231                  data['lat']        = _this.lat.val();
 232  
 233                  jQuery.ajax({
 234                      data: data,
 235                      beforeSend: null,
 236                      type: "POST",
 237                      url: mp_mapL10n.url,
 238                      success: _this.rgeocoding
 239                  });
 240  
 241                  return false;
 242              });
 243          }
 244      };
 245  
 246      this.geocoding = function(data) {
 247          if (data.success) {
 248              data = data.data;
 249              var lng = data.lng;
 250              var lat = data.lat;
 251              _this.moveMarker(_this.setLoLa(lng, lat));
 252          }
 253          else {
 254              alert("Geocoder failed");
 255          }
 256      };
 257  
 258      this.rgeocoding= function(data) {
 259          if (data.success) {
 260              data = data.data;
 261              _this.showMarkerInfo(_this.getLatLng(_this.setLoLa(_this.lng.val(), _this.lat.val())), data);
 262              _this.setCenter();
 263  
 264          }
 265          else {
 266              alert("No result found");
 267          }
 268      };
 269  
 270      var _this = this;
 271  
 272      this.init();
 273  }