Openlayers 4.3.2 - can't get either canvas or WebGL render to work in simple demo

Question

I'm trying to develop an ultra-simple demo of OpenLayers 4. All I want to do is display a map. When I load the html file locally into my browser (Firefox 42), the page displays, but there is no content in the map div.

I get errors in the browser console saying:

Error: WebGL: Refused to create native OpenGL context because of blacklisting.

I tried explicitly asked for a 'canvas' renderer, but obviously that isn't working either (I gather 'canvas' is the default).

I would appreciate advice on getting around this. My HTML/JS is below, stripped of non-essentials:

var map = null;   /* want to be able to see outside of initialize */

/* Initialize the map. Right now we use an arbitrary
* center point in Amphawa.
*/
function initialize() 
{
  map = new ol.Map(
  {
     target: 'map-canvas',
     renderer: 'canvas',
     layers: 
     [
        new ol.layer.Tile(
        {
        source: new ol.source.OSM()
        })
     ],
     view: new ol.View(
     {
        center: ol.proj.fromLonLat([13.354169, 99.931984]),
        zoom: 4
     })
  });
}

initialize();

#header { 
   background-color: #DDFFFF;
   margin: 0px;
   padding: 0px;
   text-align: center;
   line-height: 150%;
 }
#map-canvas { 
   width: 95%; 
   height: 200px;
   border-style: inset; 
   border-width: 4px 
 }

#titlebar  {
   width : 100%;
   height : 20px;
   background-color : #DDDDDD;
   border-style: solid;
   border-width: 2px;
   border-color: black;
 }

<script src="https://openlayers.org/en/v4.3.2/build/ol.js"></script>
<!-- Layout of page starts here -->
<div id="container" style="width:100%; height: 100%; margin: 0px">
<table width="100%"> 
  <tr>
 <td colspan="2">
    <div id="header">
      <table width="100%">
        <tr>
     <td width="15%">
       <div id="control-panel">
            &nbsp;
       </div>
          </td>
          <td style="text-align: center;" width="85%">
      </td>
      </tr>
      </table>
    </div>
  </td>
</tr>
<tr>
  <td width="15%">
&nbsp;
  </td>
  <td>
  <div id="map-canvas">
    </div>
  </td>
</tr>
</table>
</div>  <!-- container -->

BTW please don't bother to critique my html or JS style. I know they are ugly!

Answer 1

99.931984 is not a valid latitude - try swapping the coordinate values

var map = null;   /* want to be able to see outside of initialize */

/* Initialize the map. Right now we use an arbitrary
* center point in Amphawa.
*/
function initialize() 
{
  map = new ol.Map(
  {
     target: 'map-canvas',
     renderer: 'canvas',
     layers: 
     [
        new ol.layer.Tile(
        {
        source: new ol.source.OSM()
        })
     ],
     view: new ol.View(
     {
        center: ol.proj.fromLonLat([99.931984, 13.354169]),
        zoom: 4
     })
  });
}

initialize();

#header { 
   background-color: #DDFFFF;
   margin: 0px;
   padding: 0px;
   text-align: center;
   line-height: 150%;
 }
#map-canvas { 
   width: 95%; 
   height: 200px;
   border-style: inset; 
   border-width: 4px 
 }

#titlebar  {
   width : 100%;
   height : 20px;
   background-color : #DDDDDD;
   border-style: solid;
   border-width: 2px;
   border-color: black;
 }

<script src="https://openlayers.org/en/v4.3.2/build/ol.js"></script>
<!-- Layout of page starts here -->
<div id="container" style="width:100%; height: 100%; margin: 0px">
<table width="100%"> 
  <tr>
 <td colspan="2">
    <div id="header">
      <table width="100%">
        <tr>
     <td width="15%">
       <div id="control-panel">
            &nbsp;
       </div>
          </td>
          <td style="text-align: center;" width="85%">
      </td>
      </tr>
      </table>
    </div>
  </td>
</tr>
<tr>
  <td width="15%">
&nbsp;
  </td>
  <td>
  <div id="map-canvas">
    </div>
  </td>
</tr>
</table>
</div>  <!-- container -->