'HTML page not executing external JavaScript file

expected result:

My understanding of the below scripts is that I should be able to uncomment the //src="PAWSmap.js"; line in the scripts portion of the HTML page, refer to the JavaScript file that should define the map I desire.

This would mean the JavaScript file would deal with the map and future data while the HTML would simply refer to that file to display it.

result:

The map box however does not show up in the web browser when I follow the above logic.

It DOES show up when I run the HTML as is below, where the map set up and var creating is held within the HTML script.

This despite having followed two tutorials that would suggest that I should be able to achieve the "expected" method, having followed them closely.

const apiKey = 'pk.eyJ1IjoibWF4ZHVzbyIsImEiOiJja3p3Mzh3cHQ4M2VuMm5waGE3c3NpcGRoIn0.RCKfV5n8aOn2AUbXiS2qqA';

var map = L.map('map',{
    center: [43.64701, -79.39425],
    zoom: 15
    });

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
<!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">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
    <title>Document</title>

    <style>
        #map{
            height: 800px;
            width: 800px;
            margin: 5rem auto;
        }
    </style>

    <h2>
        Critiacally Listed Species in BC
    </h2>


</head>
<body>

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

<script>

    //src="PAWSmap.js";

    var map = L.map('map',{
    center: [54.259070, -124.943178],
    zoom: 6
    });

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

</script>
    
</body>
</html>

Question:

Why is the reference to the JavaScript map file not working whereas the creation of the mapbox within HTML does work?

htmlleaflet


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions