Incorporare openseamap su proprio sito 
Autor: Carlo L.
Besucht 246,
Followers 2,
Geteilt 0
Buonasera vorrei incorporare il link di openseamap sul mio sito, penso di aver trovato come fare ma non riesco a farlo funzionare! potete aiutarmi a capire se fattibile e come? lascio il link dove penso ci siano le info per incorporare l'app sul sito https://wiki.openseamap.org/wiki/h:En:OpenSeaMap_in_Website
Grazie
Gepostet am
... non hai postato il tuo LINK per poter valutare...
... non so cosa stai cercando di ottenere di quanto lì detto, che non ho approfondito...
... comunque per prova incolla il mio codice di questa seamap del golfo ligure in Oggetto Codice HTM:
<iframe width="100%" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
src="https://map.openseamap.org/?zoom=9&lon=9.01900&lat=44.01945&layers=TFTFFFTFFTFFFFFFTFFFFF&mlat=44.22844&mlon=8.86520&mtext=Golfo+Ligure"
style="border: 1px solid black"></iframe>
<br><a href="https://map.openseamap.org/?zoom=9&lon=9.01900&lat=44.01945&layers=TFTFFFTFFTFFFFFFTFFFFF&mlat=44.22844&mlon=8.86520&mtext=Golfo+Ligure">Visualizza mappa in finestra propria</a>
.
ciao
... ps: ... puoi anche usare l'URL di SRC o di HREF del tag <a> (lo stesso), per aprire openseamap nello ShowBox, ottenendo così una pagina più leggera...
.
Autor
sembra funzionare ho provato a cambiare le coordinate per centrare la mappa in apertura su talamone ma senza riuscirci!! questo e il link della pagina https://www.velapassion.it/le-rotte-.html Puoi aiutarmi?
scusami per la mia ignoranza ma non so cosa significa questo: puoi anche usare l'URL di SRC o di HREF del tag <a> (lo stesso), per aprire openseamap nello ShowBox, ottenendo così una pagina più leggera...
Grazieee
Ciao carlo. Prova questo codice da inserire in oggetto HTML (in pratica aggiunge grafica al link e aumenta di poco le dimensioni del box per far vedere tutto il view in tendina).
Non capisco quando dici delle coordinate.
<iframe width="100%" height="450" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
src="https://map.openseamap.org/?zoom=9&lon=9.01900&lat=44.01945&layers=TFTFFFTFFTFFFFFFTFFFFF&mlat=44.22844&mlon=8.86520&mtext=Golfo+Ligure"
style="border: 1px solid #000"></iframe>
<br>
<a href="https://map.openseamap.org/?zoom=9&lon=9.01900&lat=44.01945&layers=TFTFFFTFFTFFFFFFTFFFFF&mlat=44.22844&mlon=8.86520&mtext=Golfo+Ligure"
class="map-button" target="_blank">
Visualizza Finestra Propria
</a>
<Style>
/* Centra il pulsante */
.map-button-container {
text-align: center; /* Centra il contenuto */
width: 100%; /* Occupa tutta la larghezza disponibile */
}
/* stile Pulsante */
.map-button {
display: inline-block;
padding: 12px 20px;
font-size: 16px;
font-weight: bold;
color: white;
text-decoration: none;
text-align: center;
border-radius: 8px;
background: linear-gradient(135deg, #007bff, #0056b3);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease-in-out;
margin: auto; /* Mantiene centratura se usato in flex/grid */
}
/* Hover per effetto al passaggio */
.map-button:hover {
background: linear-gradient(135deg, #0056b3, #003f7f);
transform: scale(1.05);
}
</style>
Se dovesse servire perchè qualcosa non quadra aggiungi anche questa parte di codice nello style:
iframe {
width: 100%;
height: auto;
min-height: 450px;
max-height: 80vh;
border: 1px solid #000;
}
Autor
per le coordinate la mappa si posizione sempre su golfo ligure ma dovrebbe posizionarsi con al centro la baia di talamone. hoprovato a cambiare le coordinate ma niente mi comoare sempre golfo ligure!
<iframe width="100%" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
src="https://map.openseamap.org/?zoom=16.2&lon=11.13907&lat=42.55537&layers=TFTFFFTFFTFFFFFFTFFFFF&mlat=42.55509&mlon=11.13795&mtext=Orbetello%0ABaia+di+Tolomone"
style="border: 1px solid black"></iframe>
<br><a href="https://map.openseamap.org/?zoom=16.2&lon=11.13907&lat=42.55537&layers=TFTFFFTFFTFFFFFFTFFFFF&mlat=42.55509&mlon=11.13795&mtext=Orbetello%0ABaia+di+Tolomone">Visualizza openseamap in finestra propria</a>
.
ciao
.
.
... non ti preoccupare, c'è sempre una prima volta, basta chiedere...
... in pratica in una cella della pagina metti un testo di questo tipo:
Baia di Talomone
... lo selezioni ed assegni il collegamento con opzione File o URL | File su Internet, e nel campo di input incolla l'URL, proprio questo che segue, e metti la spunta su apertura nello ShowBox:
https://map.openseamap.org/?zoom=16.2&lon=11.13907&lat=42.55537&layers=TFTFFFTFFTFFFFFFTFFFFF&mlat=42.55509&mlon=11.13795&mtext=Orbetello%0ABaia+di+Tolomone
...
... al posto del testo, in una cella puoi mettere l'Oggetto Immagine, con immagine di anteprima (screenshot-stamp) della baia, tipo la mia del precedente mio Post, e volendo potresti usare la stessa, e quindi assegni il collegamento sempre con opzione File o URL | File su Internet, e nel campo di input incolla lo stesso precedente l'URL postato prima, con sempre la spunta su apertura nello ShowBox...
...
... in questo modo otterresti una pagina con apertura non vincolata a risorse esterne, e la tua seamap si aprirebbe al ckick in un elegante ShowBox sovrapposto nella stessa pagina...
... se servissero chiarimenti, avvisami...
.
ciao
.
... x ShowBox:
.
Ok ora ho capito . Ti ho aggiornato il codice sempre per l'oggetto html. Se preferisci apertura nella stessa pagina sostituisci _blank con _self nell'attributo target.
<iframe width="100%" height="450" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
src="https://map.openseamap.org/?zoom=16.2&lon=11.13907&lat=42.55537&layers=TFTFFFTFFTFFFFFFTFFFFF&mlat=42.55509&mlon=11.13795&mtext=Orbetello%0ABaia+di+Tolomone"
style="border: 1px solid #000"></iframe>
<div class="map-button-container">
<a href="https://map.openseamap.org/?zoom=16.2&lon=11.13907&lat=42.55537&layers=TFTFFFTFFTFFFFFFTFFFFF&mlat=42.55509&mlon=11.13795&mtext=Orbetello%0ABaia+di+Tolomone"
class="map-button" target="_blank">
Visualizza Mappa in Finestra Propria
</a>
</div>
<style>
.ol-layer canvas {
pointer-events: none;
z-index: 0;
}
.ol-layer {
width: 100%;
height: 100%;
}
/* Adattamento del popup */
#popup {
max-width: 180px;
max-height: 100px;
width: auto;
padding: 6px;
overflow: auto;
position: absolute;
background-color: white;
border-radius: 8px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
/* Pulsante di chiusura */
#popup-closer {
position: absolute;
top: 3px;
right: 3px;
width: 22px;
height: 22px;
cursor: pointer;
background: transparent;
border: none;
}
/* Centrare il pulsante */
.map-button-container {
text-align: center;
width: 100%;
display: flex;
justify-content: center;
}
/* Pulsante stilizzato */
.map-button {
display: inline-block;
padding: 12px 20px;
font-size: 16px;
font-weight: bold;
color: white;
text-decoration: none;
text-align: center;
border-radius: 8px;
background: linear-gradient(135deg, #007bff, #0056b3);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease-in-out;
margin: auto;
}
.map-button:hover {
background: linear-gradient(135deg, #0056b3, #003f7f);
transform: scale(1.05);
}
/* Adattamento su schermi piccoli */
@media (max-width: 768px) {
.map-button {
font-size: 14px;
padding: 10px 20px;
width: 80%;
}
#popup {
max-width: 25vw;
height: auto;
}
}
</style>