Search code examples
javascriptajaxleafletopenstreetmapoverpass-api

Import geojson data to a leaflet map origanated from overpass turbo

I am not a native English speaker so please don't mind the mistakes ;)

I want to make a map where you can find farm shops and milk vending machines for people that want to support their local farmers. I found out that these things can be found in the OSM data with the tags shop=farm and amenity=vending_machine selling:milk. With that information you can easily crate a query on http://overpass-turbo.eu and export it as a JSON file. I used "osmtogeojson" to convert this Data to GeoJSON and stored a small test sample as "test.geojson" in my main folder. I also downloaded leaflet.ajax.min.js and put it in my main folder. Now I want to import this local GeoJSON file into a Leaflet map. So here is my situation:

My head area looks like this: (pretty much everything is a copy from the tutorials on leafletjs.com and 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>

An this is (the important part of) the JavaScript:

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

EDIT:Here is a live demo: https://stefang.cepheus.uberspace.de/farmshops/ you can find my /test.geojson file there too.

Does anyone know what went wrong here?

Less important JS part (imported from comments on behalf of OP):

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);
Solution

  • 1) You do not have the expected L is not defined error because your <script> src attribute is erroneous (your extra leading slash / makes the browser try to access the file at https://stefang.cepheus.uberspace.de/leaflet.ajax.min.js, whereas it is placed at https://stefang.cepheus.uberspace.de/farmshops/leaflet.ajax.min.js)

    2) Once this is corrected, the L is not defined error correctly appears. You have to place the <script> tag for Leaflet-ajax plugin after the one for Leaflet.

    3) The TypeError: geojsonLayer is undefined error is due to your linegeojsonLayer.addTo(map) being actually placed before var geojsonLayer = new L.GeoJSON.AJAX("test.geojson") You have to put it after the variable assignment.

    Once these 3 errors are corrected, your GeoJSON file seems to be imported and rendered correctly.

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