Estoy usando folleto con openstreetmap. Sin embargo, no puedo hacer que el mapa se represente correctamente.
Encuentre a continuación mi ejemplo mínimo viable.
<!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" /> <title>Land</title> <link href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" rel="stylesheet" /> </head> <body> <div id="Karte" style="height: 100%; width: 100%"></div> </body> <script src="http://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script> <script> var Karte = L.map("Karte").setView([43.00, -79.00], 10); L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: 'Kartendaten © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>', useCache: true, }).addTo(Karte); </script> </html>¿Alguna sugerencia de lo que estoy haciendo mal?
El error proviene del estilo que agregas a tu Kart . 100% de 0 dará como resultado 0px. Debe poner una altura o ancho fijo como dice la documentación.
Asegúrese de que el contenedor del mapa tenga una altura definida, por ejemplo, configurándolo en CSS
Por ejemplo, puede usar #Karte { height: 180px; }
#Karte { height: 180px; } <!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" /> <title>Land</title> <link href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" rel="stylesheet" /> </head> <body> <div id="Karte"></div> </body> <script src="http://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script> <script> var Karte = L.map("Karte").setView([43.00, -79.00], 10); L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: 'Kartendaten © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>', useCache: true, }).addTo(Karte); </script> </html>