diff --git a/README.md b/README.md new file mode 100644 index 0000000..b1426d1 --- /dev/null +++ b/README.md @@ -0,0 +1,11 @@ +# California State Parks Explorer + +This is a simple web app that displays an interactive map of some California State Parks. Click on a marker to view details about a park and record the date of your visit. The visit information is stored in your browser using `localStorage`. + +## Adding More Parks + +The sample data in `main.js` contains only a few parks. To add more, edit the `parks` array in `main.js` with the name, latitude, longitude, and description for each park. + +## Running + +Open `index.html` in your browser. The page uses Leaflet via a CDN, so an internet connection is required. diff --git a/index.html b/index.html new file mode 100644 index 0000000..5f5cb5c --- /dev/null +++ b/index.html @@ -0,0 +1,27 @@ + + + + + + California State Parks Explorer + + + + +
+

California State Parks Explorer

+
+
+
+

Park Details

+
+ + +
+ + + + diff --git a/main.css b/main.css new file mode 100644 index 0000000..b03abb4 --- /dev/null +++ b/main.css @@ -0,0 +1,39 @@ +body { + font-family: "Helvetica Neue", Arial, sans-serif; + margin: 0; + padding: 0; + background: #f8f7f2; + color: #333; +} + +header { + background: #4caf50; + color: white; + padding: 1rem; + text-align: center; +} + +#map { + height: 70vh; +} + +#details { + padding: 1rem; + background: #fff9e5; +} + +#park-info { + margin-bottom: 1rem; +} + +button { + background: #4caf50; + color: white; + border: none; + padding: 0.5rem 1rem; + cursor: pointer; +} + +button:hover { + background: #3e8e41; +} diff --git a/main.js b/main.js new file mode 100644 index 0000000..16b3472 --- /dev/null +++ b/main.js @@ -0,0 +1,55 @@ +// Simple dataset of some California state parks +const parks = [ + { + name: 'Big Basin Redwoods State Park', + lat: 37.1728, + lon: -122.2225, + description: 'Home to ancient coast redwoods and lush trails.' + }, + { + name: 'Anza-Borrego Desert State Park', + lat: 33.2550, + lon: -116.3760, + description: 'California\'s largest state park with desert landscapes.' + }, + { + name: 'Emerald Bay State Park', + lat: 38.9547, + lon: -120.0980, + description: 'Scenic views of Lake Tahoe and historic sites.' + } +]; + +const map = L.map('map').setView([36.7783, -119.4179], 6); + +L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { + attribution: '© OpenStreetMap contributors' +}).addTo(map); + +const visited = JSON.parse(localStorage.getItem('visited-parks') || '{}'); + +function saveVisited(parkName, date) { + visited[parkName] = date; + localStorage.setItem('visited-parks', JSON.stringify(visited)); +} + +function showParkDetails(park) { + const info = document.getElementById('park-info'); + info.innerHTML = ` +

${park.name}

+

${park.description}

+

Visited: ${visited[park.name] || 'Not yet'}

+ `; + document.getElementById('save-visit').onclick = () => { + const date = document.getElementById('visit-date').value; + if (date) { + saveVisited(park.name, date); + showParkDetails(park); + } + }; +} + +parks.forEach(park => { + const marker = L.marker([park.lat, park.lon]).addTo(map); + marker.on('click', () => showParkDetails(park)); +});