https://essays.discount/wp-content/themes/listingpro/assets/js/home-map.js

1jQuery(window).load(function($){
2		if(jQuery(".lp_home").is("#homeMap")) {
3		jQuery('#homeMap').empty();
4		$defLat = jQuery('body').data('defaultmaplat');
5		$defLong = jQuery('body').data('defaultmaplot');
6		
7			L.Google = L.Class.extend({
8				includes: L.Mixin.Events,
9
10				options: {
11					minZoom: 0,
12					maxZoom: 18,
13					tileSize: 256,
14					subdomains: 'abc',
15					errorTileUrl: '',
16					attribution: '',
17					opacity: 1,
18					continuousWorld: false,
19					noWrap: false,
20				},
21
22				// Possible types: SATELLITE, ROADMAP, HYBRID
23				initialize: function(type, options) {
24					L.Util.setOptions(this, options);
25
26					this._type = google.maps.MapTypeId[type || 'SATELLITE'];
27				},
28
29				onAdd: function(map, insertAtTheBottom) {
30					this._map = map;
31					this._insertAtTheBottom = insertAtTheBottom;
32
33					// create a container div for tiles
34					this._initContainer();
35					this._initMapObject();
36
37					// set up events
38					map.on('viewreset', this._resetCallback, this);
39
40					this._limitedUpdate = L.Util.limitExecByInterval(this._update, 150, this);
41					map.on('move', this._update, this);
42					//map.on('moveend', this._update, this);
43
44					this._reset();
45					this._update();
46				},
47
48				onRemove: function(map) {
49					this._map._container.removeChild(this._container);
50					//this._container = null;
51
52					this._map.off('viewreset', this._resetCallback, this);
53
54					this._map.off('move', this._update, this);
55					//this._map.off('moveend', this._update, this);
56				},
57
58				getAttribution: function() {
59					return this.options.attribution;
60				},
61
62				setOpacity: function(opacity) {
63					this.options.opacity = opacity;
64					if (opacity < 1) {
65						L.DomUtil.setOpacity(this._container, opacity);
66					}
67				},
68
69				_initContainer: function() {
70					var tilePane = this._map._container
71						first = tilePane.firstChild;
72
73					if (!this._container) {
74						this._container = L.DomUtil.create('div', 'leaflet-google-layer leaflet-top leaflet-left');
75						this._container.id = "_GMapContainer";
76					}
77
78					if (true) {
79						tilePane.insertBefore(this._container, first);
80
81						this.setOpacity(this.options.opacity);
82						var size = this._map.getSize();
83						this._container.style.width = size.x + 'px';
84						this._container.style.height = size.y + 'px';
85					}
86				},
87
88				_initMapObject: function() {
89					this._google_center = new google.maps.LatLng(0, 0);
90					var map = new google.maps.Map(this._container, {
91						center: this._google_center,
92						zoom: 0,
93						mapTypeId: this._type,
94						disableDefaultUI: true,
95						keyboardShortcuts: false,
96						draggable: false,
97						disableDoubleClickZoom: true,
98						scrollwheel: false,
99						streetViewControl: false
100					});
101
102					var _this = this;
103					this._reposition = google.maps.event.addListenerOnce(map, "center_changed", 
104						function() { _this.onReposition(); });
105				
106					map.backgroundColor = '#ff0000';
107					this._google = map;
108				},
109
110				_resetCallback: function(e) {
111					this._reset(e.hard);
112				},
113
114				_reset: function(clearOldContainer) {
115					this._initContainer();
116				},
117
118				_update: function() {
119					this._resize();
120
121					var bounds = this._map.getBounds();
122					var ne = bounds.getNorthEast();

123					var sw = bounds.getSouthWest();
124					var google_bounds = new google.maps.LatLngBounds(
125						new google.maps.LatLng(sw.lat, sw.lng),
126						new google.maps.LatLng(ne.lat, ne.lng)
127					);
128					var center = this._map.getCenter();
129					var _center = new google.maps.LatLng(center.lat, center.lng);
130
131					this._google.setCenter(_center);
132					this._google.setZoom(this._map.getZoom());
133					this._google.fitBounds(google_bounds);
134				},
135
136				_resize: function() {
137					var size = this._map.getSize();
138					if (this._container.style.width == size.x &&
139						this._container.style.height == size.y)
140						return;
141					this._container.style.width = size.x + 'px';
142					this._container.style.height = size.y + 'px';
143					google.maps.event.trigger(this._google, "resize");
144				},
145
146				onReposition: function() {
147					//google.maps.event.trigger(this._google, "resize");
148				}
149			});
150
151			L.HtmlIcon = L.Icon.extend({
152				options: {
153					/*
154					html: (String) (required)
155					iconAnchor: (Point)
156					popupAnchor: (Point)
157					*/
158				},
159
160				initialize: function(options) {
161					L.Util.setOptions(this, options);
162				},
163
164				createIcon: function() {
165					var div = document.createElement('div');
166					div.innerHTML = this.options.html;
167					if (div.classList)
168						div.classList.add('leaflet-marker-icon');
169					else
170						div.className += ' ' + 'leaflet-marker-icon';
171					return div;
172				},
173
174				createShadow: function() {
175					return null;
176				}
177			});
178			
179			
180			var maplistingby = jQuery('body').data('maplistingby');
181			if(maplistingby==null || maplistingby=="" || maplistingby=="geolocaion"){
182				lpGetGpsLocName(function (lpgetcurrentcityvalue) {
183					lpgpsclocation = lpgetcurrentcityvalue;
184					console.log(lpgpsclocation);
185					callhomemapajax(lpgpsclocation, maplistingby);
186					//console.log(lpgpsclocation);
187				});
188			}else{
189				callhomemapajax('', maplistingby);
190			}
191			function callhomemapajax(lpcity, maplistingby){
192				jQuery('#homeMap').addClass('loading');
193			jQuery.ajax({
194				type: 'POST',
195				dataType: 'json',
196				url: listingpro_home_map_object.ajaxurl,
197				data: { 
198					'action': 'listingpro_home_map_content', 
199						'listingby': maplistingby,
200						'lpcity': lpcity,
201					'trig': 'home_map',
202					},
203				success: function(data){
204					if(data){
205							jQuery('#homeMap').removeClass('loading');
206						var map = null
207						$mtoken = jQuery('#page').data("mtoken");	
208						$mapboxDesign = jQuery('#page').data("mstyle");
209						if($mtoken != ''){
210						
211							L.mapbox.accessToken = $mtoken;
212							 map = L.mapbox.map('homeMap', 'mapbox.streets');
213							L.tileLayer('https://api.tiles.mapbox.com/v4/'+$mapboxDesign+'/{z}/{x}/{y}.png?access_token='+$mtoken+'', {
214										maxZoom: 18,
215										attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
216											'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
217											'Imagery © <a href="http://mapbox.com">Mapbox</a>',
218										id: 'mapbox.light'
219							}).addTo(map);						
220							 
221							var markers = new L.MarkerClusterGroup();
222							hasgetbouts = false;
223							jQuery.each(data, function(i,v) {
224								$vlatitude = v.latitude;
225								$vlongitude = v.longitude;
226								if($vlatitude != null && $vlongitude != null){
227									hasgetbouts = true;
228									//alert(v.latitude);
229									var markerLocation = new L.LatLng($vlatitude, $vlongitude); // London
230
231									var CustomHtmlIcon = L.HtmlIcon.extend({
232										options : {
233											html : "<div class='lpmap-icon-shape pin card"+i+"'><div class='lpmap-icon-contianer'><img src='"+v.icon+"' /></div></div>",
234										}
235									});
236
237									var customHtmlIcon = new CustomHtmlIcon(); 
238
239									var marker = new L.Marker(markerLocation, {icon: customHtmlIcon}).bindPopup('<div class="map-post"><div class="map-post-thumb"><a target="_blank" href="'+v.url+'">'+v.image+'</a></div><div class="map-post-des"><div class="map-post-title"><h5><a target="_blank" href="'+v.url+'">'+v.title+'</a></h5></div><div class="map-post-address"><p><i class="fa fa-map-marker"></i> '+v.address+'</p></div></div></div>').addTo(map);
240									markers.addLayer(marker);
241									map.addLayer(markers);
242								}
243							});
244							
245							
246							if(hasgetbouts){
247								map.fitBounds(markers.getBounds());
248							}else{
249								
250								map.fitBounds([[$defLat, $defLong],[$defLat, $defLong]]);
251							}
252							
253							map.scrollWheelZoom.disable();
254						}else{
255							//var map = new L.Map('homeMap', '');
256							var map = new L.Map('homeMap', {
257							   dragging: true,
258							   tap: false
259							});
260							
261							var googleLayer = new L.Google('ROADMAP');						
262							map.addLayer(googleLayer);
263							var markers = new L.MarkerClusterGroup();
264							hasgetbouts = false;

265
266							jQuery.each(data, function(i,v) {
267								console.log(v);
268								
269								$vlatitude = v.latitude;
270								$vlongitude = v.longitude;
271								if( ($vlatitude != '' || $vlatitude != 0) && ($vlongitude != '' || $vlongitude != 0) ){
272									
273									hasgetbouts = true;
274								
275									//alert(v.latitude);
276									var markerLocation = new L.LatLng($vlatitude, $vlongitude); // London
277
278									var CustomHtmlIcon = L.HtmlIcon.extend({
279										options : {
280											html : "<div class='lpmap-icon-shape pin card"+i+"'><div class='lpmap-icon-contianer'><img src='"+v.icon+"' /></div></div>",
281										}
282									});
283
284									var customHtmlIcon = new CustomHtmlIcon(); 
285
286									var marker = new L.Marker(markerLocation, {icon: customHtmlIcon}).bindPopup('<div class="map-post"><div class="map-post-thumb"><a target="_blank" href="'+v.url+'">'+v.image+'</a></div><div class="map-post-des"><div class="map-post-title"><h5><a target="_blank" href="'+v.url+'">'+v.title+'</a></h5></div><div class="map-post-address"><p><i class="fa fa-map-marker"></i> '+v.address+'</p></div></div></div>').addTo(map);
287									markers.addLayer(marker);
288									map.addLayer(markers);
289									
290								}
291								
292							});
293							
294							if(hasgetbouts){
295								map.fitBounds(markers.getBounds());
296							}else{
297								
298								map.fitBounds([[$defLat, $defLong],[$defLat, $defLong]]);
299							}
300							map.scrollWheelZoom.disable();
301							map.invalidateSize();							
302							//console.log(markers);
303							
304							
305						}
306					}
307					
308								
309					
310					},
311					error: function (request, status, error) {
312						jQuery('#homeMap').removeClass('loading');
313						console.log(request.responseText);
314				}
315			});
316			};
317			
318			
319		}
320	});