Angular 2 / leaflet map, How to link marker popup to component? ... routerLink?

There is a very simple approach and a very complex one.

A simple approach is to use raw HTML with an anchor element outside angular without RouterLink . Register to click this binding element and use the Router service for navigation.

The challenge was to exchange links, but the actual problem is much deeper, now it is linking next time showing the angular component ...

So, for a comprehensive solution:

This is a very complex topic ... Not only does it involve the use of angular best practices, which it has also pushed forward in implementing the flyer.

I'll do my best to convey the message, but due to the complexity, the examples will be very simple and take work.

First is the angular scope.

An HTML string containing directives, components or channels will never work, the only way is to initialize the View

Define A View as a reference to a component view instance, or...

They are called ComponentRef and TemplateRef

So, we have 2 ways to solve this problem. Since I cannot do this, I will go with ComponentRef , but note that you can use TemplateRef as well . With templates, you first need to get the template defined in the component as well as the ViewContainerRef to attach that template to.

We will create a service that takes a Marker leaf and binds to the click event of the marker, after which it will open a popup which is angular.

The component is simple, it displays a link.

@Component({
  selector: 'facility-link',
  template: `Facility <br/> <a routerLink="{{link}}"> View Two</a>`
})
export class FacilityLinkComponent {
  public link: string;
  constructor() { }
}

      

        
        
        
      

    

Now for the service:

@Injectable()
export class LinkPopupService {

  constructor(private cfr: ComponentFactoryResolver,
              private injector: Injector,
              private appRef: ApplicationRef) { }


  register(marker: leaflet.Marker, link: string): void  {
    marker.on('click', ($event: leaflet.MouseEvent)  => this.popup($event.target, link) );
  }

  popup(marker: leaflet.Marker, link: string) {
    const cmpFactory = this.cfr.resolveComponentFactory(FacilityLinkComponent);
    const componentRef = cmpFactory.create(this.injector);
    componentRef.instance.link = link;
    this.appRef.attachView(componentRef.hostView);
    const markerElement = marker.getElement();
    markerElement.parentElement.appendChild(componentRef.location.nativeElement);

    const markerPos = leaflet.DomUtil.getPosition(markerElement);
    const markerClass = leaflet.DomUtil.getClass(markerElement);


    leaflet.DomUtil.setTransform(componentRef.location.nativeElement, markerPos);
    leaflet.DomUtil.setClass(componentRef.location.nativeElement, markerClass);
  }
}

      

        
        
        
      

    

The register method takes a token and a link and registers a click event.

When the popup method fires, it uses angular tools to instantiate the FacilityLinkComponent view , set the link to bind to the future, attach the view to it and attach that to the DOM.

All this happens in the first 5 lines of code.

Some notes:

• We need to attach a view to change how detection works.
• A correct implementation will allow you to set the ViewContainerRef and / or Injector - this is required when using lazy loading.
• It is preferable to send data to the component via an injector rather than by destination (ReflectiveInjector)
• Proper cleanup required (destroy component and detach view)
• You need to add switching logic and also clear navigation.

leaflet

The code from line 6 does the positioning of the popup.

This is very simple logic, it just copies everything from the marker.

This is why I used a marker, so I will have a positioning reference.

In the real world example, you need to get the panel and point the components to their own layer by calculating the position. It's not that hard as the flyer has all the helper in it, but it was too much for that.

Hope it helps.