I am using leaflet with openstreetmap. However, I cannot get the map to render correctly.
Find below my minimum viable example.
<!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>Any suggestions what I am doing wrong?
The error comme from the style you add to your Kart. 100% of 0 will result to 0px. You should put a fixed height or width as the documentation said.
Make sure the map container has a defined height, for example by setting it in CSS
You can for example use #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>