I am new to JavaScript and wish to use Leaflet map.
I installed npm, and use npm to install Leaflet and typescript.
So what else I should do? The following code is done in VSCode.
<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">
<title>Shape</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<style>
#map {
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<div id = "base_map"></div>
</body>
</html>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script >
var map = L.map('map').setView([51.505, -0.09], 13);
var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'});
osm.addTo(map);
</script>
The result is a blank white page.
Map div width set to 100% of div#base_map?
Try putting those css attributes on #base_map instead:
<style>
#base_map {
width: 100%;
height: 100vh;
}
</style>