[Summary view] [Print] [Text view]

   1  function mp_map(data)
   2  {
   3      this.map     = null;
   4  
   5      this.data    = data;
   6      this.settings     = data.settings;
   7      this.prefix     = this.settings.prefix;
   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.count = parseInt(this.settings.count);
  18      this.max   = 10;
  19  
  20          this.tileLayer  = null;
  21          
  22      this.init = function() {
  23      
  24          this.center = this.getLatLng(this.setLoLa(this.settings.center_lng, this.settings.center_lat));
  25  
  26          var myOptions = {
  27              center:     this.center,
  28              zoom:         parseInt(this.zoomlevel.val()),
  29  
  30              zoomControl:    false
  31          };
  32  
  33          this.map = L.map(this.container, myOptions);
  34  
  35          var layer = this.get_maptype(this.maptype.val());
  36          this.tileLayer = L.tileLayer(layer.tile, layer.opts);
  37          this.tileLayer.addTo(this.map);
  38  
  39          if ( this.count )
  40          {
  41              if ( this.count < this.max )
  42                  for (var i in this.data.markers) this.setMarker(this.data.markers[i]);
  43              else
  44                  this.setCluster( this.data.markers );
  45          }
  46          
  47          this.setEvents();
  48              this.setControls();
  49                 this.scheduler();                        
  50      };
  51  
  52      this.sanitize = function(x) {
  53          x = parseFloat(x);
  54          return x.toFixed(8);
  55      };
  56  
  57      this.setLoLa = function(lng, lat) {
  58          return { lo: this.sanitize(lng), la: this.sanitize(lat) };
  59      };
  60  
  61      this.getLoLa = function(LatLng) {
  62          return { lo: this.sanitize(LatLng.lng), la: this.sanitize(LatLng.lat) };
  63      };
  64  
  65      this.getLatLng = function(LoLa) {
  66          return L.latLng( LoLa.la, LoLa.lo );
  67  //        return { lat: LoLa.la, lng: LoLa.lo };
  68      };
  69  
  70      this.setMarker = function(data) {
  71  
  72          var coords = this.getLatLng(this.setLoLa(data['lng'], data['lat']));
  73  
  74          var m = L.marker(coords).addTo(this.map);
  75  
  76          if(typeof(data['info']) != "undefined")
  77          {
  78              m.bindPopup(data['info']);
  79          }
  80  
  81          return m;
  82      };
  83  
  84      this.setCluster = function() {
  85          var markers = L.markerClusterGroup({ spiderfyOnMaxZoom: false, showCoverageOnHover: false, zoomToBoundsOnClick: false });
  86  
  87          markers.on('clusterclick', function (a) {
  88              a.layer.spiderfy();
  89          });
  90  
  91          for (var i in this.data.markers)
  92          {
  93              var data = this.data.markers[i];
  94  
  95              var coords = this.getLatLng(this.setLoLa(data['lng'], data['lat']));
  96              var m = L.marker(coords);
  97  
  98              if(typeof(data['info']) != "undefined")
  99              {
 100                  m.bindPopup(data['info']);
 101              }
 102  
 103              markers.addLayer(m);
 104          }
 105  
 106          this.map.addLayer(markers);
 107      };
 108  
 109      this.get_maptype = function(maptype) {
 110                  var layer = {};
 111          switch(maptype)
 112          {
 113              case 'SATELLITE': 
 114                  layer.tile = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}';
 115                  layer.opts = {attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'};
 116              break;
 117              case 'HYBRID'    :
 118                  layer.tile = 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png';
 119                  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>)'};
 120              break;
 121              case 'TERRAIN'    :
 122                  layer.tile = 'https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}{r}.{ext}';
 123                  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>'};
 124              break;
 125              default         :
 126                  layer.tile = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
 127                  layer.opts = {attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'};
 128              break;
 129          }
 130                  return layer;
 131      };
 132  
 133      this.setEvents = function() {
 134          // map
 135                  this.map.on('dragend', function(){
 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.on('zoom', function(){
 142              _this.zoomlevel.val(parseInt(_this.map.getZoom()));
 143                  }); 
 144      };
 145  
 146      this.setControls = function() {
 147  
 148          L.Control.Ctrls = L.Control.extend({
 149              onAdd: function(map) {
 150                  var div = L.DomUtil.create('div', 'leaflet-ctrl leaflet-ctrl-group');
 151                  div.innerHTML  = '<button class="leaflet-ctrl-icon map_control" type="button" title="'+mp_mapL10n.changemap+'" alt="'+mp_mapL10n.changemap+'"></button>'
 152                             + '<button class="leaflet-ctrl-icon map_center"  type="button" title="'+mp_mapL10n.center+'"    alt="'+mp_mapL10n.center   +'"></button>';
 153                  return div;
 154              },
 155              onRemove: function(map) {
 156              }
 157          });
 158  
 159          L.control.ctrls = function(opts) {
 160              return new L.Control.Ctrls(opts);
 161          }
 162  
 163          L.control.ctrls({ position: 'topright' }).addTo(this.map);
 164  
 165          jQuery('#' + _this.prefix + '_map .map_control').click(function(){
 166              switch (_this.maptype.val())
 167              {
 168                  case 'ROADMAP' : _this.maptype.val('SATELLITE'); break;
 169                  case 'SATELLITE' : _this.maptype.val('HYBRID');  break;
 170                  case 'HYBRID' : _this.maptype.val('TERRAIN');    break;
 171                  default:     _this.maptype.val('ROADMAP');    break;
 172              }
 173              _this.tileLayer.remove(_this.map);
 174              var layer = _this.get_maptype(_this.maptype.val());
 175              _this.tileLayer = L.tileLayer(layer.tile, layer.opts);
 176              _this.tileLayer.addTo(_this.map);
 177              return false;
 178          });
 179  
 180          jQuery('#' + _this.prefix + '_map .map_center').click(function(){
 181              var LoLa = _this.getLoLa(_this.center);
 182              _this.map.setView(_this.center);
 183              _this.center_lat.val(LoLa.la);
 184              _this.center_lng.val(LoLa.lo);
 185              return false;
 186          });
 187      };
 188  
 189      this.scheduler = function() {
 190          jQuery.schedule({    id: _this.prefix + '_schedule',
 191                      time: 60000, 
 192                      func: function() { _this.update_settings(); }, 
 193                      repeat: true, 
 194                      protect: true
 195          });
 196      };
 197  
 198      this.update_settings = function() {
 199          var data = {};
 200          data['action']        = 'mp_ajax';
 201          data['mp_action']     = 'map_settings';
 202          data['id']        = mp_mapL10n.id;
 203          data['type']        = mp_mapL10n.type;
 204          data['prefix']        = this.prefix;
 205          data['settings[center_lat]'] = this.center_lat.val();
 206          data['settings[center_lng]'] = this.center_lng.val();
 207          data['settings[zoomlevel]']  = this.zoomlevel.val();
 208          data['settings[maptype]']    = this.maptype.val();
 209  
 210          jQuery.ajax({
 211              data: data,
 212              beforeSend: null,
 213              type: "POST",
 214              url: ajaxurl,
 215              success: null
 216          });
 217      };
 218  
 219      var _this = this;
 220  
 221      this.init();
 222  }