How can i add marker group to layer control

[ganigapeta]

We will have multiple markers under every select, please check my code snippet and suggest me.

<yaga-map
          [zoom]="mapConfig.zoom"
          [lat]="mapConfig.lat" 
          [lng]="mapConfig.lng"
          [minZoom]="mapConfig.minZoom"
          [maxZoom]="mapConfig.maxZoom">  
          <yaga-tile-layer [url]="tileLayerUrl"></yaga-tile-layer>
          <yaga-layers-control [position]="mapConfig.layerControl.position" opacity="1">
            <yaga-circle-marker stroke="false" 
                  fillColor="red" 
                  fillOpacity="1" 
                  yaga-overlay-layer="Parking" 
                  [lat]="12.971599" 
                  [lng]="77.594563">
            </yaga-circle-marker>
            <yaga-circle-marker yaga-overlay-layer="lighting" [lat]="13.971599" [lng]="78.594563"></yaga-circle-marker>
            <yaga-circle-marker yaga-overlay-layer="Marker" [lat]="15.971599" [lng]="79.594563"></yaga-circle-marker>
         </yaga-layers-control>
</yaga-map>

[atd-schubert]

If you want to handle a group of markers in layer control at once (I understand it like that from your issue title), then you have to put your markers in a FeatureGroupDirective, like this:

<yaga-map
          [zoom]="mapConfig.zoom"
          [lat]="mapConfig.lat" 
          [lng]="mapConfig.lng"
          [minZoom]="mapConfig.minZoom"
          [maxZoom]="mapConfig.maxZoom">  
          <yaga-tile-layer [url]="tileLayerUrl"></yaga-tile-layer>
          <yaga-layers-control [position]="mapConfig.layerControl.position" opacity="1">
            <yaga-feature-group yaga-overlay-layer="Marker">
              <yaga-circle-marker stroke="false" 
                  fillColor="'red'" 
                  fillOpacity="1" 
                  [lat]="12.971599" 
                  [lng]="77.594563">
              </yaga-circle-marker>
              <yaga-circle-marker [lat]="13.971599" [lng]="78.594563"></yaga-circle-marker>
              <yaga-circle-marker [lat]="15.971599" [lng]="79.594563"></yaga-circle-marker>
            </yaga-feature-group>
         </yaga-layers-control>
</yaga-map>

Does this solve your problem?

Update: I think you make a typo here: fillColor="'red'"!

[ganigapeta]

Yes, it solved my problem, thanks a lot.

fillColor="'red'" doesn't work for me, it is working without quotes only.

[ganigapeta]

@atd-schubert ,one last question, How can i bind a value to overlay layer yaga-overlay-layer="Marker"

[ganigapeta]

@atd-schubert , I am trying to iterate featuregroup and inside markers but some how it's not working below is my snippet.

<yaga-feature-group yaga-overlay-layer="group.name" *ngFor="let group of mapConfig.layerControl.markersGroup">
                  <yaga-circle-marker *ngFor="let marker of group.markers"                        
                        [lat]="marker.lat" 
                        [lng]="marker.lng">
                  </yaga-circle-marker>                  
</yaga-feature-group> 

JSON

...
markersGroup: [{
        name: 'Parking',
        markers: [{
          lat: 13.971599,
          lng: 15.971599
        },
        {
          lat: 14.971599,
          lng: 16.971599
        },
        {
          lat: 17.971599,
          lng: 19.971599
        }]
      },
      {
        name: 'Lighting',
        markers: [{
          lat: 10.971599,
          lng: 11.971599
        },
        {
          lat: 12.971599,
          lng: 13.971599
        },
        {
          lat: 13.971599,
          lng: 14.971599
        }]
      }]
....

Output:

[atd-schubert]

The yaga-overlay-layer is a directive and not a Angular Input. We just use the string value for that. But I'm not sure at the moment if we should change this again to have more consistency to the other directives.

The solution is inserting your value the mustache way, like this:

<yaga-feature-group yaga-overlay-layer="{{ group.name }}" *ngFor="let group of mapConfig.layerControl.markersGroup">

[ganigapeta]

@atd-schubert, it is throwing an error if i use mustache way, please find below error .

[ganigapeta]

@atd-schubert can you provide any suggestion to add values dynamically to overlay-layer

[atd-schubert]

I had never tested it with dynamic values. I think this is more or less a bug. In addition I'm thinking about to change the behavior to a normal Angular-Input. Maybe I have some minutes to change and test it, later...

[ganigapeta]

@atd-schubert Thanks for quick reply

[atd-schubert]

FYI: @ganigapeta check out #392 ...

[ganigapeta]

Thanks @atd-schubert it is really helpful.