WebSite X5Help Center

 
Carlo L.
Carlo L.
User

Incorporare openseamap su proprio sito  it

Author: Carlo L.
Visited 114, Followers 2, Shared 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

Posted on the
9 ANSWERS
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month IT

... 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...

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Carlo L.
Carlo L.
User
Author

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

Read more
Posted on the from Carlo L.
Roberto M.
Roberto M.
User

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. undecided

<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>

Read more
Posted on the from Roberto M.
Roberto M.
Roberto M.
User

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;
}

Read more
Posted on the from Roberto M.
Carlo L.
Carlo L.
User
Author

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!

Read more
Posted on the from Carlo L.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month IT
Carlo L.
... ... ... dovrebbe posizionarsi con al centro la baia di talamone ... ... ... 

<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

.

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month IT
Carlo L.
... ... ...  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

... non ti preoccupare, c'è sempre una prima volta, basta chiedere...cool

... 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

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month IT

... x ShowBox:

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Roberto M.
Roberto M.
User
Carlo L.
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!

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>

Read more
Posted on the from Roberto M.