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

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

10

après avoir ajouté var usStates =au sommet de mon fichier geojson, le code fonctionnait.

— Bailey
source

5

Cet article explique une autre bonne approche. lyzidiamond.com/posts/osgeo-august-meeting

— John Gravois

Wayback Machine copie de l'article mentionné ci-dessus , comme l'original a succombé à linkrot, et nous ne pouvons pas éditer les commentaires des autres.

— Albert