title: OpenLayers map not rendering
body: <p>I have tried using the google api to make a map on my website however to use that now u gotta pay quite a bit.
  Anyway , I found the OpenLayers api and its cool and all however when I request the map to center on my current location the map is not getting rendered anymore .-.
  I get no errors in my console , and I even used promises so the map will start rendering once I have got the coordinates .</p>
  
  <p>this is my index.js code </p>
  
  <pre><code>import 'ol/ol.css';
  import { Map, View } from 'ol';
  import TileLayer from 'ol/layer/Tile';
  import OSM from 'ol/source/OSM';
  
  var lng;
  var lat;
  
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function (position) {
      lat = Promise.resolve(position.coords.latitude);
      lng = Promise.resolve(position.coords.longitude);
      Promise.all([lat, lng]).then((res) =&gt; {
        console.log(res);
        const map = new Map({
          target: 'map',
          layers: [
            new TileLayer({
              source: new OSM()
            })
          ],
          view: new View({
            center: [lat, lng],
            zoom: 0
          })
        });
      })
    })
  }
  </code></pre>
  
  <p>And this is my html code </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Using Parcel with OpenLayers&lt;/title&gt;
      &lt;style&gt;
        #map {
          width: 100%;
          height: 100%;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="map"&gt;&lt;/div&gt;
      &lt;script src="./index.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>to run all of this I'm using node and if I get the const map out of the conditional the map will display however that would not be the center I want to see :D</p>