Question 244418 in Javascript Question posted in
A very good W3school tutorial can be found here.

How to implement Javascript Leaflet demo code to show a simple map and point? (blank page returned)

I try to just imitate the simplest example code of Leaflet (https://leafletjs.com/index.html) as follows. But somehow I only got the blank page. Can somebody spot what is wrong? Many thanks!

<html>
<head>
<title>Map view with Leaflet</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>    
</head>

<body>    
    <div id="map"></div>
    <script>
        var map = L.map('map').setView([51.505, -0.09], 13);
        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
        L.marker([51.505, -0.09]).addTo(map);
    </script>
</body>
</html>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks for the reply.

    Actually, it was just missing <!DOCTYPE html> at the beggining of the code. Silly, but this solves the problem:

    <!DOCTYPE html>
<html>
<head>
<title>Map view with Leaflet</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>    
</head>

<body>    
    <div id="map"></div>
    <script>
        var map = L.map('map').setView([51.505, -0.09], 13);
        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
        L.marker([51.505, -0.09]).addTo(map);
    </script>
</body>
</html>

  2. 0

    Height of this <div id="map"></div> is 0px so it is collapsed, set some height, 100% of fixed.
    E. g.:

    <style>
    #map {
        height: 100%;
    }
</style>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search