Включение слоя и получение объектов по клику

Подготовка

• Прежде всего необходимо подключить jquery-библиотеки и API геопортала.

<script src="/public/javascripts/libs/jquery/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="/public/javascripts/libs/jquery/jquery-ui-1.9.2.custom_6016bgfx.min.jstom.min.js" type="text/javascript"></script>
<script src="/public/javascripts/geoportal/geoportal-api.min.js" type="text/javascript"></script>

• Добавьте на html страницу div c выбранным по вашему желанию id. Это контейнер для карты. Например создадим div c id="map".

<div id="map"></div>

• Добавьте стиль для контейнера карты. Обязательно необходимо прописать ширину и высоту.

#map {
    height: 100%;
    width: 960px;
}

Работа с API

• Когда бибилиотеки и api загружены, создается объект GeoPortal. Подключаемся к событию ready объекта GeoPortal. В момент сработки события, объект готов к использованию.

$(function() {
    var gpMap,
        clickLatLn,
        marker;
    GeoPortal.on("ready",function() {
        //code
    },this);

});

• После того, как сработало событие ready у объекта GeoPortal, создадим объект карты. А затем получим все доступные группы со слоями.

gpMap = new GeoPortal.Map('map');
GeoPortal.requestGroups(true,
    function (groups) {
        //code
    },
    function(status,error) {
        console.log("Error to request groups list. Status = " + status + ". Error text: " + error);
    }
);

• Если группы получены (сработает функция groupsRequested(groups)), возьмем первую группу и первые два слоя в ней и добавим их на карту.

var firstGroup = groups[0],
    layers = firstGroup.layers(),
    firstLayer,secondLayer;

firstLayer = layers[0];
gpMap.addLayer(firstLayer);

if(layers.length > 1) {
    secondLayer = layers[1];
    gpMap.addLayer(secondLayer);
}

• Подключимся к событию popupclose объекта карты, чтобы убирать маркер в случае, если popUp будет закрыт. Подключимся к событию click, чтобы отслеживать точку клика по карте, а также к событию featureClicked, чтобы получить список объектов, которые будут найдены во включенных слоях в точке клика.

gpMap.on("popupclose",
    function(data) {
        if (typeof marker != 'undefined') {
            gpMap.removeLayer(marker);
            marker = undefined;
        }
    },this);

    gpMap.on("click",function(e) {
        clickLatLng = e.latlng;
    },this);

    gpMap.on("featureClicked",function(data) {
        //code
    },this);

• Если список объектов не найден, выведем в консоль ошибку. Если список объектов в точке найден, установим в ней маркер, создадим у маркера popUp и выведем в него текст с заголовком первого найденного объекта.

if (typeof marker != 'undefined') {
    gpMap.removeLayer(marker);
    marker = undefined;
}

if(typeof data.features == 'undefined') {
    console.log("Request features error. Status = " + data.status + ". Error text: " + data.error);
    return;
}

var features = data.features;
if(data.layer) {
    marker = new GeoPortal.Marker(data.layer._latlng);
    gpMap.addLayer(marker);
    marker.setPopup('<p>'+features[0].title()+'</p>');
} else if(clickLatLng && clickLatLng instanceof L.LatLng) {
    marker = new GeoPortal.Marker(clickLatLng);
    gpMap.addLayer(marker);
    marker.setPopup('<p>'+features[0].title()+'</p>');
}