is it possible to use a custom UI instead of the default leaflet controls UI?
What do I want to do? I want to be able to use the leaflet controls from the toolbar I created.
I'm working with angular, the toolbar is a different component than the one where the map is created. I don't have any issue connecting both components, I just wanna know if I can, for example, activate the draw control from another place that isn't the main leaflet toolbar.
For example, we could call a custom component (the orange box) from the map component and pass in the map and other params we want to use.
<app-custom-control
[position]='"bottomleft"'
[map]='map[1]'
></app-custom-control>
@Component({
selector: 'app-custom-control',
templateUrl: './custom-control.component.html',
styleUrls: ['./custom-control.component.css']
})
export class CustomControlComponent implements OnInit, OnDestroy {
private _map: Map;
public custom: Control;
public currentLocation: LocData;
@Input() position: ControlPosition ;
constructor(private http: HttpClient, private changeDetector: ChangeDetectorRef) {
}
ngOnInit() {
this.currentLocation = new LocData();
}
ngOnDestroy() {
this._map.removeControl(this.custom);
this._map.off('click', this.onClick);
}
@Input() set map(map: Map){
if (map){
this._map = map;
let Custom = Control.extend({
onAdd(map: Map) {
return DomUtil.get('custom');
},
onRemove(map: Map) {}
});
this.custom=new Custom({
position: this.position
}).addTo(map);
map.on('click', this.onClick, this);
}
}
get map(): Map {
return this._map
}
private onClick(e): void {
let location = e.latlng;
this.getNominatim(location).subscribe(response => {
this.currentLocation = new LocData(response, location);
this.changeDetector.detectChanges();
})
}
private getNominatim(location: LatLng): Observable<object> {
return this.http.get(
`https://nominatim.openstreetmap.org/reverse?format=jsonv2&zoom=12&addressdetails=1&lat=${location.lat}&lon=${location.lng}`,
{
responseType: 'json'
});
}
}
Working example: https://stackblitz.com/edit/angular-leaflet-custom-dvv2bj?file=src%2Fapp%2Fcustom-control%2Fcustom-control.component.ts