Hi,
I’m using Leaflet 1.7.1 in a Ionic4 component.
I’ve installed the plugin in this way:
npm install leaflet@latest --save
This is the code of the component:
export class PathmapComponent implements OnInit, OnDestroy {
...
pathMap: Leaflet.Map;
ngOnInit() {
// Init the map
this.leafletMap();
}
leafletMap() {
this.pathMap = Leaflet.map('pathMapId').setView([41.125426, 16.871062], 5);
Leaflet.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(this.pathMap);
}
This is the html of the component:
<ion-content class="map_container">
<div id="pathMapId" class="map_view"> </div>
</ion-content>
And this is the css of the component:
@import "~leaflet/dist/leaflet.css";
.map_container {
max-height: 200px;
border: 1px solid red;
}
.map_view {
height: 100%;
width: 100%;
overflow: hidden;
}
In the page that shows the component I can see the map, but it shows partially and it is not centered in the right coordinates:
Which could be the problem according to you?
cld