map leaflet prototypes

map-leaflet-prototype.js

(function() {


  //-- external libraries leaflet.ajax.min.js, leaflet.markercluster.js
  L.Util.ajax('data/data.json').then(function(data) {
    var map = new SaforMap({
      element: document.getElementById('map')
    });
    map.draMarkers(data);
  });

  var SaforMap = function(opts) {
    //--GET OPTIONS
    this.element = opts.element;
    this.isFicha = L.DomUtil.hasClass(this.element, 'ficha-map');

    //-- VARIALES
    this.arrLngs = [];

    //--FUNCTIONS
    this.draw();
    this.markerIcon();
    this.markerCluster();

  }
  SaforMap.prototype.draw = function() {

    this.map = L.map(this.element, {
        scrollWheelZoom: this.isFicha ? true : false
      })
      .on('load', function() {
        console.log('xxxx')
      })
      .setView([38.733144, 0.144558], 13);

    var mapLayer = L.tileLayer('https://api.mapbox.com/styles/v1/carolinavallejo/cjciz7wb88mox2so65ab8mcr5/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiY2Fyb2xpbmF2YWxsZWpvIiwiYSI6ImNqNGZuendsZDFmbmwycXA0eGFpejA5azUifQ._a5sIBQuS72Kw24eZgrEFw', {
      maxZoom: 20,
      id: 'mapbox.streets',
      accessToken: 'pk.eyJ1IjoiY2Fyb2xpbmF2YWxsZWpvIiwiYSI6ImNqY2l6M2V4aDIzN24zM28wajlicW1oZzgifQ.P7FhJcKTjX3antEfiZLSYQ'
    }).addTo(this.map);

  }

  SaforMap.prototype.markerIcon = function() {


    var icon_w = 38;
    var LeafIcon = L.Icon.extend({
      options: {
        iconSize: [icon_w, icon_w],
        shadowSize: [50, 64],
        iconAnchor: [(icon_w / 2), (icon_w)],
        popupAnchor: [0, ((icon_w) * -1)]
      }
    });

    this.localIcon = new LeafIcon({ iconUrl: 'assets/marker-ico2.svg' });
  }

  SaforMap.prototype.markerCluster = function() {

    this.markerCluster = L.markerClusterGroup({
      spiderfyOnMaxZoom: true,
      showCoverageOnHover: false,
      zoomToBoundsOnClick: true,
      iconCreateFunction: function(cluster) {
        return L.divIcon({ html: '<div class="marker-cluster">' + cluster.getChildCount() + '</div>' });
      },
      maxClusterRadius: 40
    });

    this.map.addLayer(this.markerCluster);

  }

  SaforMap.prototype.addMarker = function(d) {

    if (d.latitud !== '' && d.longitud !== '') {

      var latlng = L.latLng(parseFloat(d.latitud), parseFloat(d.longitud));

      this.arrLngs.push(latlng);

      var m = new L.Marker(latlng, {
        icon: this.localIcon
      });

      this.markerCluster.addLayer(m);

      if(!this.isFichaMap ){
        this.configPopup(latlng, m, d);  
      }
      

    }
  }

  SaforMap.prototype.configPopup = function(latlng, m, d) {

    

    


    var icon_w = 12;
    var wPop = 380;
    var popOtions = {
      closeOnClick: false,
      autoClose: true,
      offset: new L.Point((wPop / 2) - 30, icon_w + 0),
      minWidth: wPop,
      maxWidth: wPop,
      keepInView: false
    };

    var popup1 = L.popup(popOtions);
    popup1.setLatLng(latlng);
    var content = L.DomUtil.create('div');


    //---INSERT HTML IN TOOLTIP:
    var html =
      '<a href="' + d.link + '" title="">' +
      '<div class="wrap-cover-img">' +
      '<img src="' + d.image + '" alt="image">' +
      '</div>' +
      '<div class="wrap-text">' +
      '<div class="title">' + d.title + '</div>' +
      '<p>' + d.description + '</p>' +
      '</div>' +
      '</a>';

    popup1.setContent(html);
    m.bindPopup(popup1);
  }

  SaforMap.prototype.draMarkers = function(data) {
    //---clean MARKERS:
    this.arrLngs = [];
    this.markerCluster.clearLayers();

    var length = data.length;

    for (var item = 0; item < length; item++) {
      this.addMarker(data[item]);
    }
    this.rezoom();
  }

  SaforMap.prototype.rezoom = function() {
    var bounds = new L.LatLngBounds(this.arrLngs);
    this.arrLngs.length !== 0 && this.map.fitBounds(bounds, { padding: [50, 50] });
  }

})();