Angular-google-maps: Better Support for Data.setStyle() function

[jderuere]

Issue description

Set style parameter should support parameter of type StylingOptions of function: (f: Feature) => StylingOptions.

Documentation: https://developers.google.com/maps/documentation/javascript/3.exp/reference#Data

Example: https://developers.google.com/maps/documentation/javascript/examples/layer-data-dynamic#try-it-yourself

Steps to reproduce and a minimal demo of the problem

Try to customize color of a Data Layer e.g: Feature from a Geojson

Current behavior

Parameter for setStyle is () => void, which doesn't match Google API documentation

Expected/desired behavior

Fix parameter

angular2 & angular-google-maps version

agm/core: "1.0.0-beta.0"

[neilor]

Nice addition man!

I'll use this opportunity to talk about this style function behavior because the documentation isn't enough.

Based on your changes and the expected behavior, how many times and when this function will be called on agm-data-layer?

Using implementation demonstrated above, I have no calls. Never!

My Implementation

using: release core-1.0.0-beta.0

// component.ts
// places.geoJSON: GeoJSON.FeatureCollection
placeStylize(feature: google.maps.Data.Feature): google.maps.Data.StyleOptions {
    console.log('stylizing feature:', feature);
    if (feature.getProperty('editing')) {
      return {
        strokeOpacity: 0.1,
        fillOpacity: 0.1,
        clickable: false
      };
    }
    return {};
  }

<agm-map
  [fitBounds]="map.bounds" [zoom]="map.zoom" [styles]="map.styles" [mapTypeId]="map.typeId"
  [mapTypeControl]="map.typeControl.enabled" [mapTypeControlOptions]="map.typeControl.options"
  (mapReady)="map.onReady($event)"
  #agmMap id="sebm-map">
    <agm-data-layer [geoJson]="places.geoJSON" [style]="placeStylize" (layerClick)="onPlaceClick($event)"></agm-data-layer>
</agm-map>

[jderuere]

Yes you're right. It needs some more improvement.

I was more thinking in this case:

geos: any[]; //GeoJson array

onMapReady(map: GoogleMap) {
    geos.forEach(geo => map.data.addGeoJson(geo));
    map.data.setStyle(feature => feature.getProperty('style'));
}

[figuerres]

I am not sure if the following is a separate bug or part of the issue here.
i have a data layer that is loaded and the first time the style works, but when the user action has my code load a new geoJSON the map is updated with the new shape or line but the style goes back to the default.
for example a purple line is the requested style but when the json changes the line is black.
the style function is called, it sees a new feature object. but the style is not right.

[pixelatorz]

@figuerres same here

[MadhuAloor]

@neilor can you please share the map property or the example you mentioned above it would really help me ?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[raduanastase]

I'm trying to understand if we have a general way to apply styles. Like how setStyle works directly in the google API.

[raduanastase]

Scratch that. I'm still trying to figure out a way to make styling of the GeoJSON data work in any way. Is there a way? I tried using stylers, but with no avail. Also the stackblitz code that I found as an example, also doesn't seem to work.
https://stackblitz.com/edit/angular-google-maps-demo-mgxqnr?file=app/app.component.ts