How to programmatically create polylines ?

[landru29]

since #290, the following instruction does not work anymore:

const mainMap: YagaMapComponent;
...
const shapePolyline = new YagaPolylineDirective<GeoJSON.GeometryCollection>(mainMap);

How to do now ?

version 1.0.0-rc9 introduced breaking changes !

[atd-schubert]

In the programmatic way you are right that there is an API change, but there is no change as long as you use it in the "normal" Angular way. We introduce providers with PR #295. Angular uses it's dependency injection to provide the providers automatically, but it will not provide this in a "programatic" way, of course. Some of these providers are used to get access to a parent element (in most cases the LayerGroupProvider) some of them are used to propagate the class itself as provider.

For your Issue this change is where the breaking changes are made in.

You should fix your script in this way:

const mainMapProvider: { ref: YagaMapComponent }; // you have to provide an already existing ref
const layerProvider: { ref: L.Layer } = {}; // ref will be set in the directive
...
const shapePolyline = new YagaPolylineDirective<GeoJSON.GeometryCollection>(mainMapProvider, layerProvider);

• Your mainMapProvider must be type of LayerGroupProvider.
• Your layerProvider must be type of LayerProvider.

This change concerns every directive in leaflet-ng2! One advantage is that it is possible to use layer-groups and with that one is able to build tree structures with layers.

FYI: We introduced a lot of other providers, also.

If this solves your problem, please close this issue.

[landru29]

Great ! It works ! Thanks

here is my angular5 code:

@ViewChild('mainMap')
  public mainMap: YagaMapComponent;

  @ViewChild('mainLayer')
  public mainLayer: YagaTileLayerDirective;

   public tileUrl = "http://b.tile.openstreetmap.org/{z}/{x}/{y}.png";

initPolyline () {
    const layerGroupProvider = new  LayerGroupProvider();
    layerGroupProvider.ref = this.mainMap;

    const layerProvider = new LayerProvider();
    layerProvider.ref = this.mainLayer;

    const shapePolyline = new YagaPolylineDirective<GeoJSON.GeometryCollection>(layerGroupProvider, layerProvider);

   shapePolyline.setLatLngs([
    new LatLng(10, 10),
    new LatLng(20,20),
   ]);
}

and the HTML

 <div class="map">
    <yaga-map #mainMap>
         <yaga-tile-layer [url]="tileUrl" #mainLayer></yaga-tile-layer>
    </yaga-map>
</div>

[atd-schubert]

Oh! This seems to be quite dangerous what you are doing...

At lease do not import the #mainLayer this way! Just pass an empty LayerProvider.

Like this:

@ViewChild('mainMap')
  public mainMap: YagaMapComponent;

  // You can still use this for a different purpose, but not for your issue...
  // @ViewChild('mainLayer')
  // public mainLayer: YagaTileLayerDirective;
  public mainLayerProvider: LayerProvider = new LayerProvider();

  public tileUrl = "http://b.tile.openstreetmap.org/{z}/{x}/{y}.png";

  initPolyline () {
    const layerGroupProvider = new  LayerGroupProvider();
    layerGroupProvider.ref = this.mainMap;

    const layerProvider = new LayerProvider();
    // DO NOT APPLY HERE!: layerProvider.ref = this.mainLayer;

    const shapePolyline = new YagaPolylineDirective<GeoJSON.GeometryCollection>(layerGroupProvider, layerProvider);

    // now:
    // layerProvider.ref === this.mainLayer!

   shapePolyline.setLatLngs([
    new LatLng(10, 10),
    new LatLng(20,20),
   ]);
}

[landru29]

ok,I fix my code Thanks for your support.