Leaflet Maps not showing

I'd like to keep javascript in an external file.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">



    <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->

    <link rel="stylesheet" href="styles.css">

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>

    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>



    <title>Map</title>    

</head>

<body>

    <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js">

    </script> -->

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

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

</body>

</html>

And this is the js file

var mymap = L.map('mapid').setView([51.505, -0.09], 13);



L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiY2RlYmFkcmkiLCJhIjoiY2ptcjh1YmNlMXluajNxcDU0b3NrOWowbiJ9.kGcSMPD0cZyz0tLOTIIilw', {

    maxZoom: 18,

    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>',

    id: 'mapbox.streets'

}).addTo(mymap);

Can someone help me in understanding what is going wrong? I've created a jsfiddle (as to my understanding). But no luck there too!
https://jsfiddle.net/vxb0ces9/

asked Nov 14 '18 at 20:37

Debadri Chowdhury

2519

With JSFiddle you can specify libraries similarly as in your HTML, or using the "Resources" tab on the left. Updated your JSFiddle to add Leaflet CSS and JS files: jsfiddle.net/d0ajtsf4

– ghybs
Nov 15 '18 at 0:39

add a comment |

I'd like to keep javascript in an external file.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">



    <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->

    <link rel="stylesheet" href="styles.css">

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>

    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>



    <title>Map</title>    

</head>

<body>

    <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js">

    </script> -->

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

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

</body>

</html>

And this is the js file

var mymap = L.map('mapid').setView([51.505, -0.09], 13);



L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiY2RlYmFkcmkiLCJhIjoiY2ptcjh1YmNlMXluajNxcDU0b3NrOWowbiJ9.kGcSMPD0cZyz0tLOTIIilw', {

    maxZoom: 18,

    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>',

    id: 'mapbox.streets'

}).addTo(mymap);

Can someone help me in understanding what is going wrong? I've created a jsfiddle (as to my understanding). But no luck there too!
https://jsfiddle.net/vxb0ces9/

asked Nov 14 '18 at 20:37

Debadri Chowdhury

2519

With JSFiddle you can specify libraries similarly as in your HTML, or using the "Resources" tab on the left. Updated your JSFiddle to add Leaflet CSS and JS files: jsfiddle.net/d0ajtsf4

– ghybs
Nov 15 '18 at 0:39

add a comment |

I'd like to keep javascript in an external file.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">



    <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->

    <link rel="stylesheet" href="styles.css">

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>

    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>



    <title>Map</title>    

</head>

<body>

    <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js">

    </script> -->

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

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

</body>

</html>

And this is the js file

var mymap = L.map('mapid').setView([51.505, -0.09], 13);



L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiY2RlYmFkcmkiLCJhIjoiY2ptcjh1YmNlMXluajNxcDU0b3NrOWowbiJ9.kGcSMPD0cZyz0tLOTIIilw', {

    maxZoom: 18,

    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>',

    id: 'mapbox.streets'

}).addTo(mymap);

Can someone help me in understanding what is going wrong? I've created a jsfiddle (as to my understanding). But no luck there too!
https://jsfiddle.net/vxb0ces9/

asked Nov 14 '18 at 20:37

Debadri Chowdhury

2519

I'd like to keep javascript in an external file.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">



    <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->

    <link rel="stylesheet" href="styles.css">

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>

    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>



    <title>Map</title>    

</head>

<body>

    <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js">

    </script> -->

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

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

</body>

</html>

And this is the js file

var mymap = L.map('mapid').setView([51.505, -0.09], 13);



L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiY2RlYmFkcmkiLCJhIjoiY2ptcjh1YmNlMXluajNxcDU0b3NrOWowbiJ9.kGcSMPD0cZyz0tLOTIIilw', {

    maxZoom: 18,

    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>',

    id: 'mapbox.streets'

}).addTo(mymap);

Can someone help me in understanding what is going wrong? I've created a jsfiddle (as to my understanding). But no luck there too!
https://jsfiddle.net/vxb0ces9/

javascript jquery html css leaflet

asked Nov 14 '18 at 20:37

Debadri Chowdhury

2519

asked Nov 14 '18 at 20:37

Debadri Chowdhury

2519

asked Nov 14 '18 at 20:37

Debadri Chowdhury

2519

asked Nov 14 '18 at 20:37

Debadri Chowdhury

2519

asked Nov 14 '18 at 20:37

Debadri Chowdhury

2519

With JSFiddle you can specify libraries similarly as in your HTML, or using the "Resources" tab on the left. Updated your JSFiddle to add Leaflet CSS and JS files: jsfiddle.net/d0ajtsf4

– ghybs
Nov 15 '18 at 0:39

add a comment |

With JSFiddle you can specify libraries similarly as in your HTML, or using the "Resources" tab on the left. Updated your JSFiddle to add Leaflet CSS and JS files: jsfiddle.net/d0ajtsf4

– ghybs
Nov 15 '18 at 0:39

With JSFiddle you can specify libraries similarly as in your HTML, or using the "Resources" tab on the left. Updated your JSFiddle to add Leaflet CSS and JS files: jsfiddle.net/d0ajtsf4

– ghybs
Nov 15 '18 at 0:39

add a comment |

1 Answer
1

active

oldest

votes

The CSS in your JSFiddle looks like this:

#mapid {

  height: 400 px;

  width: 600 px;

}

CSS Lengths should be specified without white space between the number and the unit: (emphasis mine)

The format of a length value [...] is a <number> (with or without a decimal point) immediately followed by a unit identifier (e.g., px, em, etc.).

Therefore in your case simply fixing your CSS to:

#mapid {

  height: 400px;

  width: 600px;

}

...solves your issue: https://jsfiddle.net/hym0bo9p/

answered Nov 15 '18 at 0:37

ghybs

23.6k32546

Thank you! It worked!

– Debadri Chowdhury
Nov 15 '18 at 18:52

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53308374%2fleaflet-maps-not-showing%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

The CSS in your JSFiddle looks like this:

#mapid {

  height: 400 px;

  width: 600 px;

}

CSS Lengths should be specified without white space between the number and the unit: (emphasis mine)

The format of a length value [...] is a <number> (with or without a decimal point) immediately followed by a unit identifier (e.g., px, em, etc.).

Therefore in your case simply fixing your CSS to:

#mapid {

  height: 400px;

  width: 600px;

}

...solves your issue: https://jsfiddle.net/hym0bo9p/

answered Nov 15 '18 at 0:37

ghybs

23.6k32546

Thank you! It worked!

– Debadri Chowdhury
Nov 15 '18 at 18:52

add a comment |

The CSS in your JSFiddle looks like this:

#mapid {

  height: 400 px;

  width: 600 px;

}

CSS Lengths should be specified without white space between the number and the unit: (emphasis mine)

The format of a length value [...] is a <number> (with or without a decimal point) immediately followed by a unit identifier (e.g., px, em, etc.).

Therefore in your case simply fixing your CSS to:

#mapid {

  height: 400px;

  width: 600px;

}

...solves your issue: https://jsfiddle.net/hym0bo9p/

answered Nov 15 '18 at 0:37

ghybs

23.6k32546

Thank you! It worked!

– Debadri Chowdhury
Nov 15 '18 at 18:52

add a comment |

The CSS in your JSFiddle looks like this:

#mapid {

  height: 400 px;

  width: 600 px;

}

CSS Lengths should be specified without white space between the number and the unit: (emphasis mine)

The format of a length value [...] is a <number> (with or without a decimal point) immediately followed by a unit identifier (e.g., px, em, etc.).

Therefore in your case simply fixing your CSS to:

#mapid {

  height: 400px;

  width: 600px;

}

...solves your issue: https://jsfiddle.net/hym0bo9p/

answered Nov 15 '18 at 0:37

ghybs

23.6k32546

The CSS in your JSFiddle looks like this:

#mapid {

  height: 400 px;

  width: 600 px;

}

CSS Lengths should be specified without white space between the number and the unit: (emphasis mine)

The format of a length value [...] is a <number> (with or without a decimal point) immediately followed by a unit identifier (e.g., px, em, etc.).

Therefore in your case simply fixing your CSS to:

#mapid {

  height: 400px;

  width: 600px;

}

...solves your issue: https://jsfiddle.net/hym0bo9p/

answered Nov 15 '18 at 0:37

ghybs

23.6k32546

answered Nov 15 '18 at 0:37

ghybs

23.6k32546

answered Nov 15 '18 at 0:37

ghybs

23.6k32546

answered Nov 15 '18 at 0:37

ghybs

23.6k32546

Thank you! It worked!

– Debadri Chowdhury
Nov 15 '18 at 18:52

add a comment |

Thank you! It worked!

– Debadri Chowdhury
Nov 15 '18 at 18:52

Thank you! It worked!

– Debadri Chowdhury
Nov 15 '18 at 18:52

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ndtyjky