Vfrdtyky

I have a single page application built with

• Express (4.16.3),


• Openlayers (5.3) and


• Pug (2.0.3 – formerly known as Jade) templating engine.

The map container is loaded and has child elements with ol- classes as well as the zoom controls in the upper left corner. So the Openlayers script is successfully executed. But it doesn't show the map tiles on load.

When I resize the browser the map tiles show up all of a sudden. So I'm wondering:

What is the event that triggers the sudden rendering of the tiles on browser resize, and how can I trigger it myself so the map is getting displayed correctly on load?

My index.pug looks like this:

doctype html

html(lang='de')

  head

    meta(charset='UTF-8')

    meta(http-equiv='X-UA-Compatible', content='ie=edge')

    meta(

      name='viewport'

      content='width=device-width, initial-scale=1')

    title=`myTitle`



    // Stylesheets

    link(

      rel='stylesheet',

      href='https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css')

    link(

      rel='stylesheet',

      href='/assets/style.css')



    // Scripts

    script(src='https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js')

    script(src='https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList')

    script(src='https://code.jquery.com/jquery-3.3.1.min.js')

    script(data-main='/js/main', src='/js/require.js')



  body

    include header

    include tabs



    main

      #loader Loading...

      include map



    include footer

And in the main part you see the map pug template included that looks like this:

section.component#component-map

  #map.map

  script.

    /**

    * Leaflet Map

    */

    // Create markers and geodata

    const mapCenter = [13.429, 52.494];

    const siteData = !{JSON.stringify(sites)};

    const features = siteData.map(site => {

      return {

        "type": "Feature",

        "geometry": {

          "type": "Point",

          "coordinates": [ Number(site.longitude), Number(site.latitude) ]

        }

      }

    });



    const image = new ol.style.Circle({

      radius: 5,

      fill: null,

      stroke: new ol.style.Stroke({color: "red", width: 1})

    });



    const styles = {

      "Point": new ol.style.Style({

        "image": image

      })

    }

    const styleFunction = function(feature) {

      return styles[feature.getGeometry().getType()];

    };



    const geojsonObject = {

      "type": "FeatureCollection",

      "features": features

    };



    const vectorSource = new ol.source.Vector({

      features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)

    });



    const vectorLayer = new ol.layer.Vector({

      source: vectorSource,

      style: styleFunction

    });



    const map = new ol.Map({

      target: "map",

      layers: [

        new ol.layer.Tile({

          source: new ol.source.OSM()

        }),

        vectorLayer

      ],

      view: new ol.View({

        center: ol.proj.fromLonLat(mapCenter),

        zoom: 17,

      })

    });

Found the answer myself. My "solution" is more of a workaround than an actual solution. I wait for the map script to be executed (which is the case when the map container has a child element with class name ol-viewport) and then I trigger the browser resize event manually. Other than I expected, the map.render() or map.renderSync() methods do not load the tiles.
So the workaround looks like this:

const waitForMap = setInterval(function() {

  if ($('.ol-viewport').length) {

      console.log("Exists!");

      window.dispatchEvent(new Event('resize'));

      clearInterval(waitForMap);

  }

}, 100);