I have a site in Angular10 where I'm showing a map using ngx-leaflet. But I cannot make the tilt works.. I need to show the map as a "navigation" view, I mean show the map to the front and not like from the sky as a GPS. So for that I need to set the tilt. But I cannot find how I can do that.
Below you have my code:
import { Component, OnInit, ViewChild } from '@angular/core';
import { icon, latLng, marker, polyline, tileLayer } from 'leaflet';
import { LeafletDirective } from '@asymmetrik/ngx-leaflet';
import { LocationService } from '../../services/location/location.service';
@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: [ './map.component.scss' ]
})
export class MapComponent implements OnInit {
// Define our base layers so we can reference them multiple times
// Source: https://asymmetrik.com/ngx-leaflet-tutorial-angular-cli/
streetMaps = tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
detectRetina: true,
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});
wMaps = tileLayer('http://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png', {
detectRetina: true,
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});
@ViewChild(LeafletDirective) leaflet!: LeafletDirective;
// Set the initial set of displayed layers (we could also use the leafletLayers input binding for this)
options = {
layers: [ this.streetMaps, this.route, this.summit, this.paradise ],
zoom: 16,
tilt: 90,
heading: -1,
center: latLng([ 0, 0 ])
};
constructor(private locationService: LocationService) {
}
ngOnInit(): void {
}
onMapReady(event){
this.locationService.getLocation().subscribe((res: any) => {
if (res.latitude && res.longitude) {
event.setView([res.latitude, res.longitude], this.options.zoom, {tilt: 90, heading: -1});
}
});
}
}
And the view is
<div class="map"
leaflet
[leafletOptions]="options"
(leafletMapReady)="onMapReady($event)"
[leafletLayersControl]="layersControl">
</div>
But it just show the view as a regular GPS, not with an angle like navigation flow.
I followed this example: https://asymmetrik.com/ngx-leaflet-tutorial-angular-cli/
