https://quickblock.uk/wp-content/plugins/quickblock-map//quickblock-map.js?ver=1.0.2

1/**
2 * Plugin Name: Quickblock Map
3 * Plugin URI: https://quickblock.uk
4 * Description: This plugin adds a Map of Quickblock resellers.
5 * Version: 1.0
6 * Author: Agency of None / Rick Curran
7 * Author URI: https://agencyofnone.com
8 */
9
10( function($) {
11	
12	 // DEFINE MAP ID
13	let map_id = 'qb_map';
14
15	let map = '';
16	
17	// MAP ID used to get width of map element
18	let get_map_width = ( $( '#'+map_id ).width() );
19
20	// MAP DEFAULT ZOOM
21	let map_default_zoom = 14;
22
23	// MAP DEFAULT ZOOM MOBILE (Automatically / default to -2 for mobile? Or just let it manually set?
24	if (get_map_width <= 480) { map_default_zoom = 11; }
25	
26	// MAP POPUP OPEN - change 'autoPanPaddingTopLeft' for desktop / mobile
27	let popup_open_offset = L.point(20, 70); 
28	if (get_map_width < 740) { 
29		popup_open_offset = L.point(10, 60); 
30	}
31	
32	// MAP DEFAULT LAT/LNG, this defines map centre point
33	let map_default_lat = 56.47038456889741;
34	let map_default_lng = -2.969629445666486;
35	//-2.977585" data-lat="56.45693
36
37	if ( $( '#' + map_id ).length > 0 ) {
38		//console.log( 'Map element exists' );
39		//console.log('init map normally');
40		initMap();
41	}
42	
43	
44	
45	function initMap() {
46		
47		//$( '#qb_map_list' ).addClass( 'hide' );
48		
49		map = new L.Map( map_id, {center: new L.LatLng( map_default_lat, map_default_lng ), zoom: map_default_zoom, minZoom: 1, maxZoom: 18, zoomControl: false, scrollWheelZoom: false, tap: false } );
50
51		let zoomControl = L.control.zoom({
52			position: 'bottomleft'
53		});
54		map.addControl( zoomControl );
55
56		/*var maptiles = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.{ext}', {
57			attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
58			ext: 'png'
59		});*/
60        
61        /*var maptiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
62            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
63        }).addTo(map);*/
64		
65        var maptiles = L.tileLayer('https://api.mapbox.com/styles/v1/rm-aon/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
66            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
67            id: 'clhg2m3wz00ur01o3hphb4jct',
68            accessToken: 'pk.eyJ1Ijoicm0tYW9uIiwiYSI6ImNsZmg4ajM3bTQ2cGszc250NXdvYzZ0cTgifQ.1NUt_V8_n3_LPVmz6KpDjw  '
69        }).addTo(map);
70		
71		// DEFINE BASE MAP, MAP LAYERS
72		let baseMaps = {
73			"maptiles": maptiles
74		};
75
76		map.addLayer(maptiles);
77
78		let map_items = [];
79		
80		$( '#qb_map_list > li' ).each(function( index ) {
81
82			var item_id = $( this ).attr( 'data-id' );
83			var item_lat = $( this ).attr( 'data-lat' );
84			var item_lng = $( this ).attr( 'data-lng' );
85			var item_title = $( 'strong', this ).text();
86			var item_address = $( 'span.address', this ).text();
87			var item_directions = $( 'span.directions', this ).html();
88	
89			var item_arr = [];
90			item_arr.push( item_id ); // ID
91			item_arr.push( item_lat ); // lat
92			item_arr.push( item_lng ); // lng
93			item_arr.push( item_title ); // title
94			item_arr.push( item_address );
95			item_arr.push( item_directions );
96	
97			map_items.push( item_arr );
98
99            console.log( 'item_title: ' + item_title + ' | item_lat: ' + item_lat + ' | ' + 'item_lng: ' + item_lng );
100            
101		});		
102
103		function q_urldecode(str) { // Unurlencode embed
104		   return decodeURIComponent((str+'').replace(/\+/g, '%20'));
105		}
106
107		let standard_icon = L.divIcon({
108			className: 'map-icon',
109			iconSize: [50, 60],
110			iconAnchor: [25, 10],
111			popupAnchor: [1, 0],
112			tooltipAnchor: [0, 40]
113		});
114
115		let all_markers = L.featureGroup();
116		
117		let marker_locations = new L.markerClusterGroup(
118			{ showCoverageOnHover: false, maxClusterRadius: 20, zoomToBoundsOnClick: false }
119		);
120		
121		// Object to store markers by their ID
122		let markerRegistry = {};
123		
124		function mapAddMarkers( map, map_items ) {
125			let map_width = ( $( '#'+map_id ).width() );
126			let popup_width = 250;
127
128			for ( let i = 0; i < map_items.length; i++ ) {
129				let a = map_items[i];
130				let id = a[0];
131				let lat = a[1];
132				let lng = a[2];
133				let name = a[3];
134				let address = a[4];
135				let directions = a[5];
136				
137				let popup_contents = '<div class="map_content_wrapper">';
138				popup_contents += '<h2>' + name + '</h2>';
139				popup_contents += '<p class="address">' + address + '</p>';
140				popup_contents += directions + '';
141				popup_contents += '</div>';
142				let popoptions = { 'maxWidth': popup_width, 'autoPan': true, 'autoPanPaddingTopLeft': popup_open_offset, 'keepInView': true };
143                
144                let icon_type = standard_icon;
145
146				let marker = new L.marker( new L.LatLng( lat, lng), { icon: icon_type, alt: name, id: id } );
147				let popup = L.popup( popoptions ).setContent( popup_contents );
148				marker.bindPopup( popup );
149				
150				// Store the ID on the marker itself
151				marker._markerId = id;
152
153				// Store marker in a global registry for easy access
154				markerRegistry[id] = marker;
155				
156				marker_locations.addLayer( marker );
157				
158				all_markers.addLayer( marker );
159				marker.bindTooltip( name, { permanent: false, direction: 'bottom', className: 'leaflet-tooltip' } );
160                
161                
162				
163				marker.on( 'popupopen', function() {
164					$( '#qb_map_list li' ).removeClass( 'active' );
165					$( '#qb_map_list li[data-id="' + this.options.id + '"]' ).addClass( 'active' );

166					console.log( 'Popup open: ' + this.options.id );
167				});
168				
169				marker.on( 'popupclose', function(e) {
170                    $( '#qb_map_list li' ).removeClass( 'active' );
171                });
172				
173				
174			}
175			
176			marker_locations.addTo( map );
177            
178
179		}
180		
181		if ( Array.isArray( map_items ) && map_items.length ) {
182		
183			mapAddMarkers( map, map_items );
184
185			map.fitBounds( all_markers.getBounds(), { padding: [3, 3] } );
186
187			//map.setMaxBounds( all_markers.getBounds(), { padding: [5, 5] } );
188
189		}
190
191		marker_locations.on( 'clusterclick', function (a) {
192			map.setView( a.latlng, map.getZoom() + 4 ); // Adjust zoom level as needed
193		});
194		
195		
196		$( 'body' ).on( 'click', '#qb_map_list li', function() {
197			let locationId = $( this ).attr( 'data-id' ); // Get the data-id from the clicked list item
198			let marker = markerRegistry[locationId]; // Find the corresponding marker
199			$( '#qb_map_list li' ).removeClass( 'active' );
200			$( this ).addClass( 'active' );
201			if (marker) {
202				map.setView(marker.getLatLng(), 14); // Center map on the marker with zoom
203				
204				setTimeout(function() {
205					marker.openPopup(); // Ensure popup opens after moving
206				}, 500); // Delay allows the map movement to settle before opening the popup
207				
208			}
209		});
210		
211		
212	}
213
214	
215} )( jQuery );