[Summary view] [Print] [Text view]

   1  function mp_map_bing(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_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.count = parseInt(this.settings.count);
  18      this.max   = 10;
  19  
  20      this.infowindow = false;
  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              mapTypeId:     this.get_maptype(this.maptype.val()),
  30  
  31              showDashboard:    false,
  32              showMapTypeSelector: false,
  33              showZoomButtons: false,
  34  
  35              credentials:     mp_mapL10n.bmapkey
  36          };
  37  
  38          this.map = new Microsoft.Maps.Map(this.container, myOptions);
  39  
  40          if ( this.count )
  41          {
  42                  //Create an infobox at the center of the map but don't show it.
  43              this.infobox = new Microsoft.Maps.Infobox(this.center, {visible: false});
  44                  //Assign the infobox to a map instance.
  45              this.infobox.setMap(this.map);
  46  
  47              if ( this.count >= this.max ) 
  48                  this.setCluster();
  49              else
  50                  for (var i in this.data.markers) this.setMarker(this.data.markers[i]);
  51          }
  52  
  53          this.setEvents();
  54          this.setControls();
  55          this.scheduler();
  56      };
  57  
  58      this.sanitize = function(x) {
  59          x = parseFloat(x);
  60          return x.toFixed(8);
  61      };
  62  
  63      this.setLoLa = function(lng, lat) {
  64          return { lo: this.sanitize(lng), la: this.sanitize(lat) };
  65      };
  66  
  67      this.getLoLa = function(LatLng) {
  68          return { lo: this.sanitize(LatLng.longitude), la: this.sanitize(LatLng.latitude) };
  69      };
  70  
  71      this.getLatLng = function(LoLa) {
  72          return new Microsoft.Maps.Location(LoLa.la, LoLa.lo);
  73      };
  74  
  75      this.setMarker = function(data) {
  76          this.map.entities.push(this.getMarker(data));
  77      };
  78  
  79      this.getMarker = function(data) {
  80  
  81          var pos = this.getLatLng(this.setLoLa(data['lng'], data['lat']));
  82          var ppOptions = { title: data['ip'] };
  83  
  84          var pin= new Microsoft.Maps.Pushpin(pos, ppOptions);
  85  
  86          if(typeof(data['info']) != "undefined")
  87          {
  88              //Store some metadata with the pushpin.
  89              pin.metadata = { description: data['info'], title: data['ip'] };
  90  
  91              //Add a click event handler to the pushpin.
  92              Microsoft.Maps.Events.addHandler(pin, 'click', function(e){
  93                  _this.infobox.setOptions({
  94                      location: e.target.getLocation(),
  95                      title: e.target.metadata.title,
  96                      description: e.target.metadata.description,
  97                      visible: true
  98                  });
  99              });
 100          }
 101          return pin;
 102      };
 103  
 104      this.setCluster = function() {
 105              //Load the Clustering module.
 106              Microsoft.Maps.loadModule("Microsoft.Maps.Clustering", function () {
 107  
 108              // Get pins
 109              var pins = new Array();
 110              for (var i in _this.data.markers) pins[i] = _this.getMarker(_this.data.markers[i]);
 111  
 112  
 113              clusterLayer = new Microsoft.Maps.ClusterLayer(pins, { clusteredPinCallback: _this.setCustomCluster, gridSize: 80 });
 114              //clusterLayer = new Microsoft.Maps.ClusterLayer(pins);
 115              _this.map.layers.insert(clusterLayer);
 116              });        
 117      };
 118  
 119      this.setCustomCluster = function(cluster) {
 120              //Define variables for minimum cluster radius, and how wide the outline area of the circle should be.
 121              var minRadius = 12;
 122              var outlineWidth = 7;
 123  
 124              //Get the number of pushpins in the cluster
 125              var clusterSize = cluster.containedPushpins.length;
 126  
 127              //Calculate the radius of the cluster based on the number of pushpins in the cluster, using a logarithmic scale.
 128              var radius = Math.log(clusterSize) / Math.log(10) * 5 + minRadius;
 129  
 130              //Default cluster color is red.
 131              var fillColor = 'rgba(255, 40, 40, 0.5)';
 132  
 133              if (clusterSize < 5) {
 134                  //Make the cluster green if there are less than 10 pushpins in it.
 135                  fillColor = 'rgba(20, 180, 20, 0.5)';            
 136              } else if (clusterSize < 20) {
 137                  //Make the cluster yellow if there are 10 to 99 pushpins in it.
 138                  fillColor = 'rgba(255, 210, 40, 0.5)';
 139              }
 140  
 141              //Create an SVG string of two circles, one on top of the other, with the specified radius and color.
 142              var svg = ['<svg xmlns="http://www.w3.org/2000/svg" width="', (radius * 2), '" height="', (radius * 2), '">',
 143                  '<circle cx="', radius, '" cy="', radius, '" r="', radius, '" fill="', fillColor, '"/>',
 144                  '<circle cx="', radius, '" cy="', radius, '" r="', radius - outlineWidth, '" fill="', fillColor, '"/>',
 145                  '</svg>'];
 146  
 147              //Customize the clustered pushpin using the generated SVG and anchor on its center.
 148              cluster.setOptions({
 149                  icon: svg.join(''),
 150                  anchor: new Microsoft.Maps.Point(radius, radius),
 151                  textOffset: new Microsoft.Maps.Point(0, radius - 8) //Subtract 8 to compensate for height of text.
 152          });
 153      };
 154  
 155      this.get_maptype = function(maptype) {
 156                  var s = v = null;
 157          switch(maptype)
 158          {
 159              case 'SATELLITE': s = Microsoft.Maps.MapTypeId.aerial;    break;
 160              case 'HYBRID'     : s = Microsoft.Maps.MapTypeId.aerial; break;
 161              case 'TERRAIN'    : s = Microsoft.Maps.MapTypeId.canvasLight; break;
 162              default         : s = Microsoft.Maps.MapTypeId.road;    break;
 163          }
 164          return s;
 165      };
 166  
 167      this.setEvents = function() {
 168          // map
 169          Microsoft.Maps.Events.addHandler(_this.map, 'viewchangeend', function (e) { if (e.targetType != 'map') return;
 170              var LoLa = _this.getLoLa(_this.map.getCenter());
 171              _this.center_lat.val(LoLa.la);
 172              _this.center_lng.val(LoLa.lo);
 173  
 174              _this.zoomlevel.val(parseInt(_this.map.getZoom()));
 175          });
 176      };
 177  
 178      this.setControls = function() {
 179  
 180          MyControls.prototype = new Microsoft.Maps.CustomOverlay({ beneathLabels : false });
 181  
 182  		function MyControls() {
 183  
 184              _this.div = document.createElement('div');
 185              _this.div.setAttribute('class', 'bing-ctrl bing-ctrl-group');
 186                          
 187              var button = document.createElement('button');
 188              button.setAttribute('type', 'button');
 189              button.setAttribute('alt', mp_mapL10n.changemap);
 190              button.setAttribute('title', mp_mapL10n.changemap);
 191              button.setAttribute('class', 'bing-ctrl-icon map_control');
 192                _this.div.appendChild(button);
 193  
 194              button.onclick = function() 
 195              {
 196                         switch (_this.maptype.val())
 197                         {
 198                             case 'ROADMAP' : _this.maptype.val('HYBRID'); break;
 199  //                           case 'SATELLITE' : _this.maptype.val('HYBRID');  break;
 200                             case 'HYBRID' : _this.maptype.val('TERRAIN');    break;
 201                             default:     _this.maptype.val('ROADMAP');    break;
 202                              }
 203                              var s = _this.get_maptype(_this.maptype.val());
 204                  _this.map.setMapType(s);
 205                  return false;
 206              };
 207  
 208              button = document.createElement('button');
 209              button.setAttribute('type', 'button');
 210              button.setAttribute('alt', mp_mapL10n.center);
 211              button.setAttribute('title', mp_mapL10n.center);
 212              button.setAttribute('class', 'bing-ctrl-icon map_center');
 213               _this.div.appendChild(button);
 214  
 215              button.onclick = function() 
 216              {
 217                  var LoLa = _this.getLoLa(_this.center);
 218                  _this.map.setView({center:_this.center});
 219                  _this.center_lat.val(LoLa.la);
 220                  _this.center_lng.val(LoLa.lo);
 221                  return false;
 222              };
 223          };
 224  
 225          MyControls.prototype.onAdd = function () {
 226              this.setHtmlElement(_this.div);
 227          };
 228  
 229              //Implement the new custom overlay class.
 230              var controls = new MyControls();
 231  
 232              //Add the custom overlay to the map.
 233              this.map.layers.insert(controls);
 234      };
 235  
 236      this.scheduler = function() {
 237          jQuery.schedule({    id: _this.prefix + '_schedule',
 238                      time: 60000, 
 239                      func: function() { _this.update_settings(); }, 
 240                      repeat: true, 
 241                      protect: true
 242          });
 243      };
 244  
 245      this.update_settings = function() {
 246          var data = {};
 247          data['action']        = 'mp_ajax';
 248          data['mp_action']     = 'map_settings';
 249          data['id']        = mp_mapL10n.id;
 250          data['type']        = mp_mapL10n.type;
 251          data['prefix']        = this.prefix;
 252          data['settings[center_lat]'] = this.center_lat.val();
 253          data['settings[center_lng]'] = this.center_lng.val();
 254          data['settings[zoomlevel]']  = this.zoomlevel.val();
 255          data['settings[maptype]']    = this.maptype.val();
 256  
 257          jQuery.ajax({
 258              data: data,
 259              beforeSend: null,
 260              type: "POST",
 261              url: ajaxurl,
 262              success: null
 263          });
 264      };
 265  
 266      var _this = this;
 267  
 268      this.init();
 269  }
 270  
 271  var MAILPRESS_data = new Array();
 272  
 273  function mp_map(d){
 274      MAILPRESS_data.push(d);
 275  }