Production leaflet.js example

leaflet.js

var Leaflet = Fidel.declare({
    defaults : {
		imperial : 1609.344,
		locations : [],
		map : null,
		markers : [],
		options : {},
		pin : {
			size : {
				w : 48,
				h : 60
			},
			uri : '/mapping/brandPin/'
		},
		update : false,
		zoom : 12
	},
	elements : {
		address1 : '#address1',
		address2 : '#address2',
		citystatezip : '#citystatezip',
		couponListing : '.coupons-listing',
		latitude : '#latitude',
		loading : '#search-results-map-loading',
		longitude : '#longitude',
	},
	init : function() {
		var self = this;

		if (!this.hasOwnProperty('el'))
			return new Error('Leaflet map element required as el.');

		this.buildDefaults();
		this.defaults.markerGroup = new L.FeatureGroup();

		this.setSingleLatLng(function(){
			self.defaults.map = L.map(self.el[0].id).setView([self.defaults.latitude, self.defaults.longitude], self.defaults.zoom);

			var tileLayer = L.tileLayer(self.defaults.tileLayer.uri, {
				attribution : self.defaults.tileLayer.attribution
			});

			tileLayer.addTo(self.defaults.map);

			self.setLocations();

			self.defaults.map.on('click move', function(){
				self.defaults.map.closePopup()
			});

			self.defaults.map.on('dragend zoomend', function(){
				var coords = self.defaults.map.getCenter();

				self.defaults.latitude = coords.lat;
				self.defaults.longitude = coords.lng;
				self.setLocations();
			});
		});

		// IE COMPATABILITY
		if (!Object.keys) {
			Object.keys = (function () {
				var hasOwnProperty = Object.prototype.hasOwnProperty,
					hasDontEnumBug = !({toString: null}).propertyIsEnumerable('toString'),
					dontEnums = [
						'toString',
						'toLocaleString',
						'valueOf',
						'hasOwnProperty',
						'isPrototypeOf',
						'propertyIsEnumerable',
						'constructor'
					],
					dontEnumsLength = dontEnums.length;

				return function (obj) {
					if (typeof obj !== 'object' && typeof obj !== 'function' || obj === null)
						throw new TypeError('Object.keys called on non-object');

					var result = [];

					for (var prop in obj) {
						if (hasOwnProperty.call(obj, prop)) result.push(prop);
					}

					if (hasDontEnumBug) {
						for (var i=0; i < dontEnumsLength; i++) {
							if (hasOwnProperty.call(obj, dontEnums[i])) result.push(dontEnums[i]);
						}
					}

					return result;
				}
			})();
		}
	},
	bindResultTiles : function() {
		var self = this;

		$(this.elements.couponListing).on('mouseenter', 'li', function(e) {
			var id = parseInt($(this).attr('id').replace('marker_', ''), 10);

			self.defaults.markerGroup._layers[self.defaults.markerKeys[id]].openPopup();
		});
	},
	buildDefaults : function() {
		for (var prop in this.options) {
			this.defaults[prop] = this.options[prop];
		}

		this.defaults.zoom = this.options.zoom || this.defaults.zoom;

		delete this.options;
	},
	displayMarkers : function(callback) {
		var self = this,
			locations = this.defaults.locations;

		if (this.defaults.update)
			this.defaults.markerGroup.clearLayers();

		for (var i = 0; i < locations.length; i++) {
			var icon = L.icon({
					iconUrl : this.defaults.pin.uri + locations[i].merchant.id,
					iconSize : [this.defaults.pin.size.w, this.defaults.pin.size.h],
					iconAnchor : [16, 56],
					popupAnchor : [8, -56]
				}),
				marker = L.marker([locations[i].latitude, locations[i].longitude], { icon : icon }),
				markup = '<div class="iw-inner"><div class="iw-store-info"><a class="iw-logo" href="/coupons/location/' + locations[i].id + '"><img src="/images/ssllogo.php?image=' + locations[i].merchant.logo_url + '" alt=""/></a>' +
							'<h4><a href="/coupons/location/' + locations[i].id + '">' + locations[i].merchant.name + '</a></h4><div class="adr">' +
							'<div class="street-address">' + locations[i].address_1 + '</div>' +
							'<div class="extended-address">' + locations[i].address_2 + '</div>' +
							'<span class="locality">' + locations[i].city + '</span>, ' +
							'<span class="region">' + locations[i].state + '</span> ' +
							'<span class="postal-code">' + locations[i].zip + '</span><div class="country-name"></div></div></div>' +
							'<a class="iw-offers" href="/coupons/location/' + locations[i].id+'">' + locations[i].offers.length+' Offer' + (locations[i].offers.length == 1 ? '' : 's') + ' Available</a></div>';

			this.defaults.markerGroup.addLayer(marker.bindPopup(markup))
		};

		this.defaults.map.addLayer(this.defaults.markerGroup);
		this.defaults.markerKeys = Object.keys(this.defaults.markerGroup._layers);
		this.defaults.update = true;

		callback();
	},
	getMapRadius: function() {
		var mapBoundNorthEast = this.defaults.map.getBounds().getNorthEast();
		this.defaults.distance = mapBoundNorthEast.distanceTo(this.defaults.map.getCenter());
	},
	setLocations : function() {
		var self = this,
			el = this.elements,
			bounds = this.defaults.map.getBounds(),
			ne = bounds.getNorthEast(),
			distance = Math.round(ne.distanceTo(this.defaults.map.getCenter()) / this.defaults.imperial);

		$(el.loading).fadeIn();

		$.ajax({
			url : '/coupons/locationData',
			data : $.param({
				lat : self.defaults.latitude,
				long : self.defaults.longitude,
				radius : distance
			})
		}).done(function(res){
			self.defaults.locations = res;
			self.displayMarkers(function(){
				self.emit('scroller', { locations : self.defaults.locations }, true);
				self.bindResultTiles();
			});

			$(el.loading).fadeOut();
		});
	},
	setSingleLatLng : function(callback) {
		var el = this.elements,
			def = this.defaults,
			latitude = (def.latitude) ? def.latitude : $.trim($(el.latitude).text()),
			longitude = (def.longitude) ? def.longitude : $.trim($(el.longitude).text());

		this.defaults.latitude = latitude;
		this.defaults.longitude = longitude;
		callback();
	},
});