javascripthtmlexternal-script

Why is my external script not working in my HTML?

I'm quite new to coding.

Basically, I'm trying to use the below external JS file in my HTML but it doesn't work when I include this in my HTML file:

var map = L.map('map').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/satellite-v9',
    tileSize: 512,
    zoomOffset: -1,
    accessToken: 'pk.eyJ1IjoidGhhaWxlZSIsImEiOiJjbDFxYmUzZGwxZWFzM2lxcjJkOWNmZmlsIn0.B57x2tvc2UbNrR1jdV0nrg'
}).addTo(map);

But when I include these codes in the same script tag in HTML, it works? My html code below:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Map</title>
        <meta name="description" content="thai Yik Lee Portfolio">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
        crossorigin=""/>

        <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""></script>
    </head>

    <body>
        <h1>MAP</h1>
        <div id="map" style="height: 500px">
            Here
        </div>
        
        <script src="/libs/map.js" type="text/javascript"></script>
    </body>
</html>

Any help is appreciated, thank you!

Solution

  • Found the answer, the path to my file had an extra '/'