CODEWITHSUNDEEP
javascriptleaflet
daniellandete
daniellandete

Reputation: 121

Leaflet don't shown the map

I don't know why the map does not show up. I do this

Add in my head the cdn

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
 integrity="sha512- 
 xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
 crossorigin=""/>

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
 integrity="sha512- 
 gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
 crossorigin=""></script>

Then I created a div

<div id="map" style="height:180px"></div>

And in my script have this

<script type="text/javascript">
  var map = L.map('map', {
        center: [38.9765, -1.855],
        zoom: 13
    });
</script>

But it does not work and I don't have any error.

Upvotes: 0

Views: 203

Answers (1)

User863
User863

Reputation: 20039

Try adding a tile layer using L.tileLayer()

https://leafletjs.com/reference-1.6.0.html#tilelayer

var map = L.map('map', {
  center: [38.9765, -1.855],
  zoom: 13
});

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512- xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />

<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512- gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>

<div id="map" style="height:180px"></div>

Upvotes: 2

Related Questions