Chargement du fichier GeoJSON externe dans la carte Leaflet?

54

J'aimerais charger un fichier geoJSON (polygone) dans la carte de la brochure. J'ai vu des exemples où geoJSON est intégré au code javascript, mais je ne trouve aucun exemple montrant comment faire avec un fichier externe.

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
    <script src="usStates.geojson" type="text/javascript"></script>
    <style>
        html, body, #map {
            height: 100%;
        }
        body {
            padding: 0;
            margin: 0;
        }
    </style>
</head>

<body>
    <div id="map" style="height: 100%"</div>
    <script src="http://d3js.org/d3.v2.min.js?2.9.3"></script>
    <script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>

    <script type="text/javascript"> 

    var map = L.map('map').setView([38.57, -94.71], 4);

    L.tileLayer('http://{s}.tile.cloudmade.com/9067860284bc491e92d2342cc51d47d9/998/256/{z}/{x}/{y}.png', {attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> Imagery © <a href="http://cloudmade.com">CloudMade</a>'}).addTo(map);

    var featureStyle = {
        "color": "#ff7800",
        "weight": 5, 
        "opacity": 0.2
    };

    L.geoJson(usStates).addTo(map);

    </script>

</body>
leaflet geojson Bailey
la source
glissez et déposez le geojson sur geojson.io
Mapperz
@Mapperz the OP ne demandait pas comment coller le contenu de leur contenu geojson dans le script.
Dave-Evans

Réponses:

37

Regardez dans Leaflet-Ajax. Cela rationalise tout. Donnera un vote positif à Neogeomat pour l'avoir mentionné.

Obtenez le script ici ( github repo ) et ajoutez-le à votre en-tête:

<script src="/js/leaflet-0.7.2/leaflet.ajax.min.js"></script>

Ensuite, il suffit de télécharger avec le nom du fichier.

var geojsonLayer = new L.GeoJSON.AJAX("foo.geojson");       
geojsonLayer.addTo(map);

Correctif vraiment simple et ça marche. Alors oui.

FredFury
la source
26

Vous pouvez utiliser jquery Ajax pour charger des données, puis les ajouter.

var district_boundary = new L.geoJson();
district_boundary.addTo(map);

$.ajax({
dataType: "json",
url: "data/district.geojson",
success: function(data) {
    $(data.features).each(function(key, data) {
        district_boundary.addData(data);
    });
}
}).error(function() {});

ou Vous pouvez utiliser le plugin leaflet-ajax

néogeomat
la source
14

Voici ma solution minimum vanilla js. Look ma, pas besoin de jquery pour un rapide appel ajax vers un fichier.

let xhr = new XMLHttpRequest();
xhr.open('GET', 'uk_outline.geojson');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.responseType = 'json';
xhr.onload = function() {
    if (xhr.status !== 200) return
    L.geoJSON(xhr.response).addTo(map);
};
xhr.send();
Dennis Bauszus
la source
Merci pour l'exemple - j'ai retiré le newmot - clé pour la geoJSONfonction factory, mais une erreur CORS avec la ligne setRequestHeader s'y trouve, donc supprimez-le et tout a bien fonctionné (il doit y avoir un paramètre défini sur mon serveur).
Brian Burns
Me donne une XML Parsing Error: not well-formederreur à Line Number 1, Column 1:. Eh bien, puisque les données sont un geojson, pourquoi essaie-t-il de les analyser en XML? Je ne comprends pas le problème, mais j'aimerais importer mes données sans Ajax.
Aaron Bramson
@AaronBramson a une autre tentative. C'était un peu vieux code que j'ai fait. J'aurais dû définir le responseType et utiliser la réponse pour ne pas analyser le responseText. Vient de mettre à jour l'extrait de code.
Dennis Bauszus
Ouais, c'est génial! Il fonctionne hors de la boîte sans nécessiter de paquet externe supplémentaire et sans éditer le fichier de données. C'est clairement la meilleure réponse.
Aaron Bramson
11

Dans l'élément head, vous référencez vos fichiers:

    <link rel="stylesheet" type="text/css" href="leaflet/leaflet.css" />
    <!--[if lte IE 8]>
        <link rel="stylesheet" type="text/css" href="css/leaflet.ie.css" />
    <![endif]-->
    <script src="leaflet/leaflet.js"></script>
    <script src="hydro_s.geojson" type="text/javascript"></script>
    <script src="hydro_l.geojson" type="text/javascript"></script>
    <style>
        html, body, #map {
            height: 100%;
        }
        body {
            padding: 0;
            margin: 0;
        }
    </style>
    <title>Leaflet Map with GeoJson</title>
 </head>

Et puis dans le corps:

<body>
    <div id="map"></div>
    <script type="text/javascript">

        var map = L.map('map', {
            center: [45.57, -73.5648],
            zoom: 10
        });

         /* Hydro */
        var hydro = new L.LayerGroup();
        L.geoJson(hydro_s, {style: hydrosStyle}).addTo(hydro);
        L.geoJson(hydro_l, {style: hydrolStyle}).addTo(hydro);

    </script>
</body>

Vous n'êtes pas obligé de les "mettre" dans un groupe de calques ...

fgcartographix
la source
parfait! C'est ce que je cherchais!
bailey
1
en utilisant le développeur Web Firebug pour Firefox, je reçois "ReferenceError: usStates n'est pas défini" "(L.geoJson (usStates) .addTo (map);" J'ai référencé le fichier comme vous l'avez montré <script src="usStates.geojson" type="text/javascript"></script>et ajouté L.geoJson(usStates).addTo(map);au bas de mon code. any idées
bailey
Ce doit être quelque chose avec src ... Le mien est en tête du document (j'ai modifié ma réponse pour l'ajouter complètement)
fgcartographix
1
aucune variable n'est nécessaire pour la référence? est-ce que mon extension de fichier est .json au lieu de .geojson?
bailey
2
Cette réponse est source de confusion, car elle vous oblige à définir les variables hydro_s, hydro_l dans votre fichier de données, ce qui rendrait techniquement le même GeoJSON invalide! Voir les autres réponses pour plus d’informations ...
Florian Ledermann