leaflet.js beginner map showing grey screen

Question

I'm trying to start off with leaflet.js but I'm unable to actually draw a simple map, and instead I get a grey screen. I have an index.html, logic.js, style.css, and a config.js file where I have my mapbox api key

I have the leaflet & css links on my html file, so I don't suspect the problem to be there.

this is my logic.js file:

var myMap = L.map("map", {
  center: [45.52, -122.67],
  zoom: 13
});

//Adding a tile layer (the background image map) to our Map
//We use the addTo method to add objects to our Map

L.tilelayer("https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}", {
  attribution: "Map data &copy; <a href=\"https://www.openstreetmap.org/\">OpenStreetMap</a> contributors, <a href=\"https://creativecommons.org/licenses/by-sa/2.0/\">CC-BY-SA</a>, Imagery © <a href=\"https://www.mapbox.com/\">Mapbox</a>",
  maxZoom: 18,
  id: "mapbox.streets",
  accessToken: api_key
}).addTo(myMap);

and my index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Basic Map</title>

  <!-- Leaflet CSS & JS -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css"
  integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
  crossorigin=""/>
  <script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"
  integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q=="
  crossorigin=""></script>

  <!-- Our CSS -->
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <!-- The div where we will inject our map -->
  <div id="map"></div>

  <!-- API key -->
  <script type="text/javascript" src="config.js"></script>
  <!-- JS -->
  <script type="text/javascript" src="logic.js"></script>
</body>
</html>

If anyone has any idea what's causing my error, I'd appreciate your help. Also, one specific question I have is: is there a difference between an "access token" and an "api key"?

Thanks

Answer 1

Try defining height and width to the map division. It worked for me.

#map{
height:100%;
width:100%
}

leaflet.js beginner map showing grey screen

Question

1 answers

solution1
0 2020-06-09 05:43:56

leaflet.js beginner map showing grey screen

Question

1 answers

solution1 0 2020-06-09 05:43:56

solution1
0 2020-06-09 05:43:56