CODEWITHSUNDEEP
javascriptcssmobileleaflet
Oscar Gallo
Oscar Gallo

Reputation: 17

Maps with Leaflet not working

i have a little (maybe) stupid problem. I want to put a Leaflet map on a page, so i downloaded the .css file and the .js file, load it and nothing happens, it just put a gray div with + and - controls but no map, can someone help me?, thanks for your help.

my code is this:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Demo</title>
<link rel="stylesheet" href="styles.css" />
    <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk
    /html5.js"></script>
    <![endif]-->
<link rel="stylesheet" href="leaflet.css" />
<script src="leaflet.js"></script>
<style type="text/css">
    #map { height: 180px; }
</style>
</head>
<body>
    <div id="map"></div>
</body>
<script type="text/javascript">
    var map = L.map('map').setView([51.505, -0.09], 13);
</script>
</html>

And this is the console output:

Consider using 'dppx' units instead of 'dpi', as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: (min-resolution: 144dpi) leaflet.js:6 Consider using 'dppx' units instead of 'dpi', as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: (min-resolution: 144dpi)

Upvotes: 0

Views: 3331

Answers (1)

Ju66ernaut
Ju66ernaut

Reputation: 2691

Please double check you are setting everything correctly. Check out this getting started page. Looks like maybe you aren't referencing your tiles? 

// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map').setView([51.505, -0.09], 13);

// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

Upvotes: 3

Related Questions