Laden einer externen GeoJSON-Datei in die Leaflet-Karte?

53

Ich möchte eine geoJSON (Polygon) -Datei in meine Broschürenkarte laden. Ich habe Beispiele gesehen, in denen geoJSON in den Javascript-Code eingebettet ist, aber ich kann keine Beispiele finden, die zeigen, wie es mit einer externen Datei gemacht wird.

<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
quelle
Ziehen Sie den Geojson auf geojson.io
Mapperz
@Mapperz das OP fragte nicht, wie man den Inhalt ihres Geojson-Inhalts in das Skript einfügt.
Dave-Evans

Antworten:

36

Schauen Sie in Leaflet-Ajax. Es rationalisiert alles. Ich werde Neogeomat dafür stimmen, dass er es erwähnt.

Holen Sie sich das Skript hier ( Github Repo ) und fügen Sie es Ihrem Header hinzu:

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

Dann geht es darum, mit dem Dateinamen hochzuladen.

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

Wirklich unkompliziert zu beheben und es funktioniert. Also ja.

FredFury
quelle
26

Sie können jquery Ajax verwenden, um Daten zu laden und anschließend hinzuzufügen.

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() {});

oder Sie können das Leaflet-Ajax-Plugin verwenden

neogeomat
quelle
14

Hier ist meine minimale Vanille js Lösung. Sieh ma aus, für einen schnellen Ajax-Aufruf einer Datei ist keine Abfrage erforderlich.

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
quelle
Vielen Dank für das Beispiel. Ich habe das newSchlüsselwort für die geoJSONFactory-Funktion entfernt, habe jedoch einen CORS-Fehler mit der Zeile setRequestHeader erhalten. Entfernen Sie es, und es hat einwandfrei funktioniert.
Brian Burns
Gibt mir einen XML Parsing Error: not well-formedFehler an Line Number 1, Column 1:. Nun, da es sich bei den Daten um Geojson handelt, warum wird versucht, sie als XML zu analysieren? Ich verstehe das Problem nicht, aber ich möchte meine Daten ohne Ajax importieren.
Aaron Bramson
@ AaronBramson haben einen weiteren Versuch. Dies war ein ziemlich alter Code, den ich gemacht habe. Ich hätte den responseType setzen und die Antwort verwenden sollen, nicht den responseText. Gerade den Code-Schnipsel aktualisiert.
Dennis Bauszus
Ja, das ist großartig! Es funktioniert sofort, ohne dass zusätzliche externe Pakete erforderlich sind und ohne dass die Datendatei bearbeitet werden muss. Dies ist eindeutig die beste Antwort.
Aaron Bramson
11

Im head-Element verweisen Sie auf Ihre Dateien:

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

Und dann im Körper:

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

Sie müssen sie nicht in eine Ebenengruppe "einfügen" ...

fgcartographix
quelle
perfekt! das ist was ich gesucht habe!
Bailey
1
mit dem Firebug Web - Entwickler für firefox Ich erhalte: „„Reference USstates ist nicht definiert“(L.geoJson (USstates) .addTo (Karte);“ Ich habe die Datei referenziert wie Sie zeigte <script src="usStates.geojson" type="text/javascript"></script>und hinzugefügt L.geoJson(usStates).addTo(map);. an der Unterseite meines Codes jeder Ideen?
Bailey
Es muss etwas mit src sein ... Meins ist im Kopf des Dokuments (ich habe meine Antwort bearbeitet, um sie vollständig hinzuzufügen)
fgcartographix
1
Für die Referenz wird keine Variable benötigt? Ist es wichtig, dass meine Dateierweiterung .json anstelle von .geojson ist?
Bailey
2
Dies ist eine verwirrende Antwort, da Sie die Variablen hydro_s, hydro_l in Ihrer Datendatei definieren müssen, was technisch sogar zu einem ungültigen GeoJSON führen würde! Siehe die anderen Antworten für weitere Informationen ...
Florian Ledermann