LOOKING FOR A DISTRIBUTOR?
Looking For A
Distributor?
#asl-storelocator.asl-p-cont .Status_filter .onoffswitch-inner::before{content: "OPEN" !important}
#asl-storelocator.asl-p-cont .Status_filter .onoffswitch-inner::after{content: "ALL" !important}
#asl-storelocator.container.storelocator-main.asl-p-cont .asl-loc-sec .asl-panel {order: 0;}
Loading…
{{if path}}
{{/if}}
{{if dist_str}}
{{if description_2}}
{{/if}}
{{if path}}
{{/if}}
Search Location
Loading…{{:title}}
{{:address}}
{{if phone}}{{:phone}}
{{/if}} {{if email}} {{/if}} {{if c_names}}{{:c_names}}
{{/if}} {{if open_hours}}{{:open_hours}}
{{/if}} {{if str_brand}}{{:str_brand}}
{{/if}}
{{:dist_str}}
{{/if}}
{{:title}}
{{if path}}
{{/if}}
{{if dist_str}}
Distance: {{:dist_str}}
{{/if}}
Pin Locator Guide
#leafletMapWrap {
padding: 20px;
background: #f1f1f1;
border-radius: 10px;
margin-bottom: 20px;
}
#leafletMap {
height: 500px;
width: 100%;
border-radius: 10px;
}
.search-box {
margin-bottom: 10px;
display: flex;
}
.search-box input {
width: 100%;
padding: 10px;
border-radius: 6px 0 0 6px;
border: 1px solid #ccc;
outline: none;
}
.search-box button {
padding: 10px 20px;
background: #f60;
color: #fff;
border: none;
border-radius: 0 6px 6px 0;
cursor: pointer;
font-weight: bold;
}
.loading-box {
text-align: center;
margin-top: 10px;
}
Loading…
// ===============================
// INITIALIZE MAP
// ===============================
var map = L.map('leafletMap').setView([23.0225, 72.5714], 5);
// Free OSM layer
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19
}).addTo(map);
// ===============================
// CUSTOM ICONS
// ===============================
var userIcon = L.icon({
iconUrl: "https://maps.google.com/mapfiles/ms/icons/blue-dot.png",
iconSize: [32, 32]
});
var distributorIcon = L.icon({
iconUrl: "https://maps.google.com/mapfiles/ms/icons/red-dot.png",
iconSize: [32, 32]
});
var websiteIcon = L.icon({
iconUrl: "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
iconSize: [32, 32]
});
// ===============================
// WEBSITE LOCATION (DELHI)
// ===============================
L.marker([28.6139, 77.2090], { icon: websiteIcon })
.addTo(map)
.bindPopup("Website Location
Delhi"); // =============================== // DISTRIBUTOR LOCATIONS // =============================== var locations = [ { name: "test 1", lat: 23.0225, lng: 72.5714 }, { name: "test 2", lat: 22.3072, lng: 73.1812 }, { name: "test 3", lat: 19.0760, lng: 72.8777 }, { name: "test 4", lat: 28.7041, lng: 77.1025 }, { name: "test 5", lat: 26.9124, lng: 75.7873 }, { name: "test 6", lat: 21.1702, lng: 72.8311 }, { name: "test 7", lat: 25.5941, lng: 85.1376 }, { name: "test 8", lat: 13.0827, lng: 80.2707 }, { name: "test 9", lat: 12.9716, lng: 77.5946 }, { name: "test 10", lat: 17.3850, lng: 78.4867 } ]; locations.forEach(function(loc) { L.marker([loc.lat, loc.lng], { icon: distributorIcon }) .addTo(map) .bindPopup("" + loc.name + ""); }); // =============================== // USER CURRENT LOCATION (BLUE) // =============================== if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(pos) { var lat = pos.coords.latitude; var lng = pos.coords.longitude; L.marker([lat, lng], { icon: userIcon }) .addTo(map) .bindPopup("Your Current Location") .openPopup(); map.setView([lat, lng], 8); }); } // =============================== // SEARCH FUNCTIONALITY // =============================== function searchLeafletLocation() { var input = document.getElementById("searchLocation").value; if (!input) return; document.getElementById("mapLoading").style.display = "block"; fetch("https://nominatim.openstreetmap.org/search?format=json&q=" + input) .then(response => response.json()) .then(data => { if (data.length > 0) { var lat = data[0].lat; var lon = data[0].lon; map.setView([lat, lon], 12); L.marker([lat, lon]).addTo(map) .bindPopup("Search Result").openPopup(); } else { alert("Location not found!"); } }) .finally(() => { document.getElementById("mapLoading").style.display = "none"; }); }
Loading…
Delhi"); // =============================== // DISTRIBUTOR LOCATIONS // =============================== var locations = [ { name: "test 1", lat: 23.0225, lng: 72.5714 }, { name: "test 2", lat: 22.3072, lng: 73.1812 }, { name: "test 3", lat: 19.0760, lng: 72.8777 }, { name: "test 4", lat: 28.7041, lng: 77.1025 }, { name: "test 5", lat: 26.9124, lng: 75.7873 }, { name: "test 6", lat: 21.1702, lng: 72.8311 }, { name: "test 7", lat: 25.5941, lng: 85.1376 }, { name: "test 8", lat: 13.0827, lng: 80.2707 }, { name: "test 9", lat: 12.9716, lng: 77.5946 }, { name: "test 10", lat: 17.3850, lng: 78.4867 } ]; locations.forEach(function(loc) { L.marker([loc.lat, loc.lng], { icon: distributorIcon }) .addTo(map) .bindPopup("" + loc.name + ""); }); // =============================== // USER CURRENT LOCATION (BLUE) // =============================== if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(pos) { var lat = pos.coords.latitude; var lng = pos.coords.longitude; L.marker([lat, lng], { icon: userIcon }) .addTo(map) .bindPopup("Your Current Location") .openPopup(); map.setView([lat, lng], 8); }); } // =============================== // SEARCH FUNCTIONALITY // =============================== function searchLeafletLocation() { var input = document.getElementById("searchLocation").value; if (!input) return; document.getElementById("mapLoading").style.display = "block"; fetch("https://nominatim.openstreetmap.org/search?format=json&q=" + input) .then(response => response.json()) .then(data => { if (data.length > 0) { var lat = data[0].lat; var lon = data[0].lon; map.setView([lat, lon], 12); L.marker([lat, lon]).addTo(map) .bindPopup("Search Result").openPopup(); } else { alert("Location not found!"); } }) .finally(() => { document.getElementById("mapLoading").style.display = "none"; }); }
