Help integrating an Plugin

[tabacha]

Hi, I try to use the leaflet.pm ( https://github.com/codeofsumit/leaflet.pm ) plugin with leaflet-ng2. I try to use your example from #251 :

This is my main-map.component.ts

import { Component, Directive, OnInit, AfterViewInit, ViewChild } from '@angular/core';
import 'leaflet';
import 'leaflet.pm';

@Component({
  selector: 'app-main-map',
  templateUrl: './main-map.component.html', // contains <yaga-map> ...</yaga-map>
  styleUrls: ['./main-map.component.css']
})
export class MainMapComponent implements OnInit, AfterViewInit  {

    constructor() {
    }

    ngOnInit() {

    }

    @ViewChild(MapComponent) private mapComponent: MapComponent;
    public ngAfterViewInit(): void {
        var options = {
            position: 'topleft', // toolbar position, options are 'topleft', 'topright', 'bottomleft', 'bottomright'
            drawMarker: true, // adds button to draw markers
            drawPolyline: true, // adds button to draw a polyline
            drawRectangle: false, // adds button to draw a rectangle
            drawPolygon: false, // adds button to draw a polygon
            drawCircle: false, // adds button to draw a cricle
            cutPolygon: false, // adds button to cut a hole in a polygon
            editMode: true, // adds button to toggle edit mode for all layers
            removalMode: true, // adds a button to remove layers
        };
       this.mapComponent.pm.addControls(options);
    }
}

In main-map.component.css I added in the first line: @import '~leaflet.pm/dist/leaflet.pm.css';

But then I get an error:

error TS2304: Cannot find name 'MapComponent'.

I also tried: import { MapComponent } from '@yaga/leaflet-ng2';

but this don't work because MapComponent is not exported.

[atd-schubert]

In every case you have to add import { MapComponent } from '@yaga/leaflet-ng2';. Otherwise it will not work...

But maybe you have multiple elements, or adding the map after ngAfterViewInit?

Just for your information, I don't know if leaflet.pm adds its .pm property also to the MapComponent or just to the prototype of L.Map.

You can try it this way first:

In your template:

<yaga-map #mainMap><!-- ... --></yaga-map>

In your controller:

import { Component, Directive, OnInit, AfterViewInit, ViewChild } from '@angular/core';
import { MapComponent } from '@yaga/leaflet-ng2';
import 'leaflet';
import 'leaflet.pm';

@Component({
  selector: 'app-main-map',
  templateUrl: './main-map.component.html', // contains <yaga-map> ...</yaga-map>
  styleUrls: ['./main-map.component.css']
})
export class MainMapComponent implements OnInit, AfterViewInit  {

    @ViewChild('mainMap', { read: MapComponent }) private mapComponent: MapComponent;
    constructor() {}

    ngOnInit() {}

    public ngAfterViewInit(): void {
        var options = {
            position: 'topleft', // toolbar position, options are 'topleft', 'topright', 'bottomleft', 'bottomright'
            drawMarker: true, // adds button to draw markers
            drawPolyline: true, // adds button to draw a polyline
            drawRectangle: false, // adds button to draw a rectangle
            drawPolygon: false, // adds button to draw a polygon
            drawCircle: false, // adds button to draw a cricle
            cutPolygon: false, // adds button to cut a hole in a polygon
            editMode: true, // adds button to toggle edit mode for all layers
            removalMode: true, // adds a button to remove layers
        };
       this.mapComponent.pm.addControls(options);
    }
}

[tabacha]

Hi I have checked this again, and now import { MapComponent } from '@yaga/leaflet-ng2' works. I don't know why it was not working yesterday. I guess i have made a silly spelling mistake.

Thank you!