_mapApiLoaded called before object is fully initialized

[rbjarnason]

When using google-streetview-pano with iron-pages, going between pages causes this element to fail as data bindings for this.panoId and this.position have not been initialized at the time of the _mapApiLoaded callback.

In the use below, it works fine the first time I load the page, but after using iron-pages to flip between pages a second load will trigger the _mapApiLoaded callback before the _getMapPosition has had a chance to set the this.position value.

 <google-streetview-pano
            position="[[_getMapPosition()]]"
            heading="330"
            pitch="2"
            zoom="0.8"
            disable-default-ui>
          </google-streetview-pano>

This can be fixed by wrapping _mapApiLoaded contents in this.async but its a bit hacky as I don't understand why this is happening. What do you guys think?

    _mapApiLoaded: function() {
      this.async(function() {
        this.pano = new google.maps.StreetViewPanorama(this.$.pano, this._getPanoOptions());
        this.pano.setVisible(true);

        if (this.disableAutoPan) {
          return;
        }
        // Kickoff the rotating animation
        this.rAFid = requestAnimationFrame(this.update.bind(this));
      });
    },

[rbjarnason]

Fails like this because there is no panoId and no position:

[ebidel]

@robdodson can you take a look?

[robdodson]

@rbjarnason how is your page setup? _mapApiLoaded should only run once so I'm confused why you're seeing it happen twice when you change pages

[robdodson]

oh maybe this is the culprit: https://github.com/rbjarnason/your-priorities-app/blob/master/client_app/elements/yp-idea/yp-idea-cover-media.html#L62

Why do you need restamp: true?

[rbjarnason]

@robdodson I've done some more research into this and here is what I found so far.

I had two levels of restamp in the yp-idea-cover-media element, I only needed the one at the top level.
https://github.com/rbjarnason/your-priorities-app/blob/master/client_app/elements/yp-idea/yp-idea-cover-media.html#L56

Here is what happens when I use restamp.

1. I add new idea, selecting a location and displaying a Google map as cover-media, it will display as a card on the screen correctly.
2. I add another idea with a location but select streetview as cover-media and it is displayed as a card correctly showing Google Maps and Streetview side by side.

When I don't use restamp:

1. I add a new idea with map and it is displayed as a card, correctly.
2. I add a new idea with streetview and it not displayed as streetview but as a Google map, incorrectly. Showing two Google maps on the screen.

This probably has something to do with the inner dom-ifs and if="_withCoverMediaType()". But I don't understand why, I would have thought that when I add a new yp-idea-card (which holds yp-idea-cover-media) to the DOM it would be completely separate instance not reusing something from another instance of the element. Here is where I repeat over the yp-idea-cards to be displayed:
https://github.com/rbjarnason/your-priorities-app/blob/master/client_app/elements/yp-group/yp-group.html#L53

In the meantime the _mapApiLoaded this.async hack seems to work nicely for me but would be good to understand why this isn't working as expected...

[rbjarnason]

@robdodson Another curious issue, while not strictly relevant to this repo, it might be connected.

I have a dom-if with if="[[idea]]" and restamp, the same as above:
https://github.com/rbjarnason/your-priorities-app/blob/master/client_app/elements/yp-idea/yp-idea-cover-media.html#L56

Tonight I was adding a feature to set the zoom level on the map from the database, a location.map_zoom property on the idea object.
https://github.com/rbjarnason/your-priorities-app/blob/master/client_app/elements/yp-idea/yp-idea-cover-media.html#L73

After flipping between pages, I started to get Uncaught TypeError: Cannot read property 'location' of null errors and sometimes stack level too deep, when trying to read the zoom level from the idea object here:
https://github.com/rbjarnason/your-priorities-app/blob/master/client_app/elements/yp-idea/yp-idea-cover-media.html#L101

Somehow the top level dom-if with [[idea]] still, on reuse, never after a fresh page reload, result in the child elements having an idea object that is null. I would have thought by wrapping the whole thing in a dom-if I could always expect to have a valid idea object inside the dom-if.

I got around this by adding more checks inside the dom-if if the idea object is really valid and everything works now...

[LeongTitanFour]

Hi all.
I click these links to open but it is error (404) that there is none. Please give me links, thanks

[rbjarnason]

Hi - this is quite old ;) but here is the file in question with the right path: https://github.com/CitizensFoundation/your-priorities-app/blob/master/client_app/src/yp-post/yp-post-cover-media.html