Import GeoJSON Daten auf einem Beiblatt Karte von Überführung Turbo origanated

Question

Ich bin kein englischer Muttersprachler so bitte die Fehler nichts dagegen;)

Ich möchte eine Karte machen, wo Sie Hofläden und Milchverkaufs finden Maschinen für Menschen, die ihre Bauern vor Ort unterstützen wollen. Ich fand heraus, dass diese Dinge in den OSM-Daten mit den Tags shop=farm und amenity=vending_machine selling:milk gefunden werden können. Mit diesen Informationen können Sie problemlos eine Abfrage auf http://overpass-turbo.eu erstellen und als JSON-Datei exportieren. Ich habe "osmtogeojson" verwendet, um diese Daten in GeoJSON zu konvertieren und habe ein kleines Testsample als "test.geojson" in meinem Hauptordner gespeichert. Ich auch heruntergeladen leaflet.ajax.min.js und legte es in meinem Hauptordner. Jetzt möchte ich diese lokale GeoJSON-Datei in eine Leaflet-Map importieren. So, hier ist meine Situation:

Mein Kopfbereich sieht wie folgt aus: (so ziemlich alles ist eine Kopie von den Tutorials auf leafletjs.com und Stack-Überlauf)

<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" /> 
<script src="/leaflet.ajax.min.js"></script> 
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ==" crossorigin=""/> 
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js" integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg==" crossorigin=""></script> 

Jahr Dies ist (der wichtige Teil von die JavaScript):

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

EDIT: Hier ist eine Live-Demo: https://stefang.cepheus.uberspace.de/farmshops/ Sie können meine /test.geojson Datei dort finden.

Weiß jemand, was hier schief gelaufen ist?

Weniger wichtig JS Teil (aus den Kommentaren im Auftrag von OP importiert):

var mymap = L.map('mapid').setView([49.013, 8.40], 10); 
L.tileLayer('api.tiles.mapbox.com/v4{id}/{z}/{x}/{y}.png?acc‌​ess_token=<TOKEN>', { 
    maxZoom: 18, 
    attribution: 'Map data &copy; <a href="openstreetmap.org">OpenStreetMap</a>; contributors, ' + '<a href="creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</…;, ' + 'Imagery © <a href="mapbox.com">Mapbox</a>';, 
    id: 'mapbox.streets' 
}).addTo(mymap); 

Answer 1

1) Sie haben nicht die erwarteten L is not defined Fehler, weil Ihr <script> Attribut src fehlerhaft ist (Ihr persönlicher führender Schrägstrich / macht der Browser die Datei auf https://stefang.cepheus.uberspace.de/leaflet.ajax.min.js zuzugreifen versuchen, während es einmal bei https://stefang.cepheus.uberspace.de/farmshops/leaflet.ajax.min.js)

2) platziert wird, wird dies korrigiert, richtig die L is not defined Fehler angezeigt. Sie müssen das <script> Tag für Leaflet-Ajax-Plugin nach das für Leaflet platzieren.

3) Der TypeError: geojsonLayer is undefined Fehler ist aufgrund Ihrer Linie geojsonLayer.addTo(map) tatsächlich vorvar geojsonLayer = new L.GeoJSON.AJAX("test.geojson") gelegt Sie haben es nach die variable Zuordnung zu setzen.

Sobald diese 3 Fehler behoben sind, wird Ihre GeoJSON-Datei korrekt importiert und gerendert.

Demo: https://plnkr.co/edit/OwyfvvoaseLhhCyleN4n?p=preview