Well the thing is that I've a normal plugin that shows a Open Layers map. But something very weird is going on. This is my plugin config:
local.registerplugin = function (krpanointerface, pluginpath, pluginobject) {
krpano = krpanointerface;
plugin = pluginobject;
if (true) // this code here is only an example for how-to add addtional graphical content!
{
var container = document.createElement("div");
container.id = "map";
container.style.position = "relative";
container.style.cssFloat = "left";
container.style.width = "300px";
container.style.height = "200px";
container.style.background = "#000000";
//This is where I config my OL map
plugin.sprite.appendChild(container);
map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.transform([longFixed, latFixed], 'EPSG:4326', 'EPSG:3857'),
zoom: 15
})
});
var transform = ol.proj.getTransform('EPSG:3857', 'EPSG:4326');
var canvasInHtml = document.getElementsByClassName('ol-unselectable');
canvasInHtml[0].style.display = "block!important";
plugincanvas = canvasInHtml[0];
plugincanvascontext = plugincanvas.getContext("2d");
plugincanvas.style.width = "300px";
plugincanvas.style.height = "200px";
plugincanvas.width = "300";
plugincanvas.height = "300";
}
So when the page loads, the plugin is not showing my map and actually the element "ol-unselectable" has the following HTML code:
<canvas class="ol-unselectable" style="width: 300px; height: 200px; display: none;"></canvas>
But when I force it to re size, for example by opening the developer tool in the explorer or minimize and maximize the explorer, the HTML object definition is changed and the map is shown:
<canvas class="ol-unselectable" style="width: 300px; height: 200px;" width="300" height="200"></canvas>
When I check at the ccs bar in the developers tools, when my map is not showing I got this:
element.style {
width: 300px;
height: 200px;
display: none;
}
When my element.style is being set to display:none?