web-dev-qa-db-fra.com

carte dépliant apparaît en gris

Je commence leaflet.js avec quickstart mais ma carte est grisée ... y at-il quelque chose qui me manque?

script.js:

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

L.tileLayer('http://{s}.title.cloudmade.com/' + API_KEY + '/997/256/{z}/{x}/{y}.png', {
        attribution: 'Map data © [...]',
        maxZoom: 18
}).addTo(leafletMap);

// marker
var marker = L.marker([51.5, -0.09]).addTo(leafletMap);

style.css:

#leafletMap {
height: 200px;
width: 200px;
}

index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My title</title>

    <link rel='stylesheet' href='css/bootstrap.css'>
    <link rel='stylesheet' href='css/leaflet.css'>
    <!--[if lte IE 8]>
        <link rel="stylesheet" href="leaflet.ie.css" />
    <![endif]-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <div id='leafletMap'></div>

<script src='js/libs/jquery-1.10.2.js'></script>
<script src='js/libs/bootstrap.js'></script>
<script src='js/libs/leaflet-src.js'></script>
<script src='js/config.js'></script>
<script src='js/script.js'></script>
</body>
</html>

Donne moi:

enter image description here

javascriptopenstreetmapleaflet
16
Connor Leech

Vous devez implémenter la section suivante du Guide de démarrage rapide: vous avez initialisé la carte, mais vous n'y avez ajouté aucune couche de mosaïque, donc en gris. Alors, continuez avec la section commençant par Ensuite, nous allons ajouter une couche de tuiles à ajouter à notre carte .

30
tmcw

Une autre chose à regarder. 

Si vous vérifiez l'onglet Réseau et que les mosaïques de la carte se chargent correctement, la carte reste grise, ce qui peut être dû à la contamination CSS de votre page environnante. 

Dans mon cas c'était: 

img {
    max-height: 100%;
}

Fixé en écrasant avec: 

.my-leaflet-map-container img {
    max-height: none;
}
2
elMarquis

Avez-vous défini une valeur pour API_KEY dans votre code? 

Lorsque j'ai lancé le quickstart pour la première fois, je ne savais pas pourquoi ma carte était grise, mais je venais de réaliser que j'avais oublié de récupérer un code d'accès API (dans mon cas, c'était pour le service Mapbox.)

Votre ligne d'URL référence API_KEY mais vous ne semblez pas la déclarer.

0
kdpnz

Pour mon application ionique, cela a été résolu en configurant trackResize: false dans la configuration de ma carte. Cela se produisait uniquement sur Android et appelé par une fonction setTransform dans le code source de Leaflet appelé uniquement sur Android.

Leaflet.map('map', { trackResize: false })

0
Michael Auger