javascript - overpass apiで作成したjsonレイヤーからキーでオブジェクトを検索

Question

チラシをもとにスポーツ施設マップを作成中。Overpass API を使用してオブジェクト データを取得し、1 つのタイプのスポーツ施設に対して 1 つのレイヤー グループを作成します。

var swimming = new L.LayerGroup();
var swimming_node = new L.layerJSON({
        url: 'http://overpass-api.de/api/interpreter?data=[out:json]    [timeout:1];node({lat1},{lon1},{lat2},{lon2})["sport"="swimming"];out body;',
    propertyItems: 'elements',
    propertyTitle: 'tags.name',
    propertyLoc: ['lat','lon'],
    buildIcon: function(data, title) {
        return new L.Icon({
            iconUrl:'icon/swimming.png',
            iconSize: new L.Point(32, 37),
            iconAnchor: new L.Point(18, 37),
            popupAnchor: new L.Point(0, -37)
        });
    },
    buildPopup: function(data, marker) {
        return data.tags.name || null;
    }
})
.on('dataloading',function(e) {
    loader.style.display = 'block';
})
.on('dataloaded',function(e) {
    loader.style.display = 'none';
})
.addTo(swimming);

var swimming_way = new L.layerJSON({
    url: 'http://overpass-api.de/api/interpreter?data=[out:json][timeout:1];way({lat1},{lon1},{lat2},{lon2})["sport"="swimming"];out center;',
    propertyItems: 'elements',
    propertyTitle: 'tags.name',
    propertyLoc: ['center.lat','center.lon'],
    buildIcon: function(data, title) {
        return new L.Icon({
            iconUrl:'icon/swimming.png',
            iconSize: new L.Point(32, 37),
            iconAnchor: new L.Point(18, 37),
            popupAnchor: new L.Point(0, -37)
        });
    },
    buildPopup: function(data, marker) {
        return data.tags.name || null;
    }
})
.on('dataloading',function(e) {
    loader.style.display = 'block';
})
.on('dataloaded',function(e) {
    loader.style.display = 'none';
})
.addTo(swimming);

    var swimming_relation = new L.layerJSON({
    url: 'http://overpass-api.de/api/interpreter?data=[out:json][timeout:1];relation({lat1},{lon1},{lat2},{lon2})["sport"="swimming"];out center;',
    propertyItems: 'elements',
    propertyTitle: 'tags.name',
    propertyLoc: ['center.lat','center.lon'],
    buildIcon: function(data, title) {
        return new L.Icon({
            iconUrl:'icon/swimming.png',
            iconSize: new L.Point(32, 37),
            iconAnchor: new L.Point(18, 37),
            popupAnchor: new L.Point(0, -37)
        });
    },
    buildPopup: function(data, marker) {
        return data.tags.name || null;
    }
})
.on('dataloading',function(e) {
    loader.style.display = 'block';
})
.on('dataloaded',function(e) {
    loader.style.display = 'none';
})
.addTo(swimming);

次に、すべてのスポーツ施設を含むレイヤーを作成しました

var allLayers = L.layerGroup([basketball, swimming, tennis, volleyball
]);

その後、fuse.js[1] と Leaflet.Control.Search [2] を追加して、名前「tags.name」またはタイプ「tags.sport」でオブジェクトを検索しようとしました。

検索ツールが表示されますが、オブジェクトが見つかりません。私のコードのどこが間違っているのか、可能であればどのように見えるべきか教えてください。

var fuse = new Fuse(allLayers.elements, {
        keys: ['tags.name', 'tags.sport']
    });

L.control.search({
        layer: allLayers,
        propertyName: 'name',
        position:'topright',
        filterData: function(text, records) {
            var jsons = fuse.search(text),
                ret = {}, key;

            for(var i in jsons) {
                key = jsons[i].elements.name;
                ret[ key ]= records[key];
            }

            console.log(jsons,ret);
            return ret;
        }
    })
    .on('search_locationfound', function(e) {
        e.layer.openPopup();
    })
    .addTo(map);

[1] https://github.com/krisk/fuse

[2] http://labs.easyblog.it/maps/leaflet-search/examples/fuzzy.html