Eu sou novo para Leaflet e estava configurandoseguindo os tutoriais, que eu não tive nenhum problema para carregar o mapa. O problema começa quando tento executar o script por meio de um arquivo JS externo, em vez de colar o script dentro de uma tag HTML. Então, agora eu não consigo fazer isso funcionar assim: HTML:
<head>
<link rel="stylesheet" type="text/css" href="leaflet/leaflet.css"/>
<script type="text/javascript" src="leaflet/leaflet.js"></script>
<link rel="stylesheet" type="text/css" href="src/style.css"/>
<script type="text/javascript" src="src/javascript.js"></script>
</head>
<body>
<div id="mapid"></div>
</body>
Javascript:
var mymap = L.map("mapid").setView([51.505, -0.09], 13);
document.getElementById("mapid").onload = function loadMap(){
L.tileLayer("https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiZGlvZ204MDAiLCJhIjoiY2o5aGRxY3B5MGdyZTMzczJvNm95NHAxeSJ9.6M_vVT8BcyJay_acp-eEXA", {
attribution: "Map data © <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>",
maxZoom: 18,
id: "mapbox.streets",
accessToken: "your.mapbox.access.token"
}).addTo(mymap);
};
No arquivo JS, tentei carregá-lo sem o onLoad () do elemento div e tentei com ele, como você pode ver no exemplo, mas nenhum deles funcionou. É possível até mesmo carregar o mapa do folheto como este?
Obrigado pelo seu tempo
Respostas:
1 para resposta № 1a onload evento não está presente em um div elemento.
A propriedade onload do mixin GlobalEventHandlers é um manipulador de eventos para o evento load de um elemento Window, XMLHttpRequest, etc., que é acionado quando o recurso é carregado.
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
No seu caso eu "pegar o onload no document.body:
document.body.onload = function () {
// Do stuff...
};