[GIS] How to use Leaflet Marker Cluster on markers from Leaflet-layerJSON (Overpass API)

clusteringleafletmarkersoverpass-api

I'm having troubles getting the Leaflet Marker Cluster working with Leaflet-layerJSON. I'm trying to make a Leaflet map with data from OpenStreetMap. The markers are showing on the map, but they are not clustering. It would be a great help, if you could point out my mistakes in the following code:

<head>
<meta charset="UTF-8"/>
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.0.0/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.0.0/mapbox.css' rel='stylesheet' />
<script src="leaflet-layerjson.js"></script>

<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.css' rel='stylesheet' />
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.Default.css' rel='stylesheet' />


<div id="map"></div>
<style>
    #map { height: 100%; wigth: 100%}
</style>

<script>
    var map = L.map('map', {
        center: [55.6588976, 12.567387],
        zoom: 14
    });

    var grundkort = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);

    var markers = new L.MarkerClusterGroup();

    var bar = L.layerJSON({
        url: 'http://overpass-api.de/api/interpreter?data=[out:json];node({lat1},{lon1},{lat2},{lon2})[amenity=bar];out;',
        propertyItems: 'elements',
        propertyTitle: 'tags.name',
        propertyLoc: ['lat','lon'],
        buildIcon: function(data, title) {
        return new L.Icon({
            iconUrl:'svg/bar-12.png',
            iconSize: new L.Point(30, 30),
            iconAnchor: new L.Point(18, 37),
            popupAnchor: new L.Point(0, -37)
            });
        },
        buildPopup: function(data, marker) {
            return data.tags.name || null;
        }
    }).addTo(map);

    markers.addLayer(new L.Marker(getRandomLatLng(map)));
    map.addLayer(markers);

</script>

I have tried to find answers to my question in other posts, but without any luck. I'm new to webmapping and stackexchange and apologize if my question is unclear.

Related Question