JSFiddle - React, Tailwind, and code Playground

by alexromanchuk

HTML

<script src="//api-maps.yandex.ru/2.0.7/?load=package.full&amp;lang=ru-RU"></script>
<div id="map" style="width:400px; height:300px"></div>

JavaScript

var myMap;

// Дождёмся загрузки API и готовности DOM.
ymaps.ready(init);

function init () {
    // Создание экземпляра карты и его привязка к контейнеру с
    // заданным id ("map").
    myMap = new ymaps.Map('map', {
        // При инициализации карты обязательно нужно указать
        // её центр и коэффициент масштабирования.
        center:[55.26, 53.44], // Сетка
        zoom:8
		
	});
	
		myMap.controls.add("zoomControl", {
        left: 5,
        top: 5
    });
		   
	ymaps.geoXml.load('http://makanta.ru/data-map/M-29_07_2014.gpx').then(function (res) {
    
         myMap.geoObjects.add(res.geoObjects);

	   var mySearchControl = new SearchCollectionControl(res.geoObjects);

		 function SearchCollectionProvider(collection) {
            this._collection = collection;			
        }

        SearchCollectionProvider.prototype.geocode = function (request, options) {
            var promise = new ymaps.util.Promise(),
                geoObjects = new ymaps.GeoObjectArray(),
                offset = options.skip || 0,
                limit = options.results || 10;
				
				

            this._collection.each(function (point) {
                var prop = point.properties.get('balloonContentBody');
				
				console.log(prop);

                if(~prop.toLowerCase().indexOf(request.toLowerCase())) {
                    geoObjects.add(new ymaps.GeoObject({
                        geometry: {
                            type: "Point",
                            coordinates: point.geometry.getCoordinates()
                        },
                        properties: {
                            name: prop + ' name',
                            description: prop + ' description',
                            balloonContentBody: '<p>' + prop + '</p>'
                        }
                     }));
                }
            });

            var response = {
                // geoObjects: geoObjects.splice(offset, limit), // разкомментировать когда починят...