kartenkarsten · britiger · Oct 4, 2016 · Oct 4, 2016 · Oct 4, 2016 · Oct 4, 2016
diff --git a/README.md b/README.md
@@ -34,6 +34,15 @@ map.addLayer(opl);
 ```
 In order to get a valid query the [Overpass-turbo IDE](http://overpass-turbo.eu/) might help.
 
+Please note that you need also request all nodes of if you want to display the way. You can do this by using the recurse down statement. 
+```(
+  way(BBOX)
+    ['highway'='service'];
+  >;
+);
+out;
+```
+
 ## What are the options?
 You can specify an options object as an argument of L.OverPassLayer.
 ```javascript
@@ -45,7 +54,7 @@ options: {
     for(var i=0;i<data.elements.length;i++) {
       var e = data.elements[i];
 
-      if (e.id in this.instance._ids) return;
+      if (e.id in this.instance._ids) continue;
       this.instance._ids[e.id] = true;
       var pos = new L.LatLng(e.lat, e.lon);
       var popup = this.instance._poiInfo(e.tags,e.id);
@@ -73,7 +82,9 @@ options: {
 - [briefkastenkarte.de](http://briefkastenkarte.de/)
 
 ## Dependencies
+- osmtogeojson
 - Leaflet (tried with version 0.6.2, 0.7.3)
+- jQuery (trued with version 1.10.)
 
 ## Development
 In order to contribute to the project you should first clone the repository. The javascript source files
@@ -95,7 +106,6 @@ after you made your changes. This will combine (and minify) the files and put th
 
 
 ## Further Ideas
-- OverPass result to -> geoJSON to -> Leaflet Layer to support ways and areas as well (see also [PoiMap](https://github.com/simon04/POImap/blob/master/railway.html), [OverPassTurbo](https://github.com/tyrasd/overpass-ide/blob/gh-pages/js/overpass.js))
 - improve popup text. use links, format addresses and contact details (compare with [OpenLinkMap](http://www.openlinkmap.org/))
 - improve caching - allow to store data for some days in browser
 
diff --git a/demo/index.html b/demo/index.html
@@ -7,6 +7,8 @@
   <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.css" />
   <link rel="stylesheet" href="../dist/OverPassLayer.css" />
   <script src="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet-src.js"></script>
+  <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
+  <script src="https://tyrasd.github.io/osmtogeojson/osmtogeojson.js"></script>
   <script src="../dist/OverPassLayer.js"></script>
   <style>
     body {
@@ -24,7 +26,7 @@
   <script>
 	  var attr_osm = 'Map data &copy; <a href="http://openstreetmap.org/">OpenStreetMap</a> contributors',
       attr_overpass = 'POI via <a href="http://www.overpass-api.de/">Overpass API</a>';
-    var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {opacity: 0.7, attribution: [attr_osm, attr_overpass].join(', ')});
+    var osm = new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {opacity: 0.7, attribution: [attr_osm, attr_overpass].join(', ')});
 
 		var map = new L.Map('map').addLayer(osm).setView(new L.LatLng(52.265, 10.524), 14);
 
@@ -33,14 +35,14 @@
       endpoint: "http://overpass.osm.rambler.ru/cgi/",
       query: "node(BBOX)['amenity'='post_box'];out;",
       callback: function(data) {
-        for(var i=0;i<data.elements.length;i++) {
-          var e = data.elements[i];
+        for(var i=0;i<data.features.length;i++) {
+          var e = data.features[i];
 
-          if (e.id in this.instance._ids) return;
-          this.instance._ids[e.id] = true;
-          var pos = new L.LatLng(e.lat, e.lon);
-          var popup = this.instance._poiInfo(e.tags,e.id);
-          var color = e.tags.collection_times ? 'green':'red';
+          if (e.properties.id in this.instance._ids) continue;
+          this.instance._ids[e.properties.id] = true;
+          var pos = L.GeoJSON.coordsToLatLng(e.geometry.coordinates);
+          var popup = this.instance._poiInfo(e.properties.tags,e.properties.id);
+          var color = e.properties.tags.collection_times ? 'green':'red';
           var circle = L.circle(pos, 50, {
             color: color,
             fillColor: '#fa3',

diff --git a/demo/index_line.html b/demo/index_line.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>OverPass Layer Demo</title>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.css" />
+  <link rel="stylesheet" href="../dist/OverPassLayer.css" />
+  <script src="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet-src.js"></script>
+  <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
+  <script src="https://tyrasd.github.io/osmtogeojson/osmtogeojson.js"></script>
+  <script src="../dist/OverPassLayer.js"></script>
+  <style>
+    body {
+      padding: 0;
+      margin: 0;
+    }
+    html, body, #map {
+      height: 100%;
+      width: 100%;
+    }
+  </style>
+</head>
+<body>
+  <div id="map"></div>
+  <script>
+	  var attr_osm = 'Map data &copy; <a href="http://openstreetmap.org/">OpenStreetMap</a> contributors',
+      attr_overpass = 'POI via <a href="http://www.overpass-api.de/">Overpass API</a>';
+    var osm = new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {opacity: 0.7, attribution: [attr_osm, attr_overpass].join(', ')});
+
+		var map = new L.Map('map').addLayer(osm).setView(new L.LatLng(52.265, 10.524), 16);
+
+    //OverPassAPI overlay
+    var opl = new L.OverPassLayer({
+      endpoint: "http://overpass.osm.rambler.ru/cgi/",
+      query: "(way(BBOX)['highway'='service'];>;);out;",
+      callback: function(data) {
+        for(var i=0;i<data.features.length;i++) {
+          var e = data.features[i];
+
+          if (e.properties.type != "way") continue;
+          if (e.properties.id in this.instance._ids) continue;
+          this.instance._ids[e.properties.id] = true;
+          var line = L.GeoJSON.coordsToLatLngs(e.geometry.coordinates);
+          var popup = this.instance._poiInfo(e.properties.tags,e.properties.id);
+          var color = e.properties.tags.collection_times ? 'green':'red';
+          var polyLine = L.polyline(line, {
+            color: color,
+            fillColor: '#fa3',
+            fillOpacity: 0.5
+          })
+          .bindPopup(popup);
+          this.instance.addLayer(polyLine);
+        }
+      },
+      minZoomIndicatorOptions: {
+        position: 'topright',
+        minZoomMessageNoLayer: "no layer assigned",
+        minZoomMessage: "current Zoom-Level: CURRENTZOOM all data at Level: MINZOOMLEVEL"
+      }
+    });
+    map.addLayer(opl);
+
+  </script>
+</body>
+</html>
+
diff --git a/demo/multi_layer_example.html b/demo/multi_layer_example.html
@@ -34,7 +34,7 @@
       callback: function(data) {
         for(i=0;i<data.elements.length;i++) {
           e = data.elements[i];
-          if (e.id in this.instance._ids) return;
+          if (e.id in this.instance._ids) continue;
           this.instance._ids[e.id] = true;
 
           var pos = new L.LatLng(e.lat, e.lon);
@@ -68,7 +68,7 @@
         for(i=0;i<data.elements.length;i++) {
           e = data.elements[i];
 
-          if (e.id in this.instance._ids) return;
+          if (e.id in this.instance._ids) continue;
           this.instance._ids[e.id] = true;
           var pos = new L.LatLng(e.lat, e.lon);
           var popup = this.instance._poiInfo(e.tags,e.id);

diff --git a/demo/simple.html b/demo/simple.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>OverPass Layer Demo</title>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.css" />
+  <link rel="stylesheet" href="../dist/OverPassLayer.css" />
+  <script src="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet-src.js"></script>
+  <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
+  <script src="https://tyrasd.github.io/osmtogeojson/osmtogeojson.js"></script>
+  <script src="../dist/OverPassLayer.js"></script>
+  <style>
+    body {
+      padding: 0;
+      margin: 0;
+    }
+    html, body, #map {
+      height: 100%;
+      width: 100%;
+    }
+  </style>
+</head>
+<body>
+  <div id="map"></div>
+  <script>
+	var attr_osm = 'Map data &copy; <a href="http://openstreetmap.org/">OpenStreetMap</a> contributors',
+	attr_overpass = 'POI via <a href="http://www.overpass-api.de/">Overpass API</a>';
+	var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {opacity: 0.7, attribution: [attr_osm, attr_overpass].join(', ')});
+
+	var map = new L.Map('map').addLayer(osm).setView(new L.LatLng(52.265, 10.524), 14);
+
+	//OverPassAPI overlay
+	var opl = new L.OverPassLayer({
+	  query: "node(BBOX)['amenity'='post_box'];out;",
+	  endpoint: "https://overpass-api.de/api/",
+	});
+
+	map.addLayer(opl);
+  </script>
+</body>
+</html>
+
diff --git a/dist/OverPassLayer.js b/dist/OverPassLayer.js
@@ -101,21 +101,21 @@ L.OverPassLayer = L.FeatureGroup.extend({
   options: {
     debug: false,
     minzoom: 15,
-    endpoint: "http://overpass-api.de/api/",
+    endpoint: "//overpass-api.de/api/",
     query: "(node(BBOX)[organic];node(BBOX)[second_hand];);out qt;",
     callback: function(data) {
-      for(var i = 0; i < data.elements.length; i++) {
-        var e = data.elements[i];
+      for(var i = 0; i < data.features.length; i++) {
+        var e = data.features[i];
 
-        if (e.id in this.instance._ids) continue;
+        if (e.properties.id in this.instance._ids) continue;
         this.instance._ids[e.id] = true;
         var pos;
-        if (e.type === "node") {
-          pos = new L.LatLng(e.lat, e.lon);
-        } else {
-          pos = new L.LatLng(e.center.lat, e.center.lon);
+        if (e.properties.type === "node") {
+          pos = new L.GeoJSON.coordsToLatLng(e.geometry.coordinates);
+        } else if(e.properties.type === "way") {
+          pos = new L.GeoJSON.coordsToLatLng(e.geometry.coordinates[0][0]);
         }
-        var popup = this.instance._poiInfo(e.tags,e.id);
+        var popup = this.instance._poiInfo(e.properties.tags,e.properties.id);
         var circle = L.circle(pos, 50, {
           color: 'green',
           fillColor: '#3f0',
@@ -152,7 +152,7 @@ L.OverPassLayer = L.FeatureGroup.extend({
 
   _poiInfo: function(tags,id) {
     var link = document.createElement("a");
-    link.href = "http://www.openstreetmap.org/edit?editor=id&node=" + id;
+    link.href = "//www.openstreetmap.org/edit?editor=id&node=" + id;
     link.appendChild(document.createTextNode("Edit this entry in iD"));
     var table = document.createElement('table');
     for (var key in tags){
@@ -251,7 +251,7 @@ L.OverPassLayer = L.FeatureGroup.extend({
 
 
           var queryWithMapCoordinates = this.options.query.replace(/(BBOX)/g, bbox.toOverpassBBoxString());
-          var url =  this.options.endpoint + "interpreter?data=[out:json];" + queryWithMapCoordinates;
+          var url =  this.options.endpoint + "interpreter?data=[out:xml];" + queryWithMapCoordinates;
 
           if (beforeRequest) {
               this.options.beforeRequest.call(this);
@@ -265,7 +265,8 @@ L.OverPassLayer = L.FeatureGroup.extend({
           request.onload = function() {
             if (this.status >= 200 && this.status < 400) {
               var reference = {instance: self};
-              self.options.callback.call(reference, JSON.parse(this.response));
+              var resp = osmtogeojson($.parseXML(this.response));
+              self.options.callback.call(reference, resp);
               if (self.options.debug) {
                 console.debug('queryCount: ' + queryCount + ' - finishedCount: ' + finishedCount);
               }