selectImage: function()

in modules/services/streetside.js [714:869]

• 126 lines of code
• 8 McCabe index (conditional complexity)

  selectImage: function (d) {
    let that = this;
    let viewer = d3_select('#photoviewer');
    if (!viewer.empty()) viewer.datum(d);

    this.setStyles(null, true);

    let wrap = d3_select('#photoviewer .ms-wrapper');
    let attribution = wrap.selectAll('.photo-attribution').html('');

    wrap.selectAll('.pnlm-load-box')   // display "loading.."
      .style('display', 'block');

    if (!d) {
      return Promise.resolve({ status: 'ok' });
    }

    let line1 = attribution
      .append('div')
      .attr('class', 'attribution-row');

    // Add hires checkbox
    let label = line1
      .append('label')
      .attr('class', 'streetside-hires');

    label
      .append('input')
      .attr('type', 'checkbox')
      .attr('id', 'streetside-hires-input')
      .property('checked', _hires)
      .on('click', () => {
        d3_event.stopPropagation();

        _hires = !_hires;
        _resolution = _hires ? 1024 : 512;
        wrap.call(setupCanvas, true);

        let viewstate = {
          yaw: _pannellumViewer.getYaw(),
          pitch: _pannellumViewer.getPitch(),
          hfov: _pannellumViewer.getHfov()
        };

        that.selectImage(d)
          .then(response => {
            if (response.status === 'ok') {
              _sceneOptions = Object.assign(_sceneOptions, viewstate);
              that.showViewer();
            }
          });
      });

    label
      .append('span')
      .text(t('streetside.hires'));


    let captureInfo = line1
      .append('div')
      .attr('class', 'attribution-capture-info');

    // Add capture date
    if (d.captured_by) {
      const yyyy = (new Date()).getFullYear();

      captureInfo
        .append('a')
        .attr('class', 'captured_by')
        .attr('target', '_blank')
        .attr('href', 'https://www.microsoft.com/en-us/maps/streetside')
        .text('©' + yyyy + ' Microsoft');

      captureInfo
        .append('span')
        .text('|');
    }

    if (d.captured_at) {
      captureInfo
        .append('span')
        .attr('class', 'captured_at')
        .text(localeTimestamp(d.captured_at));
    }

    // Add image links
    let line2 = attribution
      .append('div')
      .attr('class', 'attribution-row');

    line2
      .append('a')
      .attr('class', 'image-view-link')
      .attr('target', '_blank')
      .attr('href', 'https://www.bing.com/maps?cp=' + d.loc[1] + '~' + d.loc[0] +
        '&lvl=17&dir=' + d.ca + '&style=x&v=2&sV=1')
      .text(t('streetside.view_on_bing'));

    line2
      .append('a')
      .attr('class', 'image-report-link')
      .attr('target', '_blank')
      .attr('href', 'https://www.bing.com/maps/privacyreport/streetsideprivacyreport?bubbleid=' +
        encodeURIComponent(d.key) + '&focus=photo&lat=' + d.loc[1] + '&lng=' + d.loc[0] + '&z=17')
      .text(t('streetside.report'));


    let bubbleIdQuadKey = d.key.toString(4);
    const paddingNeeded = 16 - bubbleIdQuadKey.length;
    for (let i = 0; i < paddingNeeded; i++) {
      bubbleIdQuadKey = '0' + bubbleIdQuadKey;
    }
    const imgUrlPrefix = streetsideImagesApi + 'hs' + bubbleIdQuadKey;
    const imgUrlSuffix = '.jpg?g=6338&n=z';

    // Cubemap face code order matters here: front=01, right=02, back=03, left=10, up=11, down=12
    const faceKeys = ['01','02','03','10','11','12'];

    // Map images to cube faces
    let quadKeys = getQuadKeys();
    let faces = faceKeys.map((faceKey) => {
      return quadKeys.map((quadKey) =>{
        const xy = qkToXY(quadKey);
        return {
          face: faceKey,
          url: imgUrlPrefix + faceKey + quadKey + imgUrlSuffix,
          x: xy[0],
          y: xy[1]
        };
      });
    });

    return loadFaces(faces)
      .then(() => {
        _sceneOptions = {
          showFullscreenCtrl: false,
          autoLoad: true,
          compass: true,
          northOffset: d.ca,
          yaw: 0,
          minHfov: minHfov,
          maxHfov: maxHfov,
          hfov: defaultHfov,
          type: 'cubemap',
          cubeMap: [
            _dataUrlArray[0],
            _dataUrlArray[1],
            _dataUrlArray[2],
            _dataUrlArray[3],
            _dataUrlArray[4],
            _dataUrlArray[5]
          ]
        };
        return { status: 'ok' };
      });
  },