https://www.perhonen.fr/projects/osm-shop/inc/map.js

1function init() {
2  var attr_osm = 'Map data &copy; <a href="https://openstreetmap.org/">OpenStreetMap</a> contributors';
3  var attr_overpass = 'POI via <a href="https://www.overpass-api.de/">Overpass API</a>';
4
5  var osm = new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {opacity: 0.9, attribution: [attr_osm, attr_overpass].join(', ')}),
6    outdoor = new L.TileLayer('https://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png', {opacity: 0.9, attribution: ['Tiles © <a href="http://www.thunderforest.com/outdoors/">Gravitystorm</a>', attr_osm, attr_overpass].join(', ')});
7
8  var overpass_args = [
9    'node(BBOX)[shop]',
10    'node(BBOX)[amenity][amenity!=bench][amenity!=bus_station][amenity!=fountain][amenity!=parking][amenity!=recycling][amenity!=townhall][amenity!=bicycle_parking][amenity!=toilets][amenity!=post_box][amenity!=telephone][amenity!=waste_basket]',
11    'way(BBOX)[shop]'
12  ].join(';');
13
14  // create a map in the "map" div, set the view to a given place and zoom
15  var map = L.map(document.getElementById('map'), {center: new L.LatLng(48.12398, -1.21124), zoom: 14, layers: osm});
16
17  // Add choose map style
18  map.getControl = function () {
19    var ctrl = new L.Control.Layers({
20      'OpenStreetMap': osm,
21      'Outdoors (OSM)': outdoor
22    });
23    return function () {
24      return ctrl;
25    };
26  }();
27  map.addControl(map.getControl());
28
29  // marker informations
30  poiInfo = function(tags) {
31    var r = $('<table>');
32    for (key in tags)
33      r.append($('<tr>').append($('<th>').text(key)).append($('<td>').text(tags[key])));
34    return $('<div>').append(r).html();
35  };
36
37  //OverPassAPI overlay
38  var opl = new L.OverPassLayer({
39    minzoom: 14,
40    query: "https://overpass-api.de/api/interpreter?data=[out:json];(" + overpass_args + ");out body;>;out skel qt;",
41    callback: function(data) {
42      var nodes = {}, ways = {};
43      for(i=0;i<data.elements.length;i++) {
44        e = data.elements[i];
45        console.log(e);
46        if (e.type == "node") {
47            if (e.id in this.instance._ids) return;
48            this.instance._ids[e.id] = true;
49            nodes[e.id] = e;
50            
51            if (!e.tags) continue;
52
53            var pos = new L.LatLng(e.lat, e.lon);
54            
55            var display = L.circle(pos, 5, {
56              color: 'red',
57              fillColor: '#fa3',
58              fillOpacity: 1
59            })
60            .bindPopup(poiInfo(e.tags));
61            this.instance.addLayer(display);
62        }
63        else if (e.type == 'way') {
64          e.coordinates = e.nodes.map(function (id) {
65            return nodes[id].coordinates;
66          });
67          e.geometry = {type: 'LineString', coordinates: e.coordinates};
68          ways[e.id] = e;
69        }
70      }
71    }
72  })
73  map.addLayer(opl);
74};