leaflet not loading tiles

Question

I am trying to show a leaflet map on my ionic App but it doesn't show anything except the marker I created!
As you can see, there are no requests to leaflet OR mapbox servers (I use mapbox)

And this is my code:

import { Component } from "@angular/core";
import leaflet from "leaflet";

@Component({
    templateUrl: "test-map.html"
})
export class TestMap {
    leafletMap: any;

    constructor() {}

    ionViewDidLoad() {
        this.leafletMap = leaflet.map("leafletmap", {
            center: [28.618072, 51.538088],
            zoom: 18,
            maxZoom: 18
        });

        this.openMap();
    }

    openMap() {
        setTimeout(() => {
            this.leafletMap.invalidateSize();
        }, 0);

        leaflet.tileLayer(
            "https://api.tiles.mapbox.com/v4/{id}" +
                "/{z}/{x}/{y}.png?access_token={my-access-token}",
            {
                attribution: "",
                maxZoom: 18,
                id: "mapbox.streets",
                accessToken: "{my-access-token}"
            }
        );

        this.leafletMap.setView(leaflet.latLng(28.618072, 51.538088));

        leaflet.marker([28.618072, 51.538088]).addTo(this.leafletMap);
    }
}

As you can see I already tried invalidateSize!

How can I solve this issue?

did you pass the real access token instead of " my-access-token" ? if not check your access token in your mapbox account and try again — A.HADDAD
You're not adding the L.Tilelayer to the map - i.e. leaflet.tileLayer(...) vs leaflet.tileLayer.addTo(map). — IvanSanchez
@IvanSanchez worked! please send your comment as an answer to mark it as the correct one. — Amir Sasani

Amir Sasani Amir Sasani · Accepted Answer · 2019-08-01T07:15:42

As @IvanSanchez mentioned in comments, I should add the tileLayer to the map:

leaflet.tileLayer(
            "https://api.tiles.mapbox.com/v4/{id}" +
                "/{z}/{x}/{y}.png?access_token={my-access-token}",
            {
                attribution: "",
                maxZoom: 18,
                id: "mapbox.streets",
                accessToken: "{my-access-token}"
            }
        ).addTo(this.leafletMap);

leaflet not loading tiles

1 Answers