Импортировать данные геойсона на карту листовок, созданную на путепроводах турбо

Question

Я не являюсь носителем английского языка, поэтому, пожалуйста, не обращайте внимания на ошибки;)

Я хочу сделать карту, где вы можете найти фермерские магазины и автоматы по продаже молока для людей, которые хотят поддержать своих местных фермеров. Я обнаружил, что эти вещи можно найти в данных OSM с тегами shop=farm а также amenity=vending_machine selling:milk, С этой информацией вы можете легко создать запрос на http://overpass-turbo.eu/ и экспортировать его в виде файла JSON. Я использовал "osmtogeojson" для преобразования этих данных в GeoJSON и сохранил небольшой тестовый образец как "test.geojson" в моей главной папке. Я тоже скачал leaflet.ajax.min.js и положить его в мою основную папку. Теперь я хочу импортировать этот локальный файл GeoJSON в карту Leaflet. Итак, вот моя ситуация:

Моя область головы выглядит следующим образом: (почти все это копия учебников на leafletjs.com и Stack Overflow)

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

Это (важная часть) JavaScript:

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

РЕДАКТИРОВАТЬ: Вот живая демонстрация: https://stefang.cepheus.uberspace.de/farmshops/ вы также можете найти мой файл /test.geojson там.

Кто-нибудь знает, что здесь пошло не так?

Менее важная часть JS (импортирована из комментариев от имени ОП):

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) У вас нет ожидаемого L is not defined ошибка, потому что ваш <script> атрибут src ошибочен (ваш дополнительный ведущий слеш / заставляет браузер пытаться получить доступ к файлу в https://stefang.cepheus.uberspace.de/leaflet.ajax.min.jsв то время как он находится в https://stefang.cepheus.uberspace.de/farmshops/leaflet.ajax.min.js)

2) После исправления L is not defined ошибка правильно появляется. Вы должны разместить <script> тег для плагина Leaflet-ajax после того, как для Leaflet.

3) TypeError: geojsonLayer is undefined ошибка связана с вашей линиейgeojsonLayer.addTo(map) фактически ставится перед var geojsonLayer = new L.GeoJSON.AJAX("test.geojson") Вы должны поставить его после присвоения переменной.

После того, как эти 3 ошибки будут исправлены, ваш файл GeoJSON кажется импортированным и правильно отрендеренным.

Демонстрация: https://plnkr.co/edit/OwyfvvoaseLhhCyleN4n?p=preview