javascript - Openlayers tiles not loading on a tabed web page -
if have 3 tabs on page , openlayer map on second page not current default. map tiles not load when click on second tab. map tiles load when resize web document window. happening on browsers. below code reference. jsfiddle link
<!doctype html> <html> <head> <link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css"> <style> .map { height: 400px; width: 100%; } body {font-family: "lato", sans-serif;} /* style tab */ div.tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; } /* style buttons inside tab */ div.tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; font-size: 17px; } /* change background color of buttons on hover */ div.tab button:hover { background-color: #ddd; } /* create active/current tablink class */ div.tab button.active { background-color: #ccc; } /* style tab content */ .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; } /* style close button */ .topright { float: right; cursor: pointer; font-size: 20px; } .topright:hover {color: red;} </style> </head> <body> <p>click on x button in top right corner close current tab:</p> <div class="tab"> <button class="tablinks" onclick="opencity(event, 'london')" id="defaultopen">london</button> <button class="tablinks" onclick="opencity(event, 'paris')">paris</button> <button class="tablinks" onclick="opencity(event, 'tokyo')">tokyo</button> </div> <div id="london" class="tabcontent"> <span onclick="this.parentelement.style.display='none'" class="topright">x</span> <h3>london</h3> <p>london capital city of england.</p> </div> <div id="paris" class="tabcontent"> <span onclick="this.parentelement.style.display='none'" class="topright">x</span> <h3>paris</h3> <p>paris capital of france.</p> <div id="map" class="map"></div> </div> <div id="tokyo" class="tabcontent"> <span onclick="this.parentelement.style.display='none'" class="topright">x</span> <h3>tokyo</h3> <p>tokyo capital of japan.</p> </div> <script src="https://openlayers.org/en/v4.0.1/build/ol.js" type="text/javascript"></script> <script> function opencity(evt, cityname) { var i, tabcontent, tablinks; tabcontent = document.getelementsbyclassname("tabcontent"); (i = 0; < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getelementsbyclassname("tablinks"); (i = 0; < tablinks.length; i++) { tablinks[i].classname = tablinks[i].classname.replace(" active", ""); } document.getelementbyid(cityname).style.display = "block"; evt.currenttarget.classname += " active"; } // element id="defaultopen" , click on document.getelementbyid("defaultopen").click(); var map = new ol.map({ target: 'map', layers: [ new ol.layer.tile({ source: new ol.source.osm() }) ], view: new ol.view({ center: ol.proj.fromlonlat([37.41, 8.82]), zoom: 4 }) }); </script> </body> </html>
the problem codebase working that, create new map called when page being loaded, if try create new map
onclick="opencity(event, 'paris'), init()" this creating 1 more map div container.
i able solve issue using
map.updatesize(); but calling asynchronously on onclick event fired
settimeout(function() { compass.map.updatesize(); }, 0);
Comments
Post a Comment