Soy nuevo en JavaScript y deseo usar el mapa de folletos.
Instalé npm y uso npm para instalar Leaflet y TypeScript.
Entonces, ¿qué más debo hacer? El siguiente código está hecho en 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>El resultado es una página en blanco en blanco.
¿El ancho de div del mapa está establecido al 100% de div#base_map?
Intente poner esos atributos css en #base_map en su lugar:
<style> #base_map { width: 100%; height: 100vh; } </style>