<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Bachelor Party Map: Harrisburg, PA (Final)</title>
<!-- Leaflet.js CSS for the map styling -->
<link rel="stylesheet" href="https://unpkg.com/
[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
<style>
/* Basic page styling */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.header {
background-color: #333;
color: white;
padding: 10px 20px;
text-align: center;
}
/* Set the size of the map container */
#map {
height: 80vh; /* 80% of the viewport height */
width: 100%;
}
/* Styling for the pop-up windows on the map */
.leaflet-popup-content-wrapper {
border-radius: 5px;
}
.leaflet-popup-content h3 {
margin: 0 0 10px;
color: #333;
border-bottom: 1px solid #ddd;
padding-bottom: 5px;
}
.leaflet-popup-content p {
margin: 5px 0;
}
/* Legend styling */
.legend {
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
background: white;
background: rgba(255,255,255,0.8);
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px;
line-height: 18px;
color: #555;
}
.legend i {
width: 18px;
height: 18px;
float: left;
margin-right: 8px;
opacity: 0.9;
border-radius: 50%;
}
.disclaimer {
text-align: center;
font-size: 0.8em;
color: #666;
padding: 10px;
}
</style>
</head>
<body>
<div class="header">
<h1>Harrisburg Bachelor Party Map</h1>
<p>An interactive guide for a memorable weekend. Click the pins for details!</p>
</div>
<!-- The div where the map will be rendered -->
<div id="map"></div>
<div class="disclaimer">
<p><strong>Disclaimer:</strong> Information like hours and phone numbers can change. Please call ahead to confirm details.</p>
</div>
<!-- Leaflet.js JavaScript library -->
<script src="https://unpkg.com/
[email protected]/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script>
// 1. Initialize the Map
const map = L.map('map').setView([40.2732, -76.8867], 12); // Re-centered zoom
// 2. Add a Tile Layer
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// 3. Define Categories and Colors
const categoryColors = {
'Activity': '#007bff', // Blue
'Restaurant': '#28a745', // Green
'Bar / Brewery': '#dc3545', // Red
'Relaxed / Unique': '#6f42c1' // Purple
};
// 4. Location Data (Final)
const locations = [
// --- ACTIVITIES ---
{
name: "Axecessive Force Axe Throwing",
category: "Activity",
address: "5242 E Trindle Rd, Mechanicsburg, PA 17050",
phone: "(717) 409-5093",
lat: 40.222930,
lon: -76.992670,
description: "A classic bachelor party activity. Hurl some axes and compete with the group."
},
{
name: "Autobahn Indoor Speedway",
category: "Activity",
address: "1001 Bosler Ave, Lemoyne, PA 17043",
phone: "(717) 458-7174",
lat: 40.245810,
lon: -76.903820,
description: "High-speed indoor electric go-karts. Great for some friendly competition."
},
{
name: "FNB Field (Harrisburg Senators)",
category: "Activity",
address: "245 Championship Way, Harrisburg, PA 17101",
phone: "(717) 231-4444",
lat: 40.252030,
lon: -76.883390,
description: "Catch a Minor League Baseball game for a relaxed afternoon or evening. (Seasonal)"
},
{
name: "Hollywood Casino at Penn National",
category: "Activity",
address: "777 Hollywood Blvd, Grantville, PA 17028",
phone: "(717) 469-2211",
lat: 40.395720,
lon: -76.626770,
description: "Casino games, horse racing, sports betting, and restaurants. A bit of a drive but a full-service destination."
},
{
name: "Dauphin Highlands Golf Course",
category: "Activity",
address: "650 S Harrisburg St, Harrisburg, PA 17113",
phone: "(717) 939-4653",
lat: 40.227560,
lon: -76.837850,
description: "One of the best public golf courses in the region. A fantastic option for a classic golf outing."
},
{
name: "Keystone Armory",
category: "Activity",
address: "830 N Hanover St, Elizabethtown, PA 17022",
phone: "(717) 367-1100",
lat: 40.165480,
lon: -76.598280,
description: "Modern indoor shooting range. Rent firearms and get some target practice in. A safe and exciting group event."
},
{
name: "Capital City Golf & Entertainment",
category: "Activity",
address: "7000 Linglestown Rd, Harrisburg, PA 17112",
phone: "(717) 991-5666",
lat: 40.322950,
lon: -76.782050,
description: "Golf simulators (like Topgolf), a bar, and food. Perfect for any weather and caters to all skill levels."
},
{
name: "Roundtop Mountain Resort",
category: "Activity",
address: "925 Roundtop Rd, Lewisberry, PA 17339",
phone: "(717) 432-9631",
lat: 40.088650,
lon: -76.946390,
description: "Offers paintball, zip-lining, and other outdoor adventures during warmer months. Great for an active crew."
},
// --- RESTAURANTS ---
{
name: "1700 Degrees Steakhouse",
category: "Restaurant",
address: "1 N 2nd St, Harrisburg, PA 17101",
phone: "(717) 237-6400",
lat: 40.262100,
lon: -76.883850,
description: "Upscale steakhouse perfect for the main bachelor party dinner. Reservations highly recommended."
},
{
name: "The Millworks",
category: "Restaurant",
address: "340 Verbeke St, Harrisburg, PA 17102",
phone: "(717) 695-4888",
lat: 40.272160,
lon: -76.888560,
description: "Fantastic restaurant, brewery, and art gallery in one. A vibrant and popular spot."
},
{
name: "Federal Taphouse",
category: "Restaurant",
address: "234 N 2nd St, Harrisburg, PA 17101",
phone: "(717) 525-8077",
lat: 40.264660,
lon: -76.884780,
description: "Huge tap list (100+ beers) and great food. A solid choice for a more casual meal on Restaurant Row."
},
{
name: "Knead Pizza",
category: "Restaurant",
address: "937 N 3rd St, Harrisburg, PA 17102",
phone: "(717) 238-2321",
lat: 40.272020,
lon: -76.887010,
description: "Excellent, handcrafted pizzas with fresh ingredients. Great for a casual group dinner."
},
{
name: "Official BBQ and Burgers",
category: "Restaurant",
address: "6295 Lyters Ln, Harrisburg, PA 17111",
phone: "(717) 695-2575",
lat: 40.287800,
lon: -76.817570,
description: "Top-notch BBQ and burgers. A no-frills spot perfect for a hearty and satisfying group lunch."
},
{
name: "Home 231",
category: "Restaurant",
address: "231 North St, Harrisburg, PA 17101",
phone: "(717) 232-4663",
lat: 40.265500,
lon: -76.885620,
description: "The go-to spot for brunch. Excellent food and cocktails to recover from the night before."
},
{
name: "McGrath's Irish Pub",
category: "Restaurant",
address: "202 Locust St, Harrisburg, PA 17101",
phone: "(717) 232-9914",
lat: 40.262520,
lon: -76.882650,
description: "A downtown Harrisburg staple. Authentic Irish pub atmosphere, great for pints and pub grub."
},
// --- BARS / BREWERIES ---
{
name: "Tröegs Independent Brewing",
category: "Bar / Brewery",
address: "200 E Hersheypark Dr, Hershey, PA 17033",
phone: "(717) 534-1297",
lat: 40.288590,
lon: -76.666710,
description: "World-famous brewery in nearby Hershey. A must-visit for any beer lover. Take the self-guided tour."
},
{
name: "Appalachian Brewing Company",
category: "Bar / Brewery",
address: "50 N Cameron St, Harrisburg, PA 17101",
phone: "(717) 221-1080",
lat: 40.264250,
lon: -76.878580,
description: "A Harrisburg institution. Great craft beer and pub food in a historic building."
},
{
name: "Sturges Speakeasy",
category: "Bar / Brewery",
address: "400 Forster St, Harrisburg, PA 17102",
phone: "(717) 412-0925",
lat: 40.269220,
lon: -76.886000,
description: "Cool, relaxed vibe with great cocktails and a rooftop deck."
},
// --- RELAXED / UNIQUE ---
{
name: "Tinder Box at Town Center",
category: "Relaxed / Unique",
address: "4715 Gettysburg Rd, Mechanicsburg, PA 17055",
phone: "(717) 737-7729",
lat: 40.224760,
lon: -76.979600,
description: "A classic cigar lounge. Perfect for a more relaxed, sophisticated break for the group."
},
{
name: "Escape Room Harrisburg",
category: "Relaxed / Unique",
address: "23 S 2nd St, Harrisburg, PA 17101",
phone: "(717) 635-8576",
lat: 40.261860,
lon: -76.883390,
description: "A fun, team-based puzzle activity to kick things off before hitting the bars."
},
{
name: "Pride of the Susquehanna Riverboat",
category: "Relaxed / Unique",
address: "11 Championship Way, Harrisburg, PA 17101",
phone: "(717) 234-6500",
lat: 40.252800,
lon: -76.884500,
description: "Enjoy a scenic cruise on the Susquehanna River. A very relaxed way to see the city skyline with a drink in hand. (Seasonal, check schedule)"
},
{
name: "Midstate Distillery",
category: "Relaxed / Unique",
address: "1817 N Cameron St, Harrisburg, PA 17103",
phone: "(717) 745-5900",
lat: 40.280100,
lon: -76.885800,
description: "Harrisburg's first distillery since Prohibition. Take a tour and sample locally crafted spirits like whiskey, gin, and vodka."
},
{
name: "Harrisburg Midtown Arts Center (HMAC)",
category: "Relaxed / Unique",
address: "1110 N 3rd St, Harrisburg, PA 17102",
phone: "(717) 412-4342",
lat: 40.273600,
lon: -76.887600,
description: "A sprawling arts and entertainment complex with a restaurant, multiple bars, and live music venues. Check their schedule for a concert or show."
},
{
name: "Gamut Arcade Bar",
category: "Relaxed / Unique",
address: "10 S 4th St, Harrisburg, PA 17101",
phone: "(717) 238-4444",
lat: 40.262500,
lon: -76.879800,
description: "A retro 'barcade' with classic arcade games and pinball machines. Relive your youth with a beer in hand. A great place to start or end the night."
}
];
// Function to create a custom colored marker icon using SVG
function createColoredIcon(color) {
const markerHtml = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style="fill:${color}; stroke: black; stroke-width: 1px; opacity: 0.9;">
<path d="M16 0 C9.37 0 4 5.37 4 12 C4 18.63 16 32 16 32 S28 18.63 28 12 C28 5.37 22.63 0 16 0 Z"/>
<circle cx="16" cy="12" r="4" fill="white"/>
</svg>`;
return L.divIcon({
html: markerHtml,
className: 'custom-svg-icon',
iconSize: [30, 42],
iconAnchor: [15, 42],
popupAnchor: [0, -42]
});
}
// 5. Add Markers to the Map
locations.forEach(location => {
const iconColor = categoryColors[location.category];
const marker = L.marker([location.lat, location.lon], {
icon: createColoredIcon(iconColor)
}).addTo(map);
const popupContent = `
<h3>${location.name}</h3>
<p><strong>Category:</strong> ${location.category}</p>
<p><strong>Address:</strong> ${location.address}</p>
<p><strong>Phone:</strong> ${location.phone}</p>
<p><em>${location.description}</em></p>
`;
marker.bindPopup(popupContent);
});
// 6. Create and Add the Legend
const legend = L.control({position: 'bottomright'});
legend.onAdd = function (map) {
const div = L.DomUtil.create('div', 'info legend');
const categories = Object.keys(categoryColors);
div.innerHTML += '<h4>Categories</h4>';
for (let i = 0; i < categories.length; i++) {
div.innerHTML +=
'<i style="background:' + categoryColors[categories[i]] + '"></i> ' +
categories[i] + '<br>';
}
return div;
};
legend.addTo(map);
</script>
</body>
</html>