Add &ipns= EXPLORE button
This commit is contained in:
parent
572f47b5c8
commit
3ef8159197
|
@ -11,13 +11,34 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.button-container {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 50%;
|
||||||
|
height: 50%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
background-color: #3498db;
|
||||||
|
color: #fff;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="map" class="map-container"></div>
|
<div id="map" class="map-container"></div>
|
||||||
<br>
|
<!-- Add a button container if sectorIPNS is not empty -->
|
||||||
|
<div class="button-container" id="buttonContainer"></div>
|
||||||
|
|
||||||
<script src="leaflet.js"></script>
|
<script src="leaflet.js"></script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// const desiredImageWidthInKm = 11; // Now Is calculated from northEastLon - southWestLon
|
// const desiredImageWidthInKm = 11; // Now Is calculated from northEastLon - southWestLon
|
||||||
const tileSizeInPixels = 256;
|
const tileSizeInPixels = 256;
|
||||||
|
@ -42,6 +63,10 @@
|
||||||
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
|
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const defaultIPNS = '';
|
||||||
|
const sectorIPNS = getUrlParameter('ipns') || defaultIPNS;
|
||||||
|
console.log('sectorIPNS: /ipns/', sectorIPNS);
|
||||||
|
|
||||||
const defaultSouthWestLat = 0.00;
|
const defaultSouthWestLat = 0.00;
|
||||||
const defaultSouthWestLon = 0.00;
|
const defaultSouthWestLon = 0.00;
|
||||||
const defaultOffsetDegrees = 10.00; // 10° offset
|
const defaultOffsetDegrees = 10.00; // 10° offset
|
||||||
|
@ -90,6 +115,23 @@
|
||||||
attribution: `U Planet | Astroport | ${southWestLat} : ${southWestLon}`
|
attribution: `U Planet | Astroport | ${southWestLat} : ${southWestLon}`
|
||||||
}).addTo(map);
|
}).addTo(map);
|
||||||
|
|
||||||
|
const buttonContainer = document.getElementById('buttonContainer');
|
||||||
|
|
||||||
|
// Check if sectorIPNS is not empty
|
||||||
|
if (sectorIPNS !== '') {
|
||||||
|
const button = document.createElement('button');
|
||||||
|
button.innerText = 'EXPLORE';
|
||||||
|
button.className = 'button';
|
||||||
|
|
||||||
|
// Add an event listener to the button
|
||||||
|
button.addEventListener('click', function() {
|
||||||
|
window.open( '/ipns/'+ sectorIPNS, "AstroTab");
|
||||||
|
});
|
||||||
|
|
||||||
|
// Append the button to the button container
|
||||||
|
buttonContainer.appendChild(button);
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -11,11 +11,31 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.button-container {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 50%;
|
||||||
|
height: 50%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
background-color: #3498db;
|
||||||
|
color: #fff;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="map" class="map-container"></div>
|
<div id="map" class="map-container"></div>
|
||||||
<br>
|
<!-- Add a button container if sectorIPNS is not empty -->
|
||||||
|
<div class="button-container" id="buttonContainer"></div>
|
||||||
|
|
||||||
<script src="leaflet.js"></script>
|
<script src="leaflet.js"></script>
|
||||||
<script>
|
<script>
|
||||||
|
@ -42,6 +62,10 @@
|
||||||
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
|
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const defaultIPNS = '';
|
||||||
|
const sectorIPNS = getUrlParameter('ipns') || defaultIPNS;
|
||||||
|
console.log('sectorIPNS: /ipns/', sectorIPNS);
|
||||||
|
|
||||||
const defaultSouthWestLat = 0.00;
|
const defaultSouthWestLat = 0.00;
|
||||||
const defaultSouthWestLon = 0.00;
|
const defaultSouthWestLon = 0.00;
|
||||||
const defaultOffsetDegrees = 10.00; // 10° offset
|
const defaultOffsetDegrees = 10.00; // 10° offset
|
||||||
|
@ -90,6 +114,23 @@
|
||||||
attribution: `U Planet | Astroport | ${southWestLat} : ${southWestLon}`
|
attribution: `U Planet | Astroport | ${southWestLat} : ${southWestLon}`
|
||||||
}).addTo(map);
|
}).addTo(map);
|
||||||
|
|
||||||
|
const buttonContainer = document.getElementById('buttonContainer');
|
||||||
|
|
||||||
|
// Check if sectorIPNS is not empty
|
||||||
|
if (sectorIPNS !== '') {
|
||||||
|
const button = document.createElement('button');
|
||||||
|
button.innerText = 'EXPLORE';
|
||||||
|
button.className = 'button';
|
||||||
|
|
||||||
|
// Add an event listener to the button
|
||||||
|
button.addEventListener('click', function() {
|
||||||
|
window.open( '/ipns/'+ sectorIPNS, "AstroTab");
|
||||||
|
});
|
||||||
|
|
||||||
|
// Append the button to the button container
|
||||||
|
buttonContainer.appendChild(button);
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -88,6 +88,15 @@
|
||||||
margin-top: -12.5px;
|
margin-top: -12.5px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
background-color: #3498db;
|
||||||
|
color: #fff;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<link rel="stylesheet" href="earth.css">
|
<link rel="stylesheet" href="earth.css">
|
||||||
|
@ -97,7 +106,7 @@
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<h1>♥ U Planet ♥</h1>
|
<h1>♥ U Planet ♥</h1>
|
||||||
<a href="/ipfs/QmbRCHkj93pJAeBBCmxznxeLTw4dKQUu3FhS3EfjPXCbSU">LOGIN</a>
|
<a href="login/">LOGIN</a>
|
||||||
|
|
||||||
<div id="container">
|
<div id="container">
|
||||||
<br><br>
|
<br><br>
|
||||||
|
@ -132,5 +141,45 @@
|
||||||
<textarea id="example_code" onclick="this.focus();this.select();"></textarea>
|
<textarea id="example_code" onclick="this.focus();this.select();"></textarea>
|
||||||
</div>
|
</div>
|
||||||
-->
|
-->
|
||||||
|
<script>
|
||||||
|
|
||||||
|
// Function to extract URL parameters
|
||||||
|
function getUrlParameter(name) {
|
||||||
|
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
|
||||||
|
const regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
|
||||||
|
const results = regex.exec(location.search);
|
||||||
|
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
|
||||||
|
}
|
||||||
|
const defaultIPNS = '';
|
||||||
|
const sectorIPNS = getUrlParameter('ipns') || defaultIPNS;
|
||||||
|
console.log('sectorIPNS: /ipns/', sectorIPNS);
|
||||||
|
if (sectorIPNS !== '') {
|
||||||
|
const buttonContainer = document.createElement('div');
|
||||||
|
buttonContainer.id = 'button-container'
|
||||||
|
buttonContainer.style.position = 'absolute';
|
||||||
|
buttonContainer.style.bottom = '0px';
|
||||||
|
buttonContainer.style.left = '0px';
|
||||||
|
buttonContainer.style.width = '200px';
|
||||||
|
buttonContainer.style.height = '150px';
|
||||||
|
buttonContainer.style.zIndex = '1001';
|
||||||
|
buttonContainer.style.display = 'flex';
|
||||||
|
buttonContainer.style.flexDirection = 'column';
|
||||||
|
buttonContainer.style.alignItems = 'center';
|
||||||
|
buttonContainer.style.justifyContent = 'center';
|
||||||
|
|
||||||
|
const button = document.createElement('button');
|
||||||
|
button.innerText = 'EXPLORE';
|
||||||
|
button.className = 'button';
|
||||||
|
|
||||||
|
// Add an event listener to the button
|
||||||
|
button.addEventListener('click', function() {
|
||||||
|
window.open( '/ipns/'+ sectorIPNS, "AstroTab");
|
||||||
|
});
|
||||||
|
|
||||||
|
// Append the button to the button container
|
||||||
|
buttonContainer.appendChild(button);
|
||||||
|
document.body.appendChild(buttonContainer);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
</body></html>
|
</body></html>
|
||||||
|
|
Before Width: | Height: | Size: 5.3 KiB After Width: | Height: | Size: 5.3 KiB |
|
@ -149,20 +149,30 @@ a {
|
||||||
<p><input type="hidden" id="g1pub" value="2L8vaYixCf97DMT8SistvQFeBj7vb6RQL7tvwyiv1XVH"/></p>
|
<p><input type="hidden" id="g1pub" value="2L8vaYixCf97DMT8SistvQFeBj7vb6RQL7tvwyiv1XVH"/></p>
|
||||||
<div id="appname">
|
<div id="appname">
|
||||||
<label>
|
<label>
|
||||||
<input type="radio" id="r0" name="appname" value="login">
|
<input type="radio" id="q1" name="appname" value="login">
|
||||||
<b>LOGIN</b>
|
<b>LOGIN</b>
|
||||||
</label>
|
</label>
|
||||||
<label>
|
<label>
|
||||||
<input type="radio" id="r5" name="appname" value="logout" checked="checked">
|
<input type="radio" id="q2" name="appname" value="logout" checked="checked">
|
||||||
<b>LOGOUT</b>
|
<b>LOGOUT</b>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<strong><div id="resu"></div></strong>
|
<strong><div id="resu"></div></strong>
|
||||||
<p> <h2>Scan G1Card</h2> </p>
|
<p> <h2>Scan AstroID</h2> </p>
|
||||||
<h1><div id="countdown">___</div></h1>
|
<h1><div id="countdown">___</div></h1>
|
||||||
|
|
||||||
<p><a href="https://opencollective.com/monnaie-libre/" target="funding">- (^‿‿^) -</a></p>
|
<p><a href="https://opencollective.com/monnaie-libre/" target="funding">- (^‿‿^) -</a></p>
|
||||||
|
<!--
|
||||||
|
<br>or enter<br>
|
||||||
|
<form id="formlink" action="http://127.0.0.1:1234" method="GET" enctype="application/x-www-form-urlencoded">
|
||||||
|
SECRET 1 : (EMAIL) <input name='salt' value='0'>
|
||||||
|
SECRET 2 : (8 DIGIT PASS)<input name='pepper' value='0'>
|
||||||
|
<br>
|
||||||
|
LOGIN : <input type="radio" id="s1" name="login" value="login">
|
||||||
|
LOGOUT : <input type="radio" id="s2" name="logout" value="logout" checked="checked">
|
||||||
|
<input type='submit' value='OK'>
|
||||||
|
</form>
|
||||||
|
-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="console"><a href="_STATION_" target="aframe">CONSOLE</a>
|
<div id="console"><a href="_STATION_" target="aframe">CONSOLE</a>
|
||||||
|
@ -185,6 +195,7 @@ a {
|
||||||
// Create the "station" variable with the specified format
|
// Create the "station" variable with the specified format
|
||||||
var station = protocol + "://" + modifiedURL;
|
var station = protocol + "://" + modifiedURL;
|
||||||
|
|
||||||
|
|
||||||
async function fetchAstroport(myURL) {
|
async function fetchAstroport(myURL) {
|
||||||
try {
|
try {
|
||||||
|
|
||||||
|
@ -227,13 +238,14 @@ a {
|
||||||
var appname = document.querySelector('input[name="appname"]:checked').value;
|
var appname = document.querySelector('input[name="appname"]:checked').value;
|
||||||
|
|
||||||
if ( appname == 'login' || appname == 'logout' ) {
|
if ( appname == 'login' || appname == 'logout' ) {
|
||||||
var amount = prompt("Saisir EMAIL:");
|
// var amount = prompt("Saisir EMAIL:");
|
||||||
|
var amount = "UPlanet";
|
||||||
}
|
}
|
||||||
|
|
||||||
// GET PASS TO DECODE PGP
|
// GET PASS TO DECODE PGP
|
||||||
var oldpass = document.getElementById("PASS").value;
|
var oldpass = document.getElementById("PASS").value;
|
||||||
if ( oldpass == 'PASS') {
|
if ( oldpass == 'PASS') {
|
||||||
var pass = prompt("Saisir PASS:");
|
var pass = prompt("Saisir PIN:");
|
||||||
} else {
|
} else {
|
||||||
var pass = oldpass;
|
var pass = oldpass;
|
||||||
}
|
}
|
||||||
|
@ -241,21 +253,6 @@ a {
|
||||||
// PREVIOUS G1PUB SCAN
|
// PREVIOUS G1PUB SCAN
|
||||||
var g1pub = document.getElementById("g1pub").value;
|
var g1pub = document.getElementById("g1pub").value;
|
||||||
|
|
||||||
// APPNAME : DATA COLLECT & ARRANGE
|
|
||||||
if ( appname == 'pay') {
|
|
||||||
var amount = prompt("MONTANT (Ğ1) ?");
|
|
||||||
alert('PAY TO ' + g1pub + ' = ' + amount);
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( appname == 'friend') {
|
|
||||||
var amount = prompt("Entre 1 et 5 (★) ?");
|
|
||||||
alert( amount + '★ > ' + g1pub );
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( amount == 'undefined' || amount == '' ) {
|
|
||||||
var amount = document.getElementById("g1pub").value;
|
|
||||||
}
|
|
||||||
|
|
||||||
var myU = station + '/?qrcode=' + content +'&pass=' + pass + '&' + appname + '=' + amount + '&g1pub=' + g1pub ;
|
var myU = station + '/?qrcode=' + content +'&pass=' + pass + '&' + appname + '=' + amount + '&g1pub=' + g1pub ;
|
||||||
console.log(myU);
|
console.log(myU);
|
||||||
|
|
|
@ -27,6 +27,14 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
background-color: #3498db;
|
||||||
|
color: #fff;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
@ -35,7 +43,6 @@
|
||||||
<div id="coordinates-display"></div> <!-- Coordinates display element -->
|
<div id="coordinates-display"></div> <!-- Coordinates display element -->
|
||||||
<div id="map" style="width: 100%; height: 100vh;"></div>
|
<div id="map" style="width: 100%; height: 100vh;"></div>
|
||||||
</div>
|
</div>
|
||||||
<br>
|
|
||||||
|
|
||||||
<script src="leaflet.js"></script>
|
<script src="leaflet.js"></script>
|
||||||
|
|
||||||
|
@ -64,6 +71,37 @@
|
||||||
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
|
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const defaultIPNS = '';
|
||||||
|
const sectorIPNS = getUrlParameter('ipns') || defaultIPNS;
|
||||||
|
console.log('sectorIPNS: /ipns/', sectorIPNS);
|
||||||
|
if (sectorIPNS !== '') {
|
||||||
|
const buttonContainer = document.createElement('div');
|
||||||
|
buttonContainer.id = 'button-container'
|
||||||
|
buttonContainer.style.position = 'absolute';
|
||||||
|
buttonContainer.style.bottom = '10px';
|
||||||
|
buttonContainer.style.left = '10px';
|
||||||
|
buttonContainer.style.width = '200px';
|
||||||
|
buttonContainer.style.height = '150px';
|
||||||
|
buttonContainer.style.zIndex = '1001';
|
||||||
|
buttonContainer.style.display = 'flex';
|
||||||
|
buttonContainer.style.flexDirection = 'column';
|
||||||
|
buttonContainer.style.alignItems = 'center';
|
||||||
|
buttonContainer.style.justifyContent = 'center';
|
||||||
|
|
||||||
|
const button = document.createElement('button');
|
||||||
|
button.innerText = 'EXPLORE';
|
||||||
|
button.className = 'button';
|
||||||
|
|
||||||
|
// Add an event listener to the button
|
||||||
|
button.addEventListener('click', function() {
|
||||||
|
window.open( '/ipns/'+ sectorIPNS, "AstroTab");
|
||||||
|
});
|
||||||
|
|
||||||
|
// Append the button to the button container
|
||||||
|
buttonContainer.appendChild(button);
|
||||||
|
document.body.appendChild(buttonContainer);
|
||||||
|
}
|
||||||
|
|
||||||
const defaultSouthWestLat = 0.00;
|
const defaultSouthWestLat = 0.00;
|
||||||
const defaultSouthWestLon = 0.00;
|
const defaultSouthWestLon = 0.00;
|
||||||
const defaultOffsetDegrees = 10.00; // 10° offset
|
const defaultOffsetDegrees = 10.00; // 10° offset
|
||||||
|
@ -166,16 +204,6 @@ if (deg <= 0.01) {
|
||||||
|
|
||||||
container.appendChild(button);
|
container.appendChild(button);
|
||||||
|
|
||||||
//~ const link = document.createElement('a');
|
|
||||||
//~ link.href = 'https://ipfs.copylaradio.com/ipfs/QmXom7iUq7G9Z1eiuckAQ1B7tkYfYGKnWhh3kUaKBd3ct4';
|
|
||||||
//~ link.target = 'pp';
|
|
||||||
//~ link.textContent = '>> PRINT PASSPORT <<';
|
|
||||||
//~ link.style.fontSize = '24px'; // Customize the font size
|
|
||||||
//~ link.style.textDecoration = 'none'; // Remove underline from the link
|
|
||||||
//~ link.style.marginBottom = '30px'; // Add some space between the link and the button
|
|
||||||
|
|
||||||
//~ container.appendChild(link);
|
|
||||||
|
|
||||||
document.body.appendChild(container);
|
document.body.appendChild(container);
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
|
@ -225,6 +253,7 @@ document.getElementById('map-container').addEventListener('click', (event) => {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/////////////////
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -27,15 +27,38 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.button-container {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 50%;
|
||||||
|
height: 50%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
background-color: #3498db;
|
||||||
|
color: #fff;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div id="map-container" style="position: relative;">
|
<div id="map-container" style="position: relative;">
|
||||||
|
<div class="button-container" id="buttonContainer"></div>
|
||||||
<div id="coordinates-display"></div> <!-- Coordinates display element -->
|
<div id="coordinates-display"></div> <!-- Coordinates display element -->
|
||||||
<div id="map" style="width: 100%; height: 100vh;"></div>
|
<div id="map" style="width: 100%; height: 100vh;"></div>
|
||||||
</div>
|
</div>
|
||||||
<br>
|
|
||||||
|
|
||||||
<script src="leaflet.js"></script>
|
<script src="leaflet.js"></script>
|
||||||
|
|
||||||
|
@ -64,6 +87,37 @@
|
||||||
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
|
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const defaultIPNS = '';
|
||||||
|
const sectorIPNS = getUrlParameter('ipns') || defaultIPNS;
|
||||||
|
console.log('sectorIPNS: /ipns/', sectorIPNS);
|
||||||
|
if (sectorIPNS !== '') {
|
||||||
|
const buttonContainer = document.createElement('div');
|
||||||
|
buttonContainer.id = 'button-container'
|
||||||
|
buttonContainer.style.position = 'absolute';
|
||||||
|
buttonContainer.style.bottom = '10px';
|
||||||
|
buttonContainer.style.left = '10px';
|
||||||
|
buttonContainer.style.width = '200px';
|
||||||
|
buttonContainer.style.height = '150px';
|
||||||
|
buttonContainer.style.zIndex = '1001';
|
||||||
|
buttonContainer.style.display = 'flex';
|
||||||
|
buttonContainer.style.flexDirection = 'column';
|
||||||
|
buttonContainer.style.alignItems = 'center';
|
||||||
|
buttonContainer.style.justifyContent = 'center';
|
||||||
|
|
||||||
|
const button = document.createElement('button');
|
||||||
|
button.innerText = 'EXPLORE';
|
||||||
|
button.className = 'button';
|
||||||
|
|
||||||
|
// Add an event listener to the button
|
||||||
|
button.addEventListener('click', function() {
|
||||||
|
window.open( '/ipns/'+ sectorIPNS, "AstroTab");
|
||||||
|
});
|
||||||
|
|
||||||
|
// Append the button to the button container
|
||||||
|
buttonContainer.appendChild(button);
|
||||||
|
document.body.appendChild(buttonContainer);
|
||||||
|
}
|
||||||
|
|
||||||
const defaultSouthWestLat = 0.00;
|
const defaultSouthWestLat = 0.00;
|
||||||
const defaultSouthWestLon = 0.00;
|
const defaultSouthWestLon = 0.00;
|
||||||
const defaultOffsetDegrees = 10.00; // 10° offset
|
const defaultOffsetDegrees = 10.00; // 10° offset
|
||||||
|
@ -209,7 +263,6 @@ document.getElementById('map-container').addEventListener('click', (event) => {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
/////////////////
|
/////////////////
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -8,25 +8,72 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<link rel="stylesheet" href="leaflet.css">
|
<link rel="stylesheet" href="leaflet.css">
|
||||||
<style>
|
<style>
|
||||||
|
#map {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
.clickable-area {
|
.clickable-area {
|
||||||
fill-opacity: 0.2; /* Adjust the opacity as needed */
|
fill-opacity: 0.2; /* Adjust the opacity as needed */
|
||||||
fill: #0074d9; /* Adjust the color as needed */
|
fill: #0074d9; /* Adjust the color as needed */
|
||||||
stroke: #001f3f;
|
stroke: #001f3f;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
background-color: #3498db;
|
||||||
|
color: #fff;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script src="leaflet.js"></script>
|
<script src="leaflet.js"></script>
|
||||||
<style>
|
|
||||||
#map {
|
|
||||||
width: 100%;
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="map"></div>
|
<div id="map"></div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
|
// Function to extract URL parameters
|
||||||
|
function getUrlParameter(name) {
|
||||||
|
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
|
||||||
|
const regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
|
||||||
|
const results = regex.exec(location.search);
|
||||||
|
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
|
||||||
|
}
|
||||||
|
const defaultIPNS = '';
|
||||||
|
const sectorIPNS = getUrlParameter('ipns') || defaultIPNS;
|
||||||
|
console.log('sectorIPNS: /ipns/', sectorIPNS);
|
||||||
|
if (sectorIPNS !== '') {
|
||||||
|
const buttonContainer = document.createElement('div');
|
||||||
|
buttonContainer.id = 'button-container'
|
||||||
|
buttonContainer.style.position = 'absolute';
|
||||||
|
buttonContainer.style.bottom = '0px';
|
||||||
|
buttonContainer.style.left = '0px';
|
||||||
|
buttonContainer.style.width = '200px';
|
||||||
|
buttonContainer.style.height = '150px';
|
||||||
|
buttonContainer.style.zIndex = '1001';
|
||||||
|
buttonContainer.style.display = 'flex';
|
||||||
|
buttonContainer.style.flexDirection = 'column';
|
||||||
|
buttonContainer.style.alignItems = 'center';
|
||||||
|
buttonContainer.style.justifyContent = 'center';
|
||||||
|
|
||||||
|
const button = document.createElement('button');
|
||||||
|
button.innerText = 'EXPLORE';
|
||||||
|
button.className = 'button';
|
||||||
|
|
||||||
|
// Add an event listener to the button
|
||||||
|
button.addEventListener('click', function() {
|
||||||
|
window.open( '/ipns/'+ sectorIPNS, "AstroTab");
|
||||||
|
});
|
||||||
|
|
||||||
|
// Append the button to the button container
|
||||||
|
buttonContainer.appendChild(button);
|
||||||
|
document.body.appendChild(buttonContainer);
|
||||||
|
}
|
||||||
|
|
||||||
// Set up initial variables
|
// Set up initial variables
|
||||||
const tileSize = 10; // 10° interval
|
const tileSize = 10; // 10° interval
|
||||||
const gridSize = 36;
|
const gridSize = 36;
|
||||||
|
|
Loading…
Reference in New Issue