3 votes

Tuiles de dépliage de prospectus en électronique

Je suis nouveau dans le monde de l'électronique mais je veux utiliser Leaflet pour faire du mapping magique.

J'ai créé une application électronique de base avec l'index.js selon l'exemple de base. J'ai également ajouté un index.hetml de base :

<!DOCTYPE html>
<html>

<head>

    <title>Page Title</title>

</head>

<body>
    <div id="map"></div>
</body>

<script>
    require('./renderer')
</script>

</html>

Et le truc de Leaflet dans le fichier renderer.js.

window.L = require('leaflet')

var map = L.map('map').setView([51.0420175, 13.7358889], 12)

    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);

Lorsque je lance l'application, la fenêtre s'ouvre et quelques MapTiles s'affichent. Mais ils ne sont pas tous chargés et ils se mélangent lorsque je redimensionne la fenêtre :

Window before reseizing

et

Window after reseizing

Quel est le problème avec mon code ?

1voto

sirTris Points 11

J'ai rencontré le même problème. Je pense que la meilleure solution est de

bower install leaflet

puis utilisez-le dans l'en-tête de votre fichier .html :

<link rel="stylesheet" href="bower_components/leaflet/dist/leaflet.css" />
<style>
  body { margin:0; padding:0;  }
  #map { position: absolute; top:0; bottom:0; right:0; left:0;  }
</style>

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X