J'ai essayé de comprendre comment mapper quelques 2200 points de données dans leaflet, mais je viens juste de me plonger dans le monde du JS et il y a beaucoup de concepts qui sont nouveaux pour moi. J'ai utilisé cet excellent tutoriel comme un exemple concret de la façon de tirer des données d'un fichier geojson et de les faire apparaître sur votre carte. Cependant, je n'arrive pas à le faire fonctionner avec mes propres données et je ne sais pas ce que je fais de mal. J'ai essayé d'utiliser de nombreuses sources d'hébergement différentes et d'utiliser à la fois les données de test et les données du tutoriel (en tant que fichiers geojson) pour déterminer si c'est l'hôte ou le fichier geojson qui pose problème. Je ne sais toujours pas lequel des deux est en cause.
Voici mon code (avec les données de test et les fichiers d'icônes du tutoriel). Si quelqu'un peut jeter un coup d'œil et me dire pourquoi les données ne sont pas chargées sur ma carte, je lui en serai très reconnaissant ! Même quelques suggestions sur ce que je pourrais essayer de faire m'aideraient. Mon seul bagage en codage est R, donc il y a probablement quelque chose qui me manque et qui aurait dû être évident.
<html>
<head>
<title>A Leaflet map!</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<script src="https://raw.githubusercontent.com/leaflet-extras/leaflet-providers/master/leaflet-providers.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
#map{ height: 900px;width: 650px }
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map').setView([-41.291, -185.229], 6);
var OpenMapSurfer_Roads = L.tileLayer('http://korona.geog.uni-heidelberg.de/tiles/roads/x={x}&y={y}&z={z}', {
maxZoom: 20,
attribution: 'Imagery from <a href="http://giscience.uni-hd.de/">GIScience Research Group @ University of Heidelberg</a> — Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
$.getJSON("https://bitbucket.org/whalebiologist/website-map/raw/58abf2f24696fef437c294c02e55019d1c6554e4/churches_short.geojson",function(data){
var ratIcon = L.icon({
iconUrl: 'http://maptimeboston.github.io/leaflet-intro/rat.png',
iconSize: [60,50]
});
L.geoJson(data,{
pointToLayer: function(feature,latlng){
var marker = L.marker(latlng,{icon: ratIcon});
marker.bindPopup(feature.properties.Location + '<br/>' + feature.properties.OPEN_DT);
return marker;
}
}).addTo(map);
});
</script>
</body>
</html>Merci à tous ceux qui ont bien voulu lire ce texte !
