Method startAsync

modules/core/Map3dSystem.js:92–168

* startAsync * Called after all core objects have been initialized. * @return {Promise} Promise resolved when this component has completed startup

()

   * @return {Promise} Promise resolved when this component has completed startup
   */
  startAsync() {
    if (this._startPromise) return this._startPromise;

    const context = this.context;
    const gfx = context.systems.gfx;
    const ui = context.systems.ui;

    const prerequisites = Promise.all([
      ui.startAsync(),    // wait for UI to be started, so the container will exist
      this._loadMapLibreAsync()
    ]);

    return this._startPromise = prerequisites
      .then(() => {
        const maplibregl = window.maplibregl;
        if (!maplibregl) throw new Error('maplibre-gl not loaded');

        const maplibre = this.maplibre = new maplibregl.Map({
          container: this.containerID,
          minZoom: 12,
          pitch: 60,
          scrollZoom: { around: 'center' },
          style: {
            version: 8,
            sources: {},
            layers: [{
              id: 'background-layer',
              type: 'background',
              layout: { 'visibility': 'visible' },
              paint: { 'background-color': 'white' }
            }]
          }
          });

        // Setup event handlers..
        gfx.on('draw', this.deferredRedraw);  // respond to changes in the main map
        gfx.on('move', this.deferredRedraw);
        maplibre.on('move', this._map3dmoved);   // respond to changes in the 3d map
        maplibre.on('moveend', this._map3dmoved);

        // Add zoom and rotation controls to the map.
        const navOptions = { showCompass: true, showZoom: true, visualizePitch: false };
        maplibre.addControl(new maplibregl.NavigationControl(navOptions));

        return new Promise(resolve => {
          maplibre.on('load', () => {
            maplibre.setLight({
              anchor: 'viewport',
              color: '#ff00ff',
              position: [1, 200, 30],
              intensity: 0.3,
            });

            // Setup Sources.. Empty for now, we will fill them in later
            const EMPTY = { type: 'FeatureCollection', features: [] };
            maplibre.addSource('osmareas', { type: 'geojson', data: EMPTY });
            maplibre.addSource('osmroads', { type: 'geojson', data: EMPTY });
            maplibre.addSource('osmbuildings', {type: 'geojson', data: EMPTY });