Forum Ubuntu-it

Ciao,

non riesco a visualizzare una mappa osm con openlayer all'interno di un modal:
al click di un bottone avvio una funzione che apre il modal, cancella tutto ciò che è presente in un <div> e inserisce la mappa openstreetmap con openlayer. Il problema è che lo script si avvia(si caricano i due pulsanti per l'ingrandimento della mappa) ma non compare la mappa. Questa compare nel caso in cui con firefox apro il menù a tendina e seleziono "analizza elemento " oppure se con dispositivo mobile passo da landscape a portrait (e vicxeversa).

Il codice è il seguente:

Codice: Seleziona tutto

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/css/ol.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<style>
.map {
    width:400px; 
    height:400px;
    margin:0;
}

</style>
<script>
function showmap(lat,lon) {
document.getElementById("sh").innerHTML = "";

var map704 = new ol.Map({
  target: 'sh',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
  ],

  view: new ol.View({
    center: ol.proj.fromLonLat([lon, lat]),
    zoom: 14
  })
});

}
</script>
</head>
<body>
<div id="ex1" class="modal">
  <div id="sh" class="map" >mappa:</div>
  <a href="#" rel="modal:close"></a>
</div>
<a href="#ex1" rel="modal:open"><button onClick="showmap(45.2444,8.7708)">d</button></a>

<a href="#ex1" rel="modal:open"><button onClick="showmap(45.4071,8.01407)">d</button></a>
</body>
</html>

Forum Ubuntu-it

Js openlayer e modal, script avviato ma si ferma

Js openlayer e modal, script avviato ma si ferma