Примеры динамических объектов, которые можно добавлять на карту

Подготовка

• Прежде всего необходимо подключить 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.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%;
    position: fixed;
    width: 960px;
}

Работа с API

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

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

• После того, как сработало событие ready у объекта GeoPortal, создадим объект карты.

gpMap = new GeoPortal.Map('map');

• Установим карте, после того как она готова к использованию, центр и уровень масштаба.

gpMap.on("ready",function(){
    gpMap.setView(88.681640625,55.37911044801047,3);
},this);

• Создадим стандартный маркер и добавим его на карту.

marker = new GeoPortal.Marker(L.latLng(57.314657355733274,47.39501953125));
gpMap.addLayer(marker);

• Создадим маркер с пользовательской иконкой, добавим его на карту. Создадим у этого маркера popUp с текстом.

markerCustom = new GeoPortal.IconMarker(L.latLng(56.64414704199467,52.36083984375),"/public/images/docs/iconmap.png");
gpMap.addLayer(markerCustom);
markerCustom.setPopup("<p>Маркер с пользовательской иконкой</p>");

• Создадим векторный объект PolyLine, передавая в опциях параметры своего стиля. Добавим его на карту.

polyLineOptions = {
    color: '#6e0000',
    weight: 5,
    opacity: 0.7
};
polyLine = L.polyline([L.latLng(57.9265172853711,48.076171875),
                      L.latLng(58.25172718316509,51.6796875),
                      L.latLng(58.10110549730587,54.73388671875),
                      L.latLng(55.677584411089526,56.162109375),
                      L.latLng(54.04648911335576,55.810546875),
                      L.latLng(52.9751081817353,53.0419921875)],polyLineOptions);
gpMap.addLayer(polyLine);

• Создадим слой GeoJSON, передавая в опциях параметр своего стиля и добавим его на карту.

geoJson = {"type":"MultiPolygon","coordinates":[[[[50.4508,55.7534],[50.4236,55.637],[50.3438,55.5286],[50.2168,55.4354],
    [50.0513,55.364],[49.8586,55.319],[49.6518,55.3037],[49.445,55.319],[49.2523,55.364],[49.0868,55.4354],[48.9598,55.5286],
    [48.88,55.637],[48.8527,55.7534],[48.88,55.8698],[48.9598,55.9782],[49.0868,56.0713],[49.2523,56.1428],[49.445,56.1877],
    [49.6518,56.203],[49.8586,56.1877],[50.0513,56.1428],[50.2168,56.0713],[50.3438,55.9782],[50.4236,55.8698],[50.4508,55.7534]]]]};
gpMap.addLayer(L.geoJSON(geoJson,{color: '#a80505'}));

• Создадим векторный объект Polygon, передавая в опциях параметры своего стиля. Добавим его на карту.

polygonOptions = {
    color: '#5cda35',
    weight: 5,
    opacity: 0.7,
    fillOpacity: 0.5
};

polygon = L.polygon([L.latLng(56.15778819063682,43.26416015625),
                    L.latLng(56.30434864830831,46.8896484375),
                    L.latLng(55.090943622278544,47.724609375),
                    L.latLng(53.93021986394,44.97802734375),
                    L.latLng(55.090943622278544,42.890625),
                    L.latLng(56.15778819063682,43.26416015625)],polygonOptions);
gpMap.addLayer(polygon);