La carte leaflet.js n'apparaît pas

Je suis un débutant à leaflet.js. Quelqu'un peut-il m'aider avec le débogage du code suivant? J'essaie d'afficher une carte à l'écran, mais seul le bouton de zoom avant et de zoom arrière apparaît sur Google Chrome et l'écran de la carte est vide.La carte leaflet.js n'apparaît pas

<!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>

Source

2016-05-04 anandg112

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

Il n'y a pas de fournisseur de tuiles dans votre code, alors que rien n'apparaît dans votre carte.

Vérifiez 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 les tuiles de MapBox, vous pouvez utiliser OpenStreet carte

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

Source

2016-05-04 10:27:11 YaFred

Merci beaucoup. Il fonctionne maintenant. – anandg112

Relire les Leaflet quick-start tutorial, en particulier ce bit:

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

La brochure n'ajoute aucune donnée cartographique par défaut. C'est à vous de dire à Leaflet quelles données (fonctions vectorielles, couches de tuiles) vous voulez montrer.

Source

2016-05-04 10:30:44 IvanSanchez

La carte leaflet.js n'apparaît pas

Répondre

Questions connexes