Как добавить внешние данные для геокодера в Mapbox GL JS

Я веду карту расположения нескольких объектов с их названиями и данными координат. Я хочу, чтобы геокодер мог выполнять поиск по названию объекта.

В Mapbox есть отличный пример этого, но их пример показывает вариант использования, когда набор данных загружается В фактический код. Мой набор данных намного больше, и в настоящее время он находится в файле .geojson в папке проекта.

Как я могу преобразовать этот код для работы в моем примере?

Я попытался вызвать свой набор данных в код геокодера, используя

  var myData =getSource('BRdata');

затем позвонив

 for (var i = 0; i < myData.features.length; i++) {
    var feature = myData.features[I];

// handle queries with different capitalization than the source data by calling toLowerCase()
     if (feature.properties.HandlerId.toLowerCase().search(query.toLowerCase()) !== -1) {

     feature['place_name'] = '???? ' + feature.properties.HandlerId;
     feature['center'] = feature.geometry.coordinates;
      matchingFeatures.push(feature);
 }
}
  return matchingFeatures;
}

получить данные в геокодер, но он не работает. Я получаю ошибку "

myData не определен

Здесь можно увидеть рабочий плункер https://plnkr.co/edit/UUaf6OCgvoavwshdUdN9?p=preview

Ожидаемый результат: Геокодер для вызова данных .geojson в поле поиска Фактический результат: Геокодер не может найти .geojson.

Ошибка: "myData не определена"

edit добавил этот код, который включает новую переменную myData:

    function forwardGeocoder(query) {
  // Fetch data on server and serve me the raw geojson
  var myData = fetch('test-plnkr.json').then(res => res.json());
    var matchingFeatures = [];
    for (var i = 0; i < myData.features.length; i++) {
    var feature = myData.features[i];
    // handle queries with different capitalization than the source data by calling toLowerCase()
    if (feature.properties.HandlerId.toLowerCase().search(query.toLowerCase()) !== -1) {
    // add a tree emoji as a prefix for custom data results
    // using carmen geojson format: https://github.com/mapbox/carmen/blob/master/carmen-geojson.md
    feature['place_name'] = '???? ' + feature.properties.HandlerId;
    feature['center'] = feature.geometry.coordinates;
    //feature['place_type'] = ['park'];
    matchingFeatures.push(feature);
    }
    }
    return matchingFeatures;
    }

map.addControl(new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
localGeocoder: forwardGeocoder,
zoom: 14,
placeholder: "Enter search e.g. Lincoln Park",
mapboxgl: mapboxgl
}));

person Deeba Yavrom    schedule 10.06.2019    source источник