0

I have dropbox with several equations (i.e km, m, cm). Initially map loaded with km values. 

 <div leaflet style="height: 800px; width: 100%" 
  [leafletOptions]="options" 
  (leafletMapReady)="onMapReady($event)" 
  [leafletBaseLayers]="baseLayers"
  [leafletMarkerCluster]="markerClusterData" 
  [leafletMarkerClusterOptions]="markerClusterOptions"
  (leafletMarkerClusterReady)="markerClusterReady($event)">
</div>

If user selects meter, I would like to reload/refresh map with new calculations (i.e km*1000). Mainly, would like to update popup and legend, but it is fine to full reload of the map. How to emit event to reload the map with new values? Thank you

Bahodir
  • 539
  • 1
  • 9
  • 29

1 Answers1

0

I am not sure I fully understand your question but maybe like this?

In HTML template:

<select (change)="changed($event)">
  <option value="km">km</option>
  <option value="m">m</option>
  <option value="cm">cm</option>
</select>

And in TS file:

changed($event) {
 reloadWithUnits($event.srcElement.value);
}

For @angular/material:

<mat-select (valueChange)="changedMat($event)" placeholder="Select units">
  <mat-option value="km">km</mat-option>
  <mat-option value="m">m</mat-option>
  <mat-option value="cm">cm</mat-option>
</mat-select>

and TS:

changedMat($event) {
 reloadWithUnits($event);
}

In reloadWithUnits(); I would try to change options or wherever the units are. It should be detected as changed as it is input parameter for leaflet.

PeS
  • 3,757
  • 3
  • 40
  • 51
  • Thanks for your reply. I am building Legends on leaflet map like onMapReady($event) `map.on('baselayerchange', (eventLayer) => {...}`. From your example, on valueChange->changedMat() I want to rebuild maps Legend. Do I have to emit baselayerchange event? I was wondering is there any elegant way – Bahodir Jul 31 '18 at 09:02
  • I suppose so. I am sorry I do not know leaflet, I thought you were struggling with catching the scale change from dropbox/select. Silly me :( – PeS Jul 31 '18 at 10:52
  • Thanks man for the response :). For now I will go with firing baselayerchange event. – Bahodir Jul 31 '18 at 12:51