[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      mapboxgl.accessToken = mp_mapL10n.mapboxtoken;
  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              container:     this.container,
  28  
  29              center:     this.center,
  30              zoom:         parseInt(this.zoomlevel.val()),
  31              style:         this.get_maptype(this.maptype.val()),
  32  
  33              dragRotate:    false
  34          };
  35  
  36          this.map = new mapboxgl.Map(myOptions);
  37  
  38                  this.map.on('load', function(){
  39  
  40              if ( _this.count )
  41              {
  42                  if ( _this.count < _this.max )
  43                      for (var i in _this.data.markers) _this.setMarker(_this.data.markers[i]);
  44                  else
  45                      _this.setCluster();
  46              }
  47  
  48              _this.setEvents();
  49                  _this.setControls();
  50              _this.scheduler();                        
  51                  });                
  52      };
  53  
  54      this.sanitize = function(x) {
  55          x = parseFloat(x);
  56          return x.toFixed(8);
  57      };
  58  
  59      this.setLoLa = function(lng, lat) {
  60          return { lo: this.sanitize(lng), la: this.sanitize(lat) };
  61      };
  62  
  63      this.getLoLa = function(LatLng) {
  64          return (Array.isArray(LatLng))
  65              ? { lo: this.sanitize(LatLng[0]),  la: this.sanitize(LatLng[1])  }
  66              : { lo: this.sanitize(LatLng.lng), la: this.sanitize(LatLng.lat) };
  67      };
  68  
  69      this.getLatLng = function(LoLa) {
  70          return { lon: LoLa.lo, lat: LoLa.la };
  71      };
  72  
  73      this.setMarker = function(data) {
  74  
  75          var coords = this.getLatLng(this.setLoLa(data['lng'], data['lat']));
  76  
  77          var el = document.createElement('div');
  78          el.className = 'marker';
  79  
  80          var marker = new mapboxgl.Marker(el);
  81          marker.setLngLat( coords );
  82  
  83          if(typeof(data['info']) != "undefined")
  84          {
  85              marker.setPopup(new mapboxgl.Popup({offset: 25}).setHTML(data['info'])).addTo(this.map);
  86          }
  87      };
  88  
  89      this.setCluster = function() {
  90          var features = new Array();
  91          
  92          for (var i in this.data.markers)
  93          {
  94              if (typeof(this.data.markers[i].info) != "undefined" )
  95                  features.push( { type: "Feature", geometry: { type: "Point", coordinates: [this.data.markers[i].lng, this.data.markers[i].lat] }, properties: { html: this.data.markers[i].info } });
  96              else
  97                  features.push( { type: "Feature", geometry: { type: "Point", coordinates: [this.data.markers[i].lng, this.data.markers[i].lat] } });
  98          }
  99  
 100          var geojson = { type: "FeatureCollection", features: features };
 101          this.map.addSource('tracks', { type: 'geojson', data: geojson, cluster: true, clusterMaxZoom: 14, clusterRadius: 50 });
 102  
 103          this.map.addLayer({
 104              id: "clusters",
 105              type: "circle",
 106              source: 'tracks',
 107              filter: ["has", "point_count"],
 108              paint: {
 109  // Use step expressions (https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-step)
 110  // with three steps to implement three types of circles:
 111  //   * Blue, 20px circles when point count is less than 100
 112  //   * Yellow, 30px circles when point count is between 100 and 750
 113  //   * Pink, 40px circles when point count is greater than or equal to 750
 114                  "circle-color": [
 115                      "step",
 116                      ["get", "point_count"],
 117                      "#51bbd6",
 118                      10,
 119                      "#f1f075",
 120                      30,
 121                      "#f28cb1"
 122                  ],
 123                  "circle-radius": [
 124                      "step",
 125                      ["get", "point_count"],
 126                      10,
 127                      10,
 128                      15,
 129                      30,
 130                      20
 131                  ]
 132              }
 133          });
 134  
 135          this.map.addLayer({
 136              id: "cluster-count",
 137              type: "symbol",
 138              source: 'tracks',
 139              filter: ["has", "point_count"],
 140              layout: {
 141                  "text-field": "{point_count_abbreviated}",
 142                  "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
 143                  "text-size": 12
 144              }
 145          });
 146  
 147           this.map.addLayer({
 148              id: "unclustered-point",
 149              type: "circle",
 150              source: 'tracks',
 151              filter: ["!", ["has", "point_count"]],
 152              paint: {
 153                  "circle-color": "#11b4da",
 154                  "circle-radius": 4,
 155                  "circle-stroke-width": 1,
 156                  "circle-stroke-color": "#fff"
 157              }
 158          });
 159  
 160          // inspect a cluster on click
 161          this.map.on('click', 'clusters', function (e) {
 162              var features = _this.map.queryRenderedFeatures(e.point, { layers: ['clusters'] });
 163              var clusterId = features[0].properties.cluster_id;
 164              _this.map.getSource('tracks').getClusterExpansionZoom(clusterId, function (err, zoom) {
 165                  if (err)
 166                      return;
 167   
 168                  _this.map.easeTo({
 169                      center: features[0].geometry.coordinates,
 170                      zoom: zoom
 171                  });
 172              });
 173          });
 174   
 175          this.map.on('mouseenter', 'clusters', function () {
 176              _this.map.getCanvas().style.cursor = 'pointer';
 177          });
 178          this.map.on('mouseleave', 'clusters', function () {
 179              _this.map.getCanvas().style.cursor = '';
 180          });
 181      };
 182  
 183      this.get_maptype = function(maptype) {
 184                  var s = v = null;
 185          switch(maptype)
 186          {
 187              case 'SATELLITE': s = 'satellite'; v = '9';    break;
 188              case 'HYBRID'    : s = 'satellite-streets'; v = '11'; break;
 189              case 'TERRAIN'    : s = 'outdoors'; v = '11';    break;
 190              default         : s = 'streets'; v = '11';    break;
 191          }
 192                  return 'mapbox://styles/mapbox/' + s + '-v' + v;
 193      };
 194  
 195      this.setEvents = function() {
 196          // map
 197                  this.map.on('dragend', function(){
 198              var LoLa = _this.getLoLa(_this.map.getCenter());
 199              _this.center_lat.val(LoLa.la);
 200              _this.center_lng.val(LoLa.lo);
 201                  }); 
 202  
 203                  this.map.on('zoom', function(){
 204              _this.zoomlevel.val(parseInt(_this.map.getZoom()));
 205                  }); 
 206      };
 207  
 208      this.setControls = function() {
 209  
 210                 var c = new MP_Mapbox_Controls();
 211                 this.map.addControl( c );
 212  
 213                 jQuery('#' + _this.prefix + '_map .map_control').click(function(){
 214                     switch (_this.maptype.val())
 215                     {
 216                         case 'ROADMAP' : _this.maptype.val('SATELLITE'); break;
 217                         case 'SATELLITE' : _this.maptype.val('HYBRID');  break;
 218                         case 'HYBRID' : _this.maptype.val('TERRAIN');    break;
 219                         default:     _this.maptype.val('ROADMAP');    break;
 220                          }
 221                          var s = _this.get_maptype(_this.maptype.val());
 222                          _this.map.setStyle(s);
 223              return false;
 224                 });
 225  
 226                 jQuery('#' + _this.prefix + '_map .map_center').click(function(){
 227              var LoLa = _this.getLoLa(_this.center);
 228              _this.map.setCenter(_this.center);
 229              _this.center_lat.val(LoLa.la);
 230              _this.center_lng.val(LoLa.lo);
 231              return false;
 232            });
 233      };
 234  
 235      this.scheduler = function() {
 236          jQuery.schedule({    id: _this.prefix + '_schedule',
 237                      time: 60000, 
 238                      func: function() { _this.update_settings(); }, 
 239                      repeat: true, 
 240                      protect: true
 241          });
 242      };
 243  
 244      this.update_settings = function() {
 245          var data = {};
 246          data['action']        = 'mp_ajax';
 247          data['mp_action']     = 'map_settings';
 248          data['id']        = mp_mapL10n.id;
 249          data['type']        = mp_mapL10n.type;
 250          data['prefix']        = this.prefix;
 251          data['settings[center_lat]'] = this.center_lat.val();
 252          data['settings[center_lng]'] = this.center_lng.val();
 253          data['settings[zoomlevel]']  = this.zoomlevel.val();
 254          data['settings[maptype]']    = this.maptype.val();
 255  
 256          jQuery.ajax({
 257              data: data,
 258              beforeSend: null,
 259              type: "POST",
 260              url: ajaxurl,
 261              success: null
 262          });
 263      };
 264  
 265      var _this = this;
 266  
 267      this.init();
 268  }
 269  
 270  class MP_Mapbox_Controls {
 271      onAdd(map) {
 272          this.map = map;
 273          this.container = document.createElement('div');
 274          this.container.setAttribute('class', 'mapboxgl-ctrl mapboxgl-ctrl-group');
 275          var button = document.createElement('button');
 276                  
 277          button.setAttribute('class', 'mapboxgl-ctrl-icon map_control');
 278          button.setAttribute('type', 'button');
 279          button.setAttribute('alt', mp_mapL10n.changemap);
 280          button.setAttribute('title', mp_mapL10n.changemap);
 281           this.container.appendChild(button);
 282                  
 283              var button = document.createElement('button');
 284          button.setAttribute('class', 'mapboxgl-ctrl-icon map_center');
 285          button.setAttribute('type', 'button');
 286          button.setAttribute('alt', mp_mapL10n.center);
 287          button.setAttribute('title', mp_mapL10n.center);
 288           this.container.appendChild(button);
 289                  
 290          return this.container;
 291      }
 292      onRemove() {
 293          this.container.parentNode.removeChild(this.container);
 294          this.map = undefined;
 295      }
 296  }