CODEWITHSUNDEEP
javascripthtmlleafletmaps
Kylefrancis Atienza
Kylefrancis Atienza

Reputation: 9

LeafletJS tiles not showing only grey

So I am working on a project that includes using leafletJS I just copied the code from the quick start guide but the map won't display I didn't change anything except for the map div height so I'm confused about what the problem is

here's the code

var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1,
    accessToken: 'your.mapbox.access.token'
}).addTo(mymap);
#mapid { height: 100vh; }
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaflet Test</title>

    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
        crossorigin="" />
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""></script>

    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="mapid"></div>

    <script src="script.js"></script>
</body>

</html>

Upvotes: 0

Views: 166

Answers (1)

Falke Design
Falke Design

Reputation: 11378

You need a token accessToken: 'your.mapbox.access.token' you can get this over mapbox.com.

Else you can use other providers: https://leaflet-extras.github.io/leaflet-providers/preview/

For example openstreetmap:

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(mymap)

Upvotes: 1

Related Questions