title: OpenLayers - Use Overpass Turbo API
body: <p>I want to display markers according to a GeoJSON file and with the code below all is working fine and now I want to use Overpass Turbo. I want to display all swimming-pools.</p>
  
  <p>I use this request :</p>
  
  <pre><code>[out:json][timeout:25][bbox:48.64209701511677,6.084880828857422,48.743172495967094,6.318340301513672];
  (
    node["leisure"][access!="private"][sport="swimming"][name!=''];
    node[access!="private"][leisure="swimming_pool"][name!=''];
    way["leisure"][access!="private"][sport="swimming"][name!=''];
    way[access!="private"][leisure="swimming_pool"][name!=''];
    relation["leisure"][access!="private"][sport="swimming"][name!=''];
    relation[access!="private"][leisure="swimming_pool"][name!=''];
  );
  out center;
  &gt;;
  </code></pre>
  
  <p>I use this server : //overpass-api.de/api/</p>
  
  <p>When I want to export this request and generate raw data from Overpass API in order to generate a GeoJSON request (in my case : <a href="https://overpass-api.de/api/interpreter?data=%5Bout%3Ajson%5D%5Btimeout%3A25%5D%5Bbbox%3A48.64209701511677%2C6.084880828857422%2C48.743172495967094%2C6.318340301513672%5D%3B%0A%28%0A%20%20node%5B%22leisure%22%5D%5Baccess%21%3D%22private%22%5D%5Bsport%3D%22swimming%22%5D%5Bname%21%3D%27%27%5D%3B%0A%20%20node%5Baccess%21%3D%22private%22%5D%5Bleisure%3D%22swimming_pool%22%5D%5Bname%21%3D%27%27%5D%3B%0A%20%20way%5B%22leisure%22%5D%5Baccess%21%3D%22private%22%5D%5Bsport%3D%22swimming%22%5D%5Bname%21%3D%27%27%5D%3B%0A%20%20way%5Baccess%21%3D%22private%22%5D%5Bleisure%3D%22swimming_pool%22%5D%5Bname%21%3D%27%27%5D%3B%0A%20%20relation%5B%22leisure%22%5D%5Baccess%21%3D%22private%22%5D%5Bsport%3D%22swimming%22%5D%5Bname%21%3D%27%27%5D%3B%0A%20%20relation%5Baccess%21%3D%22private%22%5D%5Bleisure%3D%22swimming_pool%22%5D%5Bname%21%3D%27%27%5D%3B%0A%29%3B%0Aout%20center%3B%0A%3E%3B" rel="nofollow noreferrer">https://overpass-api.de/api/interpreter?data=%5Bout%3Ajson%5D%5Btimeout%3A25%5D%5Bbbox%3A48.64209701511677%2C6.084880828857422%2C48.743172495967094%2C6.318340301513672%5D%3B%0A%28%0A%20%20node%5B%22leisure%22%5D%5Baccess%21%3D%22private%22%5D%5Bsport%3D%22swimming%22%5D%5Bname%21%3D%27%27%5D%3B%0A%20%20node%5Baccess%21%3D%22private%22%5D%5Bleisure%3D%22swimming_pool%22%5D%5Bname%21%3D%27%27%5D%3B%0A%20%20way%5B%22leisure%22%5D%5Baccess%21%3D%22private%22%5D%5Bsport%3D%22swimming%22%5D%5Bname%21%3D%27%27%5D%3B%0A%20%20way%5Baccess%21%3D%22private%22%5D%5Bleisure%3D%22swimming_pool%22%5D%5Bname%21%3D%27%27%5D%3B%0A%20%20relation%5B%22leisure%22%5D%5Baccess%21%3D%22private%22%5D%5Bsport%3D%22swimming%22%5D%5Bname%21%3D%27%27%5D%3B%0A%20%20relation%5Baccess%21%3D%22private%22%5D%5Bleisure%3D%22swimming_pool%22%5D%5Bname%21%3D%27%27%5D%3B%0A%29%3B%0Aout%20center%3B%0A%3E%3B</a>)</p>
  
  <p>I want to replace my local GeoJSON file by the generated API but I'm getting this error : "Uncaught TypeError: (0 , Sq[a.type]) is not a function"</p>
  
  <pre><code>var sourceLayer = new ol.source.Vector({
     url: 'generated_url',
     format: new ol.format.GeoJSON()
  });
  </code></pre>
  
  <p>Do you have any idea ?</p>
  
  <p>The code :</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
        &lt;meta charset="utf-8" /&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
        &lt;title&gt;Map&lt;/title&gt;
        &lt;link rel="stylesheet" href="ol/ol.css"&gt;
        &lt;link rel="stylesheet" href="ol/ol3-layerswitcher.css"&gt;
        &lt;!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --&gt;
        &lt;script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"&gt;&lt;/script&gt;
        &lt;script src="ol/ol.js"&gt;&lt;/script&gt;
        &lt;script src="ol/ol3-layerswitcher.js"&gt;&lt;/script&gt;
        &lt;link rel="stylesheet" href="style.css"&gt;
        &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"&gt;
        &lt;link rel="stylesheet" href="sidebar/css/ol3-sidebar.css" /&gt;
        &lt;script src="sidebar/js/ol3-sidebar.js"&gt;&lt;/script&gt;
        &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous"&gt;
    &lt;/head&gt;
  
      &lt;body&gt;
  
          &lt;div id="map" class="map"&gt;&lt;/div&gt;
          &lt;div id="popup" class="ol-popup"&gt;
            &lt;a href="#" id="popup-closer" class="ol-popup-closer"&gt;&lt;/a&gt;
            &lt;div id="popup-content"&gt;&lt;/div&gt;
          &lt;/div&gt;
  
            &lt;script&gt;
  
              //Fonds de carte
  
              var layer1 = new ol.source.TileWMS({
                url: '...',
                params: {'LAYERS': '...', 'FORMAT': 'image/png'},
              });
  
              //other layers
  
              //Pictogrammes
  
              var piscine = new ol.style.Style({
                image: new ol.style.Icon(({
                  anchor: [0.5, 46],
                  anchorXUnits: 'fraction',
                  anchorYUnits: 'pixels',
                  src: 'image/sports-piscine.png'
                }))
              });
  
              //Marqueurs
  
              var sourceLayer = new ol.source.Vector({
                url: '...piscines.json',
                format: new ol.format.GeoJSON()
              });
  
              var vectorLayer = new ol.layer.Vector({
                source: sourceLayer
              });
  
              var view = new ol.View({ //paramètres de la map
                center: [xxx, xxx],
                minZoom: 11,
                maxZoom: 19,
                zoom: 13
              });
  
              //Map
  
              var map = new ol.Map({
                layers: [new ol.layer.Group({
                  title: 'Menu1',
                  layers: [
                    new ol.layer.Tile({
                    title: 'layer1',
                    source: layer1,
                    type: 'base'
                    }),
                    new ol.layer.Tile({
                    title: 'layer2',
                    source: layer2,
                    type: 'base',
                    visible: false
                    })
                  ]
              }),
              new ol.layer.Group({
                title: 'Menu2',
                layers: [
                  new ol.layer.Tile({
                    title: 'layer3',
                    source: layer3,
                    format: new ol.format.WFS(),
                    visible: false
                  })
                ]
              }),
            ],
                target: 'map',
                view: view
              });
  
            map.addControl(vectorLayer);
  
            var sidebar = new ol.control.Sidebar({ element: 'sidebar', position: 'left' });
            map.addControl(sidebar);
  
            map.addControl(new ol.control.LayerSwitcher());
  
            var markers = function style(feature, resolution) {
                if (feature.get('name')!=null) {
                  return piscine;
                } else {
                  return null;
                }
            }
  
          vectorLayer.setStyle(markers);
  
          // Popup
  
          var element = document.getElementById('popup');
  
          var popup = new ol.Overlay({
              element: element,
              autoPan: true,
              offset: [0, -30]
          });
  
          map.addOverlay(popup);
  
          var content_element = document.getElementById('popup-content');
          var closer = document.getElementById('popup-closer');
  
          closer.onclick = function() {
                popup.setPosition(undefined);
                closer.blur();
                return false;
            };
  
            map.on('click', function(evt){
                var feature = map.forEachFeatureAtPixel(evt.pixel,
                  function(feature) {
                    return feature;
                  });
                  if (feature) {
                    var geometry = feature.getGeometry();
                    var coord = geometry.getCoordinates();
  
                    if(feature.get('name')!=null) {
                      var content = '&lt;center&gt;&lt;h2&gt;' + feature.get('name') + '&lt;/h2&gt;&lt;/center&gt;' + '&lt;br&gt;';
                    } else {
                      var content = '&lt;h5&gt;' + 'No informations' + '&lt;/h5&gt;';
                    }
  
                    if(feature.get('addr:street')!=null) {
                      content += '&lt;h5&gt;' + '&lt;i&gt;Adress : &lt;/i&gt;' + feature.get('addr:street') + '&lt;/h5&gt;';
                    }
  
                    if(feature.get('phone')!=null) {
                      content += '&lt;h5&gt;' + '&lt;i&gt;Phone number : &lt;/i&gt;' + feature.get('phone') + '&lt;/h5&gt;';
                    }
  
                    if(feature.get('website')!=null) {
                      content += '&lt;h5&gt;' + '&lt;i&gt;Website : &lt;/i&gt;' + '&lt;/h5&gt;' + '&lt;p&gt;' + feature.get('website') + '&lt;/p&gt;';
                    }
  
                    content_element.innerHTML = content;
                    popup.setPosition(coord);
                }
            });
  
            map.on('pointermove', function(e) {
                if (e.dragging) {
                  return;
                };
  
                var pixel = map.getEventPixel(e.originalEvent);
                var hit = map.hasFeatureAtPixel(pixel);
  
                map.getViewport().style.cursor = hit ? 'pointer' : '';
            });
  
            &lt;/script&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>