test

', iconSize: [34, 34], iconAnchor: [17, 17], popupAnchor: [0, -17] }); const markers = []; const searchInput = document.getElementById('dealer-search'); const statsText = document.getElementById('stats-text'); // Render Markers function renderMarkers(filteredDealers) { // Clear existing markers from map markers.forEach(m => map.removeLayer(m)); markers.length = 0; // Clear the array // English text const dealerWord = filteredDealers.length === 1 ? 'Authorized Dealer' : 'Authorized Dealers'; statsText.textContent = `${filteredDealers.length} ${dealerWord}`; if (filteredDealers.length === 0) { // Option to display "No results" on the map is possible, // but often cluttering. Just fitting bounds works well. return; } const bounds = L.latLngBounds(); filteredDealers.forEach((dealer) => { // Add Marker const marker = L.marker([dealer.lat, dealer.lng], { icon: customIcon }).addTo(map); // Popup Content (English, Link Magenta) const popupContent = ` `; marker.bindPopup(popupContent); markers.push(marker); bounds.extend([dealer.lat, dealer.lng]); }); // Fit bounds based on filtered results if (filteredDealers.length > 1) { // map.fitBounds(bounds, { padding: [100, 100], maxZoom: 5 }); } else if (filteredDealers.length === 1) { map.flyTo([filteredDealers[0].lat, filteredDealers[0].lng], 6); } else { // Reset to world view if empty search map.setView([35, 10], 2); } } // Initial Render renderMarkers(dealers); // Search Functionality (Filters markers directly) searchInput.addEventListener('input', (e) => { const term = e.target.value.toLowerCase(); const filtered = dealers.filter(d => d.name.toLowerCase().includes(term) || d.address.toLowerCase().includes(term) ); renderMarkers(filtered); }); });