data layer styling, geoJSON change no styles apply

[figuerres]

Issue description
i have an app that allows the user to select a different geoJSON object for the map.
when the map is first drawn all is good.

when the geoJSON changes the new line is drawn but the styles are not applied.

Steps to reproduce and a minimal demo of the problem
i tried to create a plunk but i am working with angular CLI , not sure how to switch up.

_Use https://plnkr.co or similar -- try this template as a starting point: http://plnkr.co/edit/YX7W20?p=preview

What steps should we try in your demo to see the problem?

Current behavior
updated map loses style

Expected/desired behavior
updated map has style

angular2 & angular-google-maps version
AGM 1, angular 4

Other information

[figuerres]

if i set my object to null and then call my service and it sets a new json the item will draw fresh as i have an ngif in my code for a null json object.
so the code that creates the datalayer and styles each feature is working right.
but the code that sees a change in the bound variable does not update the map and data layer correctly.

• the geography is updated but the styles go to defaults of black lines and grey fill.

[lazarljubenovic]

If a plunker is problematic, could you provide a demo repo? Then you can still use the CLI for it, and we could just clone it.

[figuerres]

will see if i have time to get one made, if i do i will post back here with info.

[IlianSchokkaert]

The issue seems to be that the manager gets called with empty dataOptions when the geoJson is updated. This is because only the geoJson is present in the changes object and the style function isn't (although it was set during the initialization of the layer, causing the confusion).

File: core/directives/data-layer.ts

ngOnChanges(changes: SimpleChanges) {
    if (!this._addedToManager) {
      return;
    }

    var geoJsonChange = changes['geoJson'];
    if (geoJsonChange) {
      this._manager.updateGeoJson(this, geoJsonChange.currentValue);
    }

    let dataOptions: DataOptions = {};
    const optionKeys = Object.keys(changes).filter(
      k => AgmDataLayer._dataOptionsAttributes.indexOf(k) !== -1);
    optionKeys.forEach(k => (<any>dataOptions)[k] = changes[k].currentValue);
    this._manager.setDataOptions(this, dataOptions);
}

A possible solution:

ngOnChanges(changes: SimpleChanges) {
    if (!this._addedToManager) {
      return;
    }

    var geoJsonChange = changes['geoJson'];
    if (geoJsonChange) {
      this._manager.updateGeoJson(this, geoJsonChange.currentValue);
    }
    
    let dataOptions: DataOptions = {};
    
    dataOptions['style'] = changes.hasOwnProperty('style') ? 
                                              ? changes['style'].currentValue
                                              : this.style;

    this._manager.setDataOptions(this, dataOptions);
}

What do you guys think? ( @SebastianM)

[nils-mohr]

+1
i've tested this and works in my case. Thumbs up!

[sodongit]

Any Ideas when this fix will be pushed into master?

[CanWeb]

@IlianSchokkaert

Hi,

I have the same problem. My file is not data-layer.ts but data-layer.js.

Do you know how write the same thing in javascript?

Thank you very much!!!