forked from STI/Astroport.ONE
111 lines
3.4 KiB
HTML
111 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>UPlanet _UMAP_ _SERVICE_ Data</title>
|
|
<link rel="stylesheet" href="http://127.0.0.1:8080/ipfs/QmUBL1cAkKbwnkxCcjvN6B9ydgoNgYGt1sYBqij8Wy2AjS/leaflet.css" />
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
#map {
|
|
height: calc(100vh - 30px); /* Adjusted height to make space for rolling text */
|
|
z-index: 1; /* Ensure the map is behind the rolling text */
|
|
}
|
|
|
|
.rolling-text-container {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 50;
|
|
width: 100%;
|
|
background-color: #333;
|
|
color: #fff;
|
|
padding: 10px;
|
|
text-align: center;
|
|
font-size: 18px;
|
|
overflow: hidden;
|
|
z-index: 2; /* Ensure the rolling text is above the map */
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="map"></div>
|
|
<div id="rollingText" class="rolling-text-container"></div>
|
|
<script src="http://127.0.0.1:8080/ipfs/QmUBL1cAkKbwnkxCcjvN6B9ydgoNgYGt1sYBqij8Wy2AjS/leaflet.js"></script>
|
|
<script src="http://127.0.0.1:8080/ipfs/QmUBL1cAkKbwnkxCcjvN6B9ydgoNgYGt1sYBqij8Wy2AjS/axios.min.js"></script>
|
|
<script>
|
|
// Initialize the map
|
|
// const map = L.map('map').setView([0.00, 0.00], 11);
|
|
const map = L.map('map').setView([43.2218, 1.3977], 11);
|
|
|
|
// Add OpenStreetMap layer
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© OpenStreetMap contributors'
|
|
}).addTo(map);
|
|
|
|
// Fetch JSON data
|
|
axios.get('./p4n.json')
|
|
.then(response => {
|
|
const places = response.data;
|
|
|
|
// Iterate through places and add markers to the map
|
|
places.forEach(place => {
|
|
const { lat, lng, title_short, description, images, services, activities } = place;
|
|
const marker = L.marker([lat, lng]).addTo(map);
|
|
// Create a popup content
|
|
const popupContent = `
|
|
<b>${title_short}</b><br>
|
|
${description}<br>
|
|
<b>Services:</b> ${services.join(', ')}<br>
|
|
<b>Activities:</b> ${activities.join(', ')}<br>
|
|
<a href="#" onclick="goToLocation(${lat}, ${lng})">Zoom In</a>
|
|
`;
|
|
|
|
// Bind popup to the marker
|
|
marker.bindPopup(popupContent);
|
|
|
|
});
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching JSON data:', error);
|
|
});
|
|
|
|
function goToLocation(lat, lng) {
|
|
// Switch to ArcGIS World Imagery basemap
|
|
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
|
|
attribution: '© Esri'
|
|
}).addTo(map);
|
|
|
|
// Set the map view to the specified GPS position
|
|
map.setView([lat, lng], 18); // Adjust the zoom level as needed
|
|
}
|
|
|
|
// Fetch JSON data for rolling text
|
|
axios.get('gchange50.json')
|
|
.then(response => {
|
|
const titles = response.data.hits.hits.map(hit => hit._source.title);
|
|
displayRollingText(titles);
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching rolling text JSON data:', error);
|
|
});
|
|
|
|
function displayRollingText(titles) {
|
|
const rollingTextContainer = document.getElementById('rollingText');
|
|
let currentIndex = 0;
|
|
|
|
function updateText() {
|
|
rollingTextContainer.textContent = titles[currentIndex];
|
|
currentIndex = (currentIndex + 1) % titles.length;
|
|
}
|
|
|
|
setInterval(updateText, 3000); // Change text every 3 seconds (adjust as needed)
|
|
updateText(); // Initial display
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|