map using leaflet not showing using javascript

Question

Why is the map not showing when load my html? beginner in javascript Here is my code

<!DOCTYPE html>
<html>
<head>
<title>Leaflet Web Map</title>
<style type="text/css">
    #map {
        width: 960px;
        height: 500px;
    }

</style>
<link rel="stylesheet" href="css/leaflet.css" />
<script src="js/leaflet.js"> </script>  
</head>
<body>
<script>
    var map = L.map('map',{
    center: [43.64701, -79.39425],
    zoom: 15
    });

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',   {
    attribution: '&copy; <a href = 
 "http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
 </script>

<div id="map">
</div>
</body>
</html>

the css source and the script source comes from my teacher

Answer 1

You should try moving your script to the bottom of your page:

<!DOCTYPE html>
<html>
<head>
  <title>Leaflet Web Map</title>
  <style type="text/css">
    #map {
      width: 960px;
      height: 500px;
    }
  </style>
  <link rel="stylesheet" href="css/leaflet.css" />
  <script src="js/leaflet.js"> </script>  
</head>
<body>
  <div id="map"></div>
  <script>
    var map = L.map('map',{
      center: [43.64701, -79.39425],
      zoom: 15
    });

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',   {
      attribution: '&copy; <a href = "http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
  </script>
</body>
</html>

map using leaflet not showing using javascript

Question

1 answers

solution1
3 ACCPTED 2018-09-08 14:20:17

map using leaflet not showing using javascript

Question

1 answers

solution1 3 ACCPTED 2018-09-08 14:20:17

solution1
3 ACCPTED 2018-09-08 14:20:17