.elementor-19 .elementor-element.elementor-element-f1e76c4{--display:flex;--min-height:75vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--overlay-opacity:0.5;}.elementor-19 .elementor-element.elementor-element-f1e76c4:not(.elementor-motion-effects-element-type-background), .elementor-19 .elementor-element.elementor-element-f1e76c4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://asaggregates.co.uk/wp-content/uploads/2026/03/Delivery-Areas.webp");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-19 .elementor-element.elementor-element-f1e76c4::before, .elementor-19 .elementor-element.elementor-element-f1e76c4 > .elementor-background-video-container::before, .elementor-19 .elementor-element.elementor-element-f1e76c4 > .e-con-inner > .elementor-background-video-container::before, .elementor-19 .elementor-element.elementor-element-f1e76c4 > .elementor-background-slideshow::before, .elementor-19 .elementor-element.elementor-element-f1e76c4 > .e-con-inner > .elementor-background-slideshow::before, .elementor-19 .elementor-element.elementor-element-f1e76c4 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;--background-overlay:'';}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-19 .elementor-element.elementor-element-ecf5deb .elementor-heading-title{font-family:"Serpentine Pro Bold Oblique", Sans-serif;font-size:4rem;font-weight:600;color:#FFFFFF;}.elementor-19 .elementor-element.elementor-element-8b862b8{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:50px 50px;--row-gap:50px;--column-gap:50px;--margin-top:5%;--margin-bottom:5%;--margin-left:0%;--margin-right:0%;}.elementor-19 .elementor-element.elementor-element-f94b2aa{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-19 .elementor-element.elementor-element-a92f157{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-19 .elementor-element.elementor-element-1bcf62e{font-family:"filson-pro", Sans-serif;font-weight:200;color:#000000;}.elementor-19 .elementor-element.elementor-element-b62f056{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}@media(min-width:768px){.elementor-19 .elementor-element.elementor-element-f94b2aa{--width:50%;}.elementor-19 .elementor-element.elementor-element-a92f157{--width:50%;}}@media(max-width:1024px){.elementor-19 .elementor-element.elementor-element-f1e76c4{--min-height:50vh;}.elementor-19 .elementor-element.elementor-element-ecf5deb .elementor-heading-title{font-size:3rem;}}@media(max-width:767px){.elementor-19 .elementor-element.elementor-element-f1e76c4{--min-height:40vh;}.elementor-19 .elementor-element.elementor-element-ecf5deb{text-align:center;}.elementor-19 .elementor-element.elementor-element-ecf5deb .elementor-heading-title{font-size:2rem;}}/* Start custom CSS for html, class: .elementor-element-6bb3e52 */<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<style>

#deliveryMap{
height:520px;
border-radius:16px;
overflow:hidden;
margin-top:20px;
}

.postcode-check{
background:#f6f8fa;
padding:20px;
border-radius:14px;
margin-bottom:20px;
position:relative;
}

.postcode-check label{
display:block;
font-weight:600;
margin-bottom:8px;
}

.postcode-row{
display:flex;
gap:10px;
}

.postcode-row input{
flex:1;
padding:12px 14px;
border:1px solid #d0d7de;
border-radius:10px;
font-size:16px;
}

.postcode-row button{
background:#EC1C2A;
color:white;
border:none;
padding:12px 18px;
border-radius:10px;
font-weight:600;
cursor:pointer;
}

.postcode-row button:hover{
background:#c91522;
}

#postcodeSuggestions{
position:absolute;
background:white;
border:1px solid #ddd;
border-radius:8px;
width:100%;
max-height:200px;
overflow-y:auto;
z-index:1000;
display:none;
}

.suggestion{
padding:10px;
cursor:pointer;
}

.suggestion:hover{
background:#f2f2f2;
}

.postcode-result{
margin-top:10px;
font-size:14px;
}

</style>

<div class="postcode-check">

<label>Check delivery to your postcode</label>

<div class="postcode-row">
<input id="postcodeInput" type="text" placeholder="e.g. CO7 7QR"/>
<button id="postcodeBtn">Check</button>
</div>

<div id="postcodeSuggestions"></div>

<div id="postcodeResult"></div>

</div>

<div id="deliveryMap"></div>

<script>

const baseLatLng=[51.9058,0.9892];

const milesToMeters=(m)=>m*1609.344;

const map=L.map("deliveryMap",{scrollWheelZoom:false}).setView(baseLatLng,8);

L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",{
maxZoom:19
}).addTo(map);

L.marker(baseLatLng).addTo(map)
.bindPopup("<b>A&S Aggregates</b><br>Butterfly Yard<br>Colchester CO7 7QR");

const ring100=L.circle(baseLatLng,{
radius:milesToMeters(100),
color:"#6aa9ff",
weight:2,
fillColor:"#6aa9ff",
fillOpacity:0.18
}).addTo(map);

const ring50=L.circle(baseLatLng,{
radius:milesToMeters(50),
color:"#1f6feb",
weight:2,
fillColor:"#1f6feb",
fillOpacity:0.28
}).addTo(map);

map.fitBounds(ring100.getBounds(),{padding:[20,20]});

let searchMarker=null;

function distanceMeters(a,b){

const R=6371000;
const toRad=(x)=>x*Math.PI/180;

const dLat=toRad(b[0]-a[0]);
const dLon=toRad(b[1]-a[1]);

const lat1=toRad(a[0]);
const lat2=toRad(b[0]);

const h=
Math.sin(dLat/2)**2+
Math.cos(lat1)*Math.cos(lat2)*
Math.sin(dLon/2)**2;

return 2*R*Math.asin(Math.sqrt(h));

}

async function geocodePostcode(postcode){

const res=await fetch(`https://api.postcodes.io/postcodes/${postcode}`);

const data=await res.json();

if(data.status!==200) return null;

return [data.result.latitude,data.result.longitude];

}

async function handlePostcodeCheck(){

const input=document.getElementById("postcodeInput");

const postcode=input.value.trim().toUpperCase();

if(!postcode){

setResult("Please enter a postcode");

return;

}

setResult("Checking...");

const latLng=await geocodePostcode(postcode);

if(!latLng){

setResult("Postcode not found");

return;

}

if(searchMarker) map.removeLayer(searchMarker);

searchMarker=L.marker(latLng).addTo(map).bindPopup(postcode).openPopup();

map.setView(latLng,9);

const d=distanceMeters(baseLatLng,latLng);

const miles=d/1609.344;

if(d<=milesToMeters(50)){

setResult(`<span style="color:#1a7f37;font-weight:600;">✔ Within our 50 mile delivery area</span><br>${miles.toFixed(1)} miles from depot`);

}
else if(d<=milesToMeters(100)){

setResult(`<span style="color:#1a7f37;font-weight:600;">✔ Within our extended 100 mile delivery area</span><br>${miles.toFixed(1)} miles from depot`);

}
else{

setResult(`<span style="color:#d1242f;font-weight:600;">Outside our standard delivery area</span><br>${miles.toFixed(1)} miles from depot`);

}

}

function setResult(html){

document.getElementById("postcodeResult").innerHTML=html;

}

const input=document.getElementById("postcodeInput");
const suggestions=document.getElementById("postcodeSuggestions");

input.addEventListener("input",async function(){

const query=input.value.trim();

if(query.length<3){

suggestions.style.display="none";

return;

}

const res=await fetch(`https://api.postcodes.io/postcodes?q=${query}`);

const data=await res.json();

suggestions.innerHTML="";

data.result.slice(0,5).forEach(pc=>{

const div=document.createElement("div");

div.className="suggestion";

div.textContent=pc.postcode;

div.onclick=()=>{

input.value=pc.postcode;

suggestions.style.display="none";

};

suggestions.appendChild(div);

});

suggestions.style.display="block";

});

document.getElementById("postcodeBtn").addEventListener("click",handlePostcodeCheck);

input.addEventListener("keydown",function(e){

if(e.key==="Enter") handlePostcodeCheck();

});

</script>/* End custom CSS */
/* Start JX Custom Fonts CSS *//* End JX Custom Fonts CSS */
/* Start JX Custom Fonts CSS *//* End JX Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Serpentine Pro Bold Oblique';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://asaggregates.co.uk/wp-content/uploads/2026/03/Serpentine-BoldOblique.ttf') format('truetype');
}
/* End Custom Fonts CSS */