Historic Ipswich Guide
body { font-family: sans-serif; margin: 0; padding: 0; }
#map { height: 70vh; width: 100%; }
#info { padding: 1em; }
button { padding: 0.6em 1em; margin-top: 0.5em; border: none; background: #2c7be5; color: white; border-radius: 6px; cursor: pointer; }
button:hover { background: #1a5bb8; }
Historic Ipswich Guide
Tap the button to find the nearest historic landmark.
What’s here?
// Example dataset: replace/add all Ipswich landmarks here
const landmarks = [
{ name: “John Whipple House”, lat: 42.6792, lng: -70.8416, url: “https://historicipswich.net/whipple-house/” },
{ name: “Heard House”, lat: 42.6788, lng: -70.8419, url: “https://historicipswich.net/heard-house/” },
{ name: “South Green”, lat: 42.6729, lng: -70.8421, url: “https://historicipswich.net/south-green/” }
];
const map = L.map(‘map’).setView([42.6792, -70.8416], 15);
L.tileLayer(‘https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png’, {
attribution: ‘© OpenStreetMap contributors’
}).addTo(map);
landmarks.forEach(l => {
L.marker([l.lat, l.lng]).addTo(map).bindPopup(`${l.name}
Learn more`);
});
function haversine(lat1, lon1, lat2, lon2) {
const R = 6371e3;
const toRad = x => x * Math.PI / 180;
const dLat = toRad(lat2 – lat1);
const dLon = toRad(lon2 – lon1);
const a = Math.sin(dLat/2)**2 + Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLon/2)**2;
return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 – a));
}
function locateUser() {
if (!navigator.geolocation) {
alert(“Geolocation not supported”);
return;
}
navigator.geolocation.getCurrentPosition(pos => {
const { latitude, longitude } = pos.coords;
L.marker([latitude, longitude], {color: ‘blue’}).addTo(map).bindPopup(“You are here”).openPopup();
map.setView([latitude, longitude], 16);
let nearest = null;
let minDist = Infinity;
landmarks.forEach(l => {
const d = haversine(latitude, longitude, l.lat, l.lng);
if (d < minDist) {
minDist = d;
nearest = l;
}
});
if (nearest) {
document.getElementById('result').innerHTML = `
${nearest.name}
`;
}
Historic Ipswich 