CODEWITHSUNDEEP
angularleafletngx-leaflet
Ksmith
Ksmith

Reputation: 1

Angular custom components in ngx-leaflet popups

We are switching from google maps to OSM using Leaflet and ngx-leaflet. The issue is we have many templates that use the map-info-window component of google maps, which displays custom popups. I have the leaflet in it's own component in which each component that has a map calls it, passing an array of markers objects containing locations and other info for each marker, I'm passing the popup as a string of HTML. When you click on the marker it is blank. I can use regular html and it works as expected. Is there something I need to do to the HTML to render it as custom components?

(old component) map-google-container.html

<map-info-window>
  <div class="project-info" *ngFor="let item of group">
      <app-chart-map-popup [item]="item"></app-chart-map-popup>
      <app-view-popup [item]="item" [isOpen]="i === infoIdx"></app-view-popup>
  </div>
</map-info-window>

(new component) map-osm-container.html

<app-map [locations]="locationGroupedItems"></app-map>

map-osm-container.component.ts

...
private createMarkerInfo (locations){
    return locations.map(loc => {
     loc[0].info = '<div class="project-info" *ngFor="let item of group">
        <app-chart-map-popup [item]="item"></app-chart-map-popup>
        <app-view-popup [item]="item" [isOpen]="i === infoIdx"></app-view-popup>
        </div>';
     return loc;
    }); 
  }

map.component.ts

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
   styleUrls: ['./map.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
})
export class MapComponent implements OnChanges {
    @Input() locations: any[];
...
    configureMap(map){
      setTimeout(() => {
        this.locations.forEach(loc => {
          
          const myMarker = L.marker([loc[0].latitude,loc[0].longitude], markerOptions);
          myMarker.bindPopup(loc[0].info);
          this.markers.addLayer(myMarker);      
        }
        map.addLayer(this.markers);
      }); 
       
    }, 0);
  }
}

I have tried passing in the HTML string but it doesn't render. What should I do to render the Angular components?

Upvotes: 0

Views: 41

Answers (0)

Related Questions