diff --git a/public/index2.html b/public/index2.html
new file mode 100644
index 0000000000000000000000000000000000000000..9e9005495ad744bb1a016af6fa2a424bfd3f1dc7
--- /dev/null
+++ b/public/index2.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Study Areas Map</title>
+ <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
+ <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
+ <style>
+ html, body {
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ }
+
+ #map {
+ height: 100vh;
+ width: 100vw;
+ }
+ </style>
+</head>
+<body>
+ <div id="map"></div>
+
+ <script>
+ const map = L.map('map').setView([48.78039307145523, 9.172929033104959], 13);
+
+ // Add OSM base map
+ L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+ maxZoom: 19,
+ }).addTo(map);
+
+ // Define custom icon
+ const customIcon = L.icon({
+ iconUrl: 'images/marker-icon.png', // Path to your custom marker image
+ iconSize: [32, 32], // Size of the icon
+ iconAnchor: [16, 32], // Point of the icon which will correspond to marker's location
+ popupAnchor: [0, -32] // Point from which the popup should open relative to the iconAnchor
+ });
+
+ // Function to load pins from CSV and add them to the map
+ function loadPins() {
+ console.log("Attempting to load CSV file...");
+ Papa.parse('pins.csv', {
+ download: true,
+ header: true,
+ complete: function(results) {
+ console.log("CSV file loaded:", results);
+ results.data.forEach(pin => {
+ if (pin.lat && pin.lng && pin.name && pin.color) {
+ const marker = L.marker([parseFloat(pin.lat), parseFloat(pin.lng)], {
+ icon: customIcon // Use the custom icon here
+ }).addTo(map);
+
+ marker.bindPopup(`<b>${pin.name}</b>`);
+ } else {
+ console.warn("Invalid pin data:", pin);
+ }
+ });
+ },
+ error: function(error) {
+ console.error("Error loading CSV file:", error);
+ }
+ });
+ }
+
+ // Call the function to load pins from the CSV
+ loadPins();
+ </script>
+</body>
+</html>