bluff.estate/index.html at main · Dayah/bluff.estate · 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
<!doctype html>
<html>

<head>
    <title>849 Bluff Dr Parking</title>
    <script defer data-domain="bluff.estate" src="https://plausible.io/js/script.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Immersive House Navigation</title>
    <style>
        body,
        html {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        #map {
            width: 100%;
            height: 100%;
        }

        .input-container {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 1000;
            background: white;
            padding: 10px;
            border-radius: 5px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        input {
            width: 300px;
            padding: 5px;
        }
    </style>
    <link href='https://api.mapbox.com/mapbox-gl-js/v3.9.1/mapbox-gl.css' rel='stylesheet' />
</head>

<body>
    <div id="map"></div>

    <script src="https://api.mapbox.com/mapbox-gl-js/v3.9.1/mapbox-gl.js"></script>
    <script>
        // Mapbox Access Token
        mapboxgl.accessToken = 'pk.eyJ1IjoicHRhYmxlIiwiYSI6ImNtNTF4Nnk2YzF1cmoycXBrdDljanM3YzQifQ.C4Iq-EW_DvB-UWVZdjSagg'; // Replace with your Mapbox token

        // House location coordinates
        const houseLocation = [-83.95866,35.93985]; // Replace with your house's longitude, latitude

        // Initialize Map
        const map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/satellite-v9', // Latest Mapbox Standard style
            center: [-83.96081871256212,35.939880517597],
            zoom: 18, // Adjust initial zoom level
            pitch: 45, // Tilt for 3D perspective
            bearing: 90,
        });

        // Load 3D Buildings and Custom Layers
        map.on('load', () => {
            // Add terrain source and set terrain
            map.addSource('mapbox-dem', {
                'type': 'raster-dem',
                'url': 'mapbox://mapbox.terrain-rgb',
                'tileSize': 512,
                'maxzoom': 18
            });
            map.setTerrain({ 'source': 'mapbox-dem', 'exaggeration': 1 });

            // Add 3D buildings
            map.addLayer({
                id: '3d-buildings',
                source: 'composite',
                'source-layer': 'building',
                type: 'fill-extrusion',
                minzoom: 15,
                paint: {
                    'fill-extrusion-color': '#aaa',
                    'fill-extrusion-height': ['get', 'height'],
                    'fill-extrusion-base': ['get', 'min_height'],
                    'fill-extrusion-opacity': 0.6,
                },
            });

            // Add custom orthophoto (replace with your image and coordinates)
            map.addSource('orthophoto', {
                type: 'image',
                url: 'https://bluff.estate/parking.jpg', // Replace with your orthophoto URL
                coordinates: [
                    [-83.95942, 35.93949], // Top-left
                    [-83.95917, 35.94056], // Top-right
                    [-83.95786, 35.94025], // Bottom-right
                    [-83.95823, 35.93925], // Bottom-left
                ],
            });
            map.addLayer({
                id: 'orthophoto-layer',
                source: 'orthophoto',
                type: 'raster',
                paint: { 'raster-opacity': 1 },
            });

            // Fly to different points
            function flyToSouth() {
                map.flyTo({
                    center: [-83.95844192360883, 35.93939855989102], // Move 300 feet south
                    zoom: 18,
                    pitch: 45, // Maintain 45-degree tilt
                    bearing: 90, // Facing south
                    speed: 0.2,
                    curve: 1,
                    easing: (t) => t * (2 - t), // Ease out for smoother deceleration
                    essential: true,
                });
                map.once('moveend', flyToOverhead);
            }

            function flyToOverhead() {
                map.flyTo({
                    center: houseLocation, // Final destination
                    zoom: 19,
                    pitch: 0, // Overhead view
                    bearing: 283, // Final bearing
                    speed: 0.1, // Slower speed for final approach
                    curve: 1,
                    easing: (t) => 1 - Math.pow(1 - t, 3), // Cubic ease-out for smooth deceleration
                    essential: true,
                });
            }

            // Start the animation sequence
            flyToSouth();
        });
    </script>
</body>

</html>