Demo to use Overpass JSON API with OpenLayers 3 & 4 by ThomasG77

index.html

<!DOCTYPE>
<html>
  <head>
    <title>Overpass JSON</title>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
    <script src="https://rawgit.com/tyrasd/osmtogeojson/gh-pages/osmtogeojson.js"></script>
    <style>
        body {
            padding: 0;
            margin: 0;
        }

        html, body, #map {
            height: 100%;
            font: 10pt "Helvetica Neue", Arial, Helvetica, sans-serif;
        }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        target: 'map',
        view: new ol.View({
          center: ol.proj.fromLonLat([6.17383, 48.69662]),
          zoom: 13
        })
      });
      // If you want dynamic version
      var vectorSource = new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        loader: function(extent, resolution, projection) {
          var epsg4326Extent =
              ol.proj.transformExtent(extent, projection, 'EPSG:4326');
          var stringExtent = epsg4326Extent[1] + ',' + epsg4326Extent[0] + ',' +
              epsg4326Extent[3] + ',' + epsg4326Extent[2];
          // Usefull if you use an ol.loadingstrategy.bbox instead of  ol.loadingstrategy.all
          // var query = '[out:json][timeout:25];(node["amenity"="cafe"](' + stringExtent + ');way["amenity"="cafe"](' + stringExtent + ');relation["amenity"="cafe"](' + stringExtent + '););out;>;out skel qt;';
          var query = '[bbox:48.64209701511677,6.084880828857422,48.743172495967094,6.318340301513672][out:json][timeout:25];(node["leisure"]["access"!="private"]["sport"="swimming"];node["access"!="private"]["leisure"="swimming_pool"];way["leisure"]["access"!="private"]["sport"="swimming"];way["access"!="private"]["leisure"="swimming_pool"];relation["leisure"]["access"!="private"]["sport"="swimming"];relation["access"!="private"]["leisure"="swimming_pool"];);out center;>;'
          fetch('https://overpass-api.de/api/interpreter', {
            method: "POST",
            body: query
          })
          .then(response => response.json())
          .then(json => {
            const geojson = osmtogeojson(json, {
              flatProperties: true
            });
            var features = new ol.format.GeoJSON().readFeatures(geojson, {
              featureProjection: map.getView().getProjection()
            });
            vectorSource.addFeatures(features);
          });
        },
        strategy: ol.loadingstrategy.all // ol.loadingstrategy.bbox
      });

      var vectorLayer = new ol.layer.Vector({
        renderMode: 'image',
        source: vectorSource
      })
      map.addLayer(vectorLayer);
      
      // Code borrowed from https://openlayers.org/en/v4.6.5/examples/kml-timezones.html
      // but without the popup (only logging)
      var displayFeatureInfo = function(pixel) {
        var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
          return feature;
        });
        if (feature) {
          console.log(feature.getProperties());
        } else {
          console.log('Nothing around');
        }
      };

      map.on('click', function(evt) {
        displayFeatureInfo(evt.pixel);
      });
    </script>
  </body>
</html>