feat(google-maps): DataLayer

[aline-almeida]

Feature Description

Hi! There should be a data layer wrapper so we could bind it easily with a GeoJson file, handle feature events and styling, just like other existing types of layers.

Could be something like

<google-map ......>
  <map-data-layer [data]="jsonData" (layerClick)="clicked($event)"  [style]="styleFunc">  </map-data-layer>
</google-map>

I think this has been referred to in #23611, but I can't seem to find the wrapper (not the code implementation)

Use Case

Loading GeoJson data into a map is a very common action and also useful. Having a wrapper would enable to take advantage of the binding features, instead of having to do everything by code

[angular-robot]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[aline-almeida]

Hello!
Any news on this?
Thanks

[helgetan]

any updates here?

[aline-almeida]

@andrewseguin can you provide a status update on this, please?
Thank you ;)

[inorganik]

If you have a reference to your map via ViewChild, it's easy to add geoJson to the map with the javascript api:

@ViewChild('map') googleMap: GoogleMap;
// for storing a reference to previously added geoJson
geoJsonFeatures: google.maps.Data.Feature[];

constructor() {}

addGeoJson(geoJson: any): void {
    // remove any previously added geoJson
    if (this.geoJsonFeatures) {
        this.geoJsonFeatures.forEach(feature => {
            this.googleMap.data.remove(feature);
        });
    }
    // here we set the style of the json (this only needs to be done once) - see 
    // https://developers.google.com/maps/documentation/javascript/reference/data#Data.StyleOptions
    this.googleMap.data.setStyle({
        clickable: false,
        fillColor: 'green',
        strokeWeight: 1
    });
    // actually add the geoJson, storing a reference to it
    this.geoJsonFeatures = this.googleMap.data.addGeoJson(geoJson);
}

[oddMLan]

For some reason adding the event manually doesn't work correctly.

app.component.ts

export class AppComponent implements OnInit {
  @ViewChild('mapRef') mapRef!: GoogleMap;

  constructor(private modalService: NgbModal) { }

    open(content: any) {
        this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then(
            (result) => {
                //this.closeResult = `Closed with: ${result}`;
            },
            (reason) => {
                //this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
            },
        );
    }

  ngAfterViewInit() {
    this.mapRef.data.addListener('click', (event: google.maps.Data.MouseEvent) => {
      this.clickMap(event)
    });
  }

  clickMap(event: any) {
    //console.log(event)
    this.open("test modal");
  }

app.component.html

<google-map #mapRef
  height="700px"
  width="100%"
  [zoom]="zoom"
  [center]="center"
  [options]="options"
  (idle)="idle()"
>
</google-map>


<button class="btn btn-lg btn-outline-primary" (click)="open('test modal')">Launch demo modal</button>

If you click the button it will open the modal correctly, but not when you click a feature. It will create the Modal in the DOM but not display it. Resizing the window fixes it (???). Here's a video that displays the issue.

This issue doesn't happen for the other events that are implemented natively in angular wrappers (mapClick, etc). Only when you try adding the event listener for the features manually.

For this reason, a proper implementation of a features wrapper in Angular like the OP suggested would be really helpful!