mapping-project/index.html at main · AugustaDevs/mapping-project · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<html>
    <head>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
        integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
        crossorigin=""/>
        <link rel="stylesheet" href="style.css">
        <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
        integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
        crossorigin=""></script>
    </head>
    <body>
        <div id="map"></div>
        <script>
            // Bounds for the map:
            const bounds = L.latLngBounds(
                L.latLng(33.46041, -81.95071), // Southwest corner
                L.latLng(33.48457, -81.98371) // Northeast corner
            );

            let map = L.map('map', {
                center: [33.47373,-81.96762],
                zoom: 15,
                maxBounds: bounds,
                maxBoundsViscosity: 1.0, // Prevents panning outside bounds
                zoomControl: false, // Removes zoom buttons for cleaner look
                // dragging: false // This doesn't adjust with zoom, so folks can't see whole map at zoom
            }
            ).setView([33.47718, -81.97114], 15);

            // Define multiple artistic tile layers (all free, no API key required)
            const tileLayers = {
                // CartoDB styles - free and artistic
                dark: L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
                    maxZoom: 19,
                    attribution: '&copy; OpenStreetMap contributors &copy; CARTO',
                    subdomains: 'abcd'
                }),

                voyager: L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', {
                    maxZoom: 19,
                    attribution: '&copy; OpenStreetMap contributors &copy; CARTO',
                    subdomains: 'abcd'
                }),

                positron: L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
                    maxZoom: 19,
                    attribution: '&copy; OpenStreetMap contributors &copy; CARTO',
                    subdomains: 'abcd'
                }),

                // OpenStreetMap variants
                osm: L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    maxZoom: 19,
                    attribution: '&copy; OpenStreetMap contributors'
                }),

                // Esri satellite imagery - very artistic!
                satellite: L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
                    maxZoom: 19,
                    attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
                })
            };

            // Start with voyager theme - chill and artistic without being too dark
            tileLayers.voyager.addTo(map);

            // Add layer control for easy switching
            L.control.layers({
                "🗺️ Voyager": tileLayers.voyager,
                "☀️ Light Theme": tileLayers.positron,
                "🛰️ Satellite": tileLayers.satellite,
                "🌙 Dark Theme": tileLayers.dark,
                "📍 Standard": tileLayers.osm
            }).addTo(map);

            // Temporary marker for placing pins
            let tempMarker = null;

            // Click event to place temporary marker and show coordinates
            map.on('click', function(e) {
                const lat = e.latlng.lat.toFixed(6);
                const lng = e.latlng.lng.toFixed(6);

                // Remove previous temporary marker if it exists
                if (tempMarker) {
                    map.removeLayer(tempMarker);
                }

                // Add new temporary marker with emoji
                tempMarker = L.marker([lat, lng], {
                    icon: createEmojiMarker('📍', 30)
                })
                    .addTo(map)
                    .bindPopup(`
                        <div style="text-align: center;">
                            <h3>📍 Coordinates</h3>
                            <p><strong>Latitude:</strong> ${lat}</p>
                            <p><strong>Longitude:</strong> ${lng}</p>
                            <p><small>Click anywhere else to place a new pin</small></p>
                            <button onclick="copyCoordinates('${lat}, ${lng}')">Copy Coordinates</button>
                        </div>
                    `)
                    .openPopup();

                // Also log to console for easy copying
                console.log(`Coordinates: ${lat}, ${lng}`);
            });

            // Function to copy coordinates to clipboard
            window.copyCoordinates = function(coords) {
                navigator.clipboard.writeText(coords).then(function() {
                    alert('Coordinates copied to clipboard: ' + coords);
                }).catch(function() {
                    // Fallback for older browsers
                    const textArea = document.createElement('textarea');
                    textArea.value = coords;
                    document.body.appendChild(textArea);
                    textArea.select();
                    document.execCommand('copy');
                    document.body.removeChild(textArea);
                    alert('Coordinates copied to clipboard: ' + coords);
                });
            };

            // Create custom emoji markers
            function createEmojiMarker(emoji, size = 30) {
                return L.divIcon({
                    html: `<div style="font-size: ${size}px; text-align: center; line-height: 1;">${emoji}</div>`,
                    iconSize: [size, size],
                    iconAnchor: [size/2, size/2],
                    popupAnchor: [0, -size/2],
                    className: 'emoji-marker'
                });
            }

            // Add marker for Book Tavern (temporary - will be updated with correct coordinates)
            const bookTavernMarker = L.marker([33.476753, -81.970893], {
                icon: createEmojiMarker('📚', 35)
            })
                .addTo(map)
                .bindPopup(`
                    <div style="text-align: center;">
                        <h3>📚The Book Tavern</h3>
                        <p><strong>978 Broad Street</strong></p>
                        <p>Augusta, GA 30901</p>
                        <p>Bookstore</p>
                        <p><em>Downtown Augusta</em></p>
                        <p><small style="color: red;">Coordinates need to be updated</small></p>
                    </div>
                `);

            // Add marker for Boll Weevil
            const bollWeevilMarker = L.marker([33.478082, -81.966172], {
                icon: createEmojiMarker('🐛', 35)
            })
                .addTo(map)
                .bindPopup(`
                    <div style="text-align: center;">
                        <h3>🐛 Boll Weevil Cafe & Sweetery</h3>
                        <p><strong>Broad Street</strong></p>
                        <p>Augusta, GA</p>
                        <p>Restaurant & Cafe</p>
                        <p><em>Downtown Augusta</em></p>
                        <p><small style="color: red;">Coordinates need to be updated with exact location</small></p>
                    </div>
                `);
        </script>
    </body>
</html>