web-dev-qa-db-fra.com

maplet.js n'est pas à l'affiche

Je suis un débutant pour leaflet.js. Quelqu'un peut-il m'aider à déboguer le code suivant? J'essaie d'afficher une carte à l'écran, mais seuls les boutons de zoom avant et de zoom arrière s'affichent sur Google Chrome et l'écran de la carte est vide.

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
        <style>
            #mapid { height: 180px; }
        </style>
    </head>

    <body>
        <div id="mapid"></div>
        <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
        <script>
            var mymap = L.map('mapid').setView([51.505, -0.09], 13);
        </script>
    </body>
</html>
mapsleafletdc.leaflet.js
16
anandg112

Voici votre code corrigé: http://plnkr.co/edit/E7dw2AuNbLneYpz51Qdi?p=preview

Il n'y a pas de fournisseur de tuiles dans votre code, donc rien ne s'affiche sur votre carte.

Découvrez la source de http://leafletjs.com/examples/quick-start-example.html

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
                 '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
                 'Imagery © <a href="http://mapbox.com">Mapbox</a>',
    id: 'mapbox.streets'
}).addTo(mymap);

Si vous ne voulez pas de tuiles de mapbox, vous pouvez utiliser la carte openstreet

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

Relisez le Tutoriel de démarrage rapide du dépliant , en particulier ce bit:

Il convient de noter que Leaflet est indépendant du fournisseur, ce qui signifie qu'il n'applique pas un choix particulier de fournisseurs pour les tuiles, et qu'il ne contient même pas une seule ligne de code spécifique au fournisseur.

Leaflet n'ajoute aucune donnée cartographique par défaut. C'est à vous de dire à Leaflet quelles données (entités vectorielles, couches de tuiles) vous souhaitez afficher.

7
IvanSanchez