Skip to content

Commit 606bf06

Browse files
unchunksunchunks
committed
add map.html
1 parent 1a250da commit 606bf06

File tree

3 files changed

+186
-0
lines changed

3 files changed

+186
-0
lines changed

‎index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,10 @@ <h2>ニュース</h2>
4646
</li>
4747
</ul>
4848
</section>
49+
<!-- <h1>ファイルダウンロードページ</h1>
50+
<a href="https://raw.githubusercontent.com/unchunks/unchunks.github.io/main/release/test.txt" download>
51+
<button>ファイルをダウンロード</button>
52+
</a> -->
4953
</main>
5054
<footer id="site-footer"></footer>
5155
<script src="../script.js"></script>

‎map.html‎

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>移動経路 表示サイト</title>
5+
<style>
6+
#map {
7+
height: 93vh; /* ページ全体の高さにマップを表示 */
8+
width: 100%;
9+
}
10+
#reel {
11+
height: 7vh;
12+
overflow-x: scroll;
13+
white-space: nowrap;
14+
background-color: #f1f1f1;
15+
padding: 10px;
16+
}
17+
.chunk-button {
18+
display: inline-block;
19+
padding: 10px;
20+
margin-right: 10px;
21+
background-color: #007bff;
22+
color: white;
23+
border: none;
24+
cursor: pointer;
25+
}
26+
.chunk-button:hover {
27+
background-color: #0056b3;
28+
}
29+
</style>
30+
<script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC5kXJS5NYHnLGaYvhBexafgmE0ZszroGQ"></script>
31+
<script type="module">
32+
// Import the functions you need from the SDKs you need
33+
import { initializeApp } from "https://www.gstatic.com/firebasejs/11.0.2/firebase-app.js";
34+
import { getFirestore, collection, getDocs } from "https://www.gstatic.com/firebasejs/11.0.2/firebase-firestore.js";
35+
36+
const firebaseConfig = {
37+
apiKey: "AIzaSyDL5p8UEy4guu8sNCEwCIh8M-X8sV1Osj0",
38+
authDomain: "route360-a3284.firebaseapp.com",
39+
projectId: "route360-a3284",
40+
storageBucket: "route360-a3284.appspot.com",
41+
messagingSenderId: "770398813258",
42+
appId: "1:770398813258:web:2797301af28903b8323ab3",
43+
measurementId: "G-4VVHBSD4GN"
44+
};
45+
46+
// Initialize Firebase
47+
const app = initializeApp(firebaseConfig);
48+
const db = getFirestore(app);
49+
const dataRef = collection(db, 'locationHistory');
50+
51+
window.locations = [];
52+
window.waypointChunks = [];
53+
54+
getDocs(dataRef).then((querySnapshot) => {
55+
let nowIDLocation = [];
56+
let nowID = "";
57+
58+
querySnapshot.forEach((doc) => {
59+
const data = doc.data();
60+
if (nowID === "") {
61+
nowID = doc.id;
62+
}
63+
64+
if (nowID !== doc.id) {
65+
window.locations.push({ id: nowID, locations: nowIDLocation });
66+
nowIDLocation = [];
67+
nowID = doc.id;
68+
}
69+
70+
Object.keys(data).forEach((key) => {
71+
if (data[key] && data[key].latitude && data[key].longitude) {
72+
nowIDLocation.push({ location: { lat: data[key].latitude, lng: data[key].longitude }, stopover: true });
73+
}
74+
});
75+
});
76+
77+
if (nowIDLocation.length > 0) {
78+
window.locations.push({ id: nowID, locations: nowIDLocation });
79+
}
80+
81+
window.waypointChunks = getWaypointChunks();
82+
renderReel();
83+
}).catch((error) => {
84+
console.error('Error retrieving data:', error);
85+
});
86+
87+
function renderReel() {
88+
const reel = document.getElementById('reel');
89+
reel.innerHTML = '';
90+
91+
window.waypointChunks.forEach((chunk, index) => {
92+
const button = document.createElement('button');
93+
button.className = 'chunk-button';
94+
button.textContent = `Chunk ${index + 1}`;
95+
button.onclick = () => initMap(index);
96+
reel.appendChild(button);
97+
});
98+
}
99+
100+
function getWaypointChunks() {
101+
if (!window.locations || window.locations.length === 0) {
102+
console.error('No locations available to create chunks.');
103+
return [];
104+
}
105+
106+
const allChunks = [];
107+
window.locations.forEach(locationData => {
108+
const waypoints = locationData.locations;
109+
const MAX_WAYPOINTS = 23;
110+
for (let i = 0; i < waypoints.length; i += MAX_WAYPOINTS) {
111+
allChunks.push(waypoints.slice(i, i + MAX_WAYPOINTS));
112+
}
113+
});
114+
115+
return allChunks;
116+
}
117+
</script>
118+
<script>
119+
function initMap(chunkIndex = 0) {
120+
const waypointChunks = window.waypointChunks;
121+
122+
if (waypointChunks.length === 0) {
123+
console.error('No waypoint chunks available to display on the map.');
124+
return;
125+
}
126+
127+
const chunk = waypointChunks[chunkIndex];
128+
129+
if (!chunk || chunk.length === 0) {
130+
console.error('Invalid chunk index or empty chunk.');
131+
return;
132+
}
133+
134+
var start = chunk[0].location;
135+
var end = chunk[chunk.length - 1].location;
136+
const waypoints = chunk.slice(1, chunk.length - 1);
137+
138+
var map = new google.maps.Map(document.getElementById('map'), {
139+
zoom: 15,
140+
center: start
141+
});
142+
143+
var directionsService = new google.maps.DirectionsService();
144+
var directionsRenderer = new google.maps.DirectionsRenderer({
145+
suppressMarkers: true,
146+
provideRouteAlternatives: false
147+
});
148+
directionsRenderer.setMap(map);
149+
150+
var request = {
151+
origin: start,
152+
destination: end,
153+
waypoints: waypoints,
154+
travelMode: 'DRIVING'
155+
};
156+
157+
directionsService.route(request, function(result, status) {
158+
if (status == 'OK') {
159+
directionsRenderer.setDirections(result);
160+
addMarkers(map, chunk);
161+
} else {
162+
console.error('Directions request failed due to ' + status);
163+
}
164+
});
165+
}
166+
167+
function addMarkers(map, chunk) {
168+
chunk.forEach((point, index) => {
169+
new google.maps.Marker({
170+
position: point.location,
171+
map: map,
172+
label: (index + 1).toString()
173+
});
174+
});
175+
}
176+
</script>
177+
</head>
178+
<body>
179+
<div id="reel"></div>
180+
<div id="map"></div>
181+
</body>
182+
</html>

‎release/test.txt‎

Whitespace-only changes.

0 commit comments

Comments
 (0)