openstreetmap - How to highlight table tennis places in Openlayers?

Question

I want to highlight all table tennis places in ol. The tag is leisure=table_tennis_table and I know there is a possibility to do it with ol.style.

Pls help

EDIT:

I have my osm layer via Overpass API. I implemented it to the map but nothing has changed. I still dont see my table tennis places.

var osm = new ol.layer.Tile({
          source: new ol.source.OSM()
});                                                                     
var tables = new ol.layer.Tile({                                    
           source:  new ol.source.XYZ ({ url: 'interpreter.osm', }) });   
var map = new ol.Map({
          controls: ol.control.defaults().extend([
          new ol.control.ScaleLine(),
          new ol.control.ZoomSlider()
    ]),
layers: [tables,osm],
loadTilesWhileAnimating: true,
view: new ol.View({
    center: ol.proj.fromLonLat([13.413215,52.521918]),
    zoom: 13,
    maxZoom : 18,
    minZoom: 2
  }),

target: 'mymap'

});

Answer 1

Based on this OpenLayers example https://openlayers.org/en/v4.6.5/examples/vector-osm.html

Most are tagged sport=table_tennis is styled in green, leisure=table_tennis_table is styled red but I cannot see any.

  var map;

  var styles = {
    'sport': {
      'table_tennis': new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: 'black',
          width: 2
        }),
        fill: new ol.style.Fill({
          color: 'lime'
        }),
        image: new ol.style.Circle({
          radius: 8,
          fill: new ol.style.Fill({
            color: 'lime'
          }),
          stroke: new ol.style.Stroke({
            color: 'black',
            width: 2
          })
        })
     })
    },
    'leisure': {
      'table_tennis_table': new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: 'black',
          width: 2
        }),
        fill: new ol.style.Fill({
          color: 'red'
        }),
        image: new ol.style.Circle({
          radius: 8,
          fill: new ol.style.Fill({
            color: 'red'
          }),
          stroke: new ol.style.Stroke({
            color: 'black',
            width: 2
          })
        })
      })
    }
  };

  var vectorSource = new ol.source.Vector({
    format: new ol.format.OSMXML(),
    loader: function(extent, resolution, projection) {
      var epsg4326Extent =
          ol.proj.transformExtent(extent, projection, 'EPSG:4326');
      var client = new XMLHttpRequest();
      client.open('POST', 'https://overpass-api.de/api/interpreter');
      client.addEventListener('load', function() {
        var features = new ol.format.OSMXML().readFeatures(client.responseText, {
          featureProjection: map.getView().getProjection()
        });
        vectorSource.addFeatures(features);
      });
      var query = '(node(' +
          epsg4326Extent[1] + ',' + epsg4326Extent[0] + ',' +
          epsg4326Extent[3] + ',' + epsg4326Extent[2] +
          ');rel(bn)->.foo;way(bn);node(w)->.foo;rel(bw););out meta;';
      client.send(query);
    },
    strategy: ol.loadingstrategy.bbox
  });

  var vector = new ol.layer.Vector({
    source: vectorSource,
    style: function(feature) {
      for (var key in styles) {
        var value = feature.get(key);
        if (value !== undefined) {
          for (var regexp in styles[key]) {
            if (new RegExp(regexp).test(value)) {
              return styles[key][regexp];
            }
          }
        }
      }
      return null;
    }
  });

  var raster = new ol.layer.Tile({
    source: new ol.source.OSM()
  });

  map = new ol.Map({
    layers: [raster, vector],
    target: document.getElementById('map'),
    view: new ol.View({
      center: ol.proj.fromLonLat([13.413215,52.521918]),
      maxZoom: 18,
      minZoom: 2,
      zoom: 15
    })
  });

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js"></script>
<div id="map" class="map"></div>