Создаем редактор Яндекс.Карт Часть-1

С этого поста я начинаю цикл заметок, посвященных созданию редактора Яндекс.Карт.

Определимся для начала с основными функциями нашего редактора.

Весь код будет разделен на три логических группы:

- добавление объектов на карту (метки, линии, многоугольники);

- редактирование,  добавленных объектов (геометрия, цвет, параметры, удаление с карты);

- сохранение всех объектов в базе данных, с возможностью вывода на карту.

Теперь подробнее опишу каждую часть.

1. Добавление объектов на карту.

В данной части предусмотрим следующие возможности:

– добавление меток на карту, выбор стиля значка для обозначения из стандартного набора http://api.yandex.ru/maps/jsapi/doc/ref/reference/styles.xml, ввод названия и описания для добавляемой метки; – добавление ломаной линии с возможностью задания толщины и цвета, редактировании геометрии при добавлении; – добавление многоугольников с параметрами – толщина линии обводки, цвет обводки и цвет заливки многоугольника, редактирование геометрии при добавлении.

2. Редактирование

- для меток – перемещение в новое место на карте, замена значка, изменение названия и описания, удаление с карты; – для ломаной линии – изменение геометрии, толщины и цвета, удаление; – для многоугольника – изменение геометрии, толщины линии обводки, цвета обводки и заливки многоугольника, удаление.

3. Сохранение в базу данных и вывод на карту.

Сохранять все параметры и геометрию добавленных объектов в базе данных MySQL, вывод сохраненных данных на карту или в файл формата YMapsML.

И так после определения основных функций редактора Яндекс.Карт начнем его реализацию.

Создадим первую часть – добавление объектов на карту.

 

 

В качестве исходного кода возьмем обычную карту с элементами управления:

тулбар (класс YMaps.ToolBar) – панель инструментов с кнопками, позволяющими перемещать карту, увеличивать ее, а также измерять расстояние на карте с помощью специальной линейки;

элемент масштабирования (класс YMaps.Zoom) – позволяет менять разрешение карты с определенным шагом;

переключатель типа карты (класс YMaps.TypeControl) – кнопки "Карта", "Спутник", "Гибрид";

поиск по карте (класс YMaps.SearchControl) – позволяет искать географические объекты по их названию.

Исходный код: ymap-editor-1.html

В стандартный тулбар, мы добавим кнопки: для создания метки, ломаной линии и многоугольника.

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

Группа стандартных кнопок тулбара имеет ID YMaps.ToolBar.DEFAULT_GROUP.

Для создания переключателя используется стандартный конструктор класса YMaps.ToolBarRadioButton.

В результате мы получаем следующий код: ymap-editor-2.html

После этого мы должны определить обработчики событий для каждой добавленной кнопки, когда она активна или неактивна.

При активации кнопки справа от карты будет появляться форма для ввода необходимых параметров.

Для меток это будут события pointBootion.Events.Select и pointBootion.Events.Deselect.

Код для события pointBootion.Events.Select

 

// При активной кнопке включаем добавление меток
YMaps.Events.observe(pointBootion, pointBootion.Events.Select, function () {
YMaps.Events.observe(map, map.Events.Click, function (map, mEvent) {
var newGeoPoint = mEvent.getGeoPoint(); 
YMaps.jQuery("#image").change(function() {
YMaps.jQuery("#imagePreview").empty();
if ( YMaps.jQuery("#image").val()!="" ){
YMaps.jQuery("#imagePreview").append("<img src=\"" + YMaps.jQuery("#image").val() + "\" />");
}
else{
YMaps.jQuery("#imagePreview").append("displays image here");
}
});
YMaps.jQuery("#formpoint").show();
document.getElementById('point_lat').value = newGeoPoint.getLng();
document.getElementById('point_lng').value = newGeoPoint.getLat(); 
})
})

При клике по кнопке pointBootion происходит событие ointBootion.Events.Select, необходимо щелкнуть левой кнопкой мыши по карте в месте, где будет располагаться метка.

При этом появляется html-форма для ввода параметров метки:

 

<div id="formpoint" style="display: none">
<p><strong>Форма ввода параметров метки</strong></p>
Выбирете значек для метки:<br /> 
 
<div style="width: 250px;">
 
<div id="imagePreview" style="float:left; width:30px;"></div>
 
<div style="margin-left: 40px; width:210px;">
<select name="image" id="image" class="inputbox" size="1">
<option value=""> - Select Image - </option><option value="http://api-maps.yandex.ru/i/0.4/micro/pmwts.png">default#whitePoint</option>
<option value="http://api-maps.yandex.ru/i/0.4/micro/pmgns.png">default#greenPoint</option>
<option value="http://api-maps.yandex.ru/i/0.4/micro/pmrds.png">default#redPoint</option>
<option value="http://api-maps.yandex.ru/i/0.4/micro/pmyws.png">default#yellowPoint</option>
<option value="http://api-maps.yandex.ru/i/0.4/micro/pmdbs.png">default#darkbluePoint</option>
<option value="http://api-maps.yandex.ru/i/0.4/micro/pmnts.png">default#nightPoint</option>
<option value="http://api-maps.yandex.ru/i/0.4/micro/pmgrs.png">default#greyPoint</option>
<option value="http://api-maps.yandex.ru/i/0.4/micro/pmbls.png">default#bluePoint</option>
<option value="http://api-maps.yandex.ru/i/0.4/micro/pmors.png">default#orangePoint</option>
<option value="http://api-maps.yandex.ru/i/0.4/micro/pmdos.png">default#darkorangePoint</option>
<option value="http://api-maps.yandex.ru/i/0.4/micro/pmpns.png">default#pinkPoint</option>
<option value="http://api-maps.yandex.ru/i/0.4/micro/pmvvs.png">default#violetPoint</option>
<option value="http://api-maps.yandex.ru/i/0.4/placemarks/pmwts.png">default#whiteSmallPoint</option>
<option value="http://api-maps.yandex.ru/i/0.4/placemarks/pmgns.png">default#greenSmallPoint</option>
<option value="http://api-maps.yandex.ru/i/0.4/placemarks/pmrds.png">default#redSmallPoint</option>
<option value="http://api-maps.yandex.ru/i/0.4/placemarks/pmyws.png">default#yellowSmallPoint</option>
<option value="http://api-maps.yandex.ru/i/0.4/placemarks/pmdbs.png">default#darkblueSmallPoint</option>
<option value="http://api-maps.yandex.ru/i/0.4/placemarks/pmnts.png">default#nightSmallPoint</option>
<option value="http://api-maps.yandex.ru/i/0.4/placemarks/pmgrs.png">default#greySmallPoint</option>
<option value="http://api-maps.yandex.ru/i/0.4/placemarks/pmbls.png ">default#blueSmallPoint</option>
<option value="http://api-maps.yandex.ru/i/0.4/placemarks/pmors.png ">default#orangeSmallPoint</option>
<option value="http://api-maps.yandex.ru/i/0.4/placemarks/pmdos.png ">default#darkorangeSmallPoint</option>
<option value="http://api-maps.yandex.ru/i/0.4/placemarks/pmpns.png ">default#pinkSmallPoint</option>
<option value="http://api-maps.yandex.ru/i/0.4/placemarks/pmvvs.png ">default#violetSmallPoint</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/airplane.png ">default#airplaneIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/anchor.png ">default#anchorIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/arrowDownLeft.png ">default#arrowDownLeftIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/arrowDownRight.png ">default#arrowDownRightIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/arrowLeft.png ">default#arrowLeftIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/arrowRight.png ">default#arrowRightIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/arrowUp.png ">default#arrowUpIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/attention.png ">default#attentionIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/badminton.png ">default#badmintonIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/bank.png ">default#bankIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/bar.png ">default#barIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/barberShop.png ">default#barberShopIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/bicycle.png ">default#bicycleIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/bowling.png ">default#bowlingIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/buildings.png ">default#buildingsIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/bus.png ">default#busIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/cafe.png ">default#cafeIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/camping.png ">default#campingIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/car.png ">default#carIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/cellular.png ">default#cellularIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/cinema.png ">default#cinemaIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/downhillSkiing.png ">default#downhillSkiingIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/dps.png ">default#dpsIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/dryCleaner.png ">default#dryCleanerIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/electricTrain.png ">default#electricTrainIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/factory.png ">default#factoryIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/fishing.png ">default#fishingIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/gasStation.png ">default#gasStationIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/gym.png ">default#gymIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/hospital.png ">default#hospitalIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/house.png ">default#houseIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/keyMaster.png ">default#keyMasterIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/mailPost.png ">default#mailPostIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/metroKiev.png ">default#metroKievIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/metroMoscow.png ">default#metroMoscowIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/metroStPetersburg.png ">default#metroStPetersburgIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/metroYekaterinburg.png ">default#metroYekaterinburgIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/motobike.png ">default#motobikeIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/mushroom.png ">default#mushroomIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/phone.png ">default#phoneIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/photographer.png ">default#photographerIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/pingPong.png ">default#pingPongIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/restauraunt.png ">default#restaurauntIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/ship.png ">default#shipIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/shop.png ">default#shopIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/skating.png ">default#skatingIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/skiing.png ">default#skiingIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/smartphone.png ">default#smartphoneIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/stadium.png ">default#stadiumIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/storehouse.png ">default#storehouseIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/swimming.png ">default#swimmingIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/tailorShop.png ">default#tailorShopIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/teather.png ">default#teatherIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/tennis.png ">default#tennisIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/tire.png ">default#tireIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/train.png ">default#trainIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/tramway.png ">default#tramwayIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/trolleybus.png ">default#trolleybusIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/truck.png ">default#truckIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/turnLeft.png ">default#turnLeftIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/turnRight.png ">default#turnRightIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/wifi.png ">default#wifiIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/wifiLogo.png ">default#wifiLogoIcon</option>
<option value="http://api-maps.yandex.ru/i/0.4/icons/workshop.png">default#workshopIcon</option>
</select>
</div>
</div>
<br />
Название: <input type="text" name="overlayName" id="overlayName" size="30" /><br />
Описание: <textarea name="overlayDescription" id="overlayDescription" rows="2" cols="30"></textarea><br />
Широта: <input id = "point_lat" type="text" size="25"/><br />
Долгота: <input id = "point_lng" type="text" size="25"/>'
<p><input name="addMarker" type="button" onClick="addMarker()" value="Добавить" /></p>
</div>

В ней с помощью оператора select мы выбираем нужный значок для метки, вводим название и описание, нажимаем кнопку Добавить и метка появляется на карте.

При щелчке на любой другой кнопки тулбара происходит событие pointBootion.Events.Deselect, мы убираем курсор с карты и скрываем форму.

Код события pointBootion.Events.Deselect:

 

// При неактивной - выключаем
YMaps.Events.observe(pointBootion, pointBootion.Events.Deselect, function () {
map.removeCursor(YMaps.Cursor.POINTER);
YMaps.jQuery("#formpoint").hide();
})

При нажатии кнопки Добавить данные из формы передаются в функцию addMarker для добавления метки на карту.

 

function addMarker() {
 
var overlayName = YMaps.jQuery('#overlayName').attr('value');
var overlayDescription = YMaps.jQuery('#overlayDescription').attr('value');
var ZnMetki = YMaps.jQuery('select[@name=image] option:selected').text();
var LatMetki = YMaps.jQuery('#point_lat').attr('value');
var LngMetki = YMaps.jQuery('#point_lng').attr('value'); 
 
var placemark = new YMaps.Placemark(new YMaps.GeoPoint(LatMetki, LngMetki), {hasHint: true, style: ZnMetki});
 
// Устанавливает содержимое балуна
placemark.name = overlayName;
placemark.description = overlayDescription;
 
// Добавляет метку на карту 
map.addOverlay(placemark); 
}

Полный код, который у нас получился на данном этапе: ymap-editor-3.html

Аналогичным образом действуем для полилиний и многоугольников, но есть небольшие отличия – при активации кнопки появляется нужная форма, в обеих формах используется поле для выбора цвета линии и заливки многоугольника.

Для реализации выбора цвета используется JavaScript-библиотеку работы с цветами – jscolor (http://jscolor.com/).

Использовать данную библиотеку очень просто, с начала подключить ее с помощью строки

<script type="text/javascript" src="/jscolor/jscolor.js"></script>

А в форме прописать ячейку со следующим кодом:

<input class="color" value="66ff00">

Для ломаной линии используются события plineBootion.Events.Select и plineBootion.Events.Deselect.

Код формы:

 

<div id="formpline" style="display: none">
<strong>Форма ввода параметров ломаной</strong><br />
<br />Толщина линии: <input type="text" name="hline" id="hline" size="2" /><br />
<br />Цвет линии: <input id="colorpline" class="color" value="66ff00">
<p><input name="addLine" type="button" onClick="addLine()" value="Добавить" /></p>
</div>}

Функция обработки значений формы addLine:

 

function addLine() {
var hline = YMaps.jQuery('#hline').attr('value');
var pcolor = YMaps.jQuery('#colorpline').attr('value');
 
var sl = new YMaps.Style();
sl.lineStyle = new YMaps.LineStyle();
sl.lineStyle.strokeColor = pcolor;
sl.lineStyle.strokeWidth = hline;
YMaps.Styles.add("example#CustomLine", sl);
 
 
// Создание ломанной 
var polyline = new YMaps.Polyline();
 
polyline.setStyle("example#CustomLine");
 
// Установка параметров режима редактирования
polyline.setEditingOptions({
drawing: true,
menuManager: function (index, menuItems) {
menuItems.push({
id: "StopEditing",
title: '<span style="white-space:nowrap;">Завершить редактирование<span>',
onClick: function (polyline, pointIndex) {
polyline.stopEditing(); 
YMaps.jQuery("#coords").attr("value", polyline.getPoints().join('\n')); 
}
});
return menuItems;
}
}); 
 
// Добавление ломаной на карту 
map.addOverlay(polyline); 
 
// Включение режима редактирования
polyline.startEditing(); 
}

Для добавления многоугольника события polygonBootion.Events.Select и polygonBootion.Events.Deselect.

Код формы:

 

<div id="formpolygon" style="display: none">
<strong>Форма ввода параметров многоугольника</strong><br />
<br />Толщина линии обводки: <input type="text" name="hpolyobv" id="polyobv" size="2" /><br />
<br />Цвет линии обводки: <input id="pcolorline" class="color" value="66ff00">
<br />Цвет заливки: <input id="colorzalivki" class="color" value="66ff00">
<p><input name="addLine" type="button" onClick="addPolygon()" value="Добавить" /></p>
</div>

Функция обработки добавленных в форму значений addPolygon:

 

function addPolygon(){
var hpolyobv = YMaps.jQuery('#polyobv').attr('value');
var pcolorline = YMaps.jQuery('#pcolorline').attr('value');
var colorzalivki = YMaps.jQuery('#colorzalivki').attr('value'); 
 
var pstyle = new YMaps.Style();
pstyle.polygonStyle = new YMaps.PolygonStyle();
pstyle.polygonStyle.fill = true;
pstyle.polygonStyle.outline = true;
pstyle.polygonStyle.strokeWidth = hpolyobv;
pstyle.polygonStyle.strokeColor = pcolorline;
pstyle.polygonStyle.fillColor = colorzalivki;
 
 
var polygon = new YMaps.Polygon();
 
polygon.setStyle(pstyle);
 
polygon.setEditingOptions({
drawing: true,
menuManager: function (index, menuItems) {
menuItems.push({
id: "StopEditing",
title: '<span style="white-space:nowrap;">Завершить редактирование<span>',
onClick: function (polygon, pointIndex) {
polygon.stopEditing(); 
YMaps.jQuery("#coords").attr("value", polygon.getPoints().join('\n')); 
}
});
return menuItems;
}
}); 
 
map.addOverlay(polygon);
 
polygon.startEditing();
 
}

В результате у нас получается следующий код: ymap-editor-4.html



Создаем редактор Яндекс.Карт Часть-1 - Генератор расширений Joomla и многое другое на нашем сайте посвященном работе расширений, компонентов, модулей, плагинов для линейки Joomla. Отправляйте ссылку на страницу своим друзьям и в социальные сети воспользовавшись графическими иконками выше.

Блог

Календарь приёма объявлений

Небольшой пример из повседневной практики. Организация меняет реквизиты, и они вступят в силу через  пару недель. На сайте идет приём объявлений и объявления принимаются на несколько месяцев в...

Дырка в com_content

Сегодня у товарища, сайт которого находится на старой  Joomla 1.0.3, была сильная нагрузка на сервере, просматривая логи обнаружил не вежливый запрос такого порядка: http://сайт/index2...

Лечим вирус на сайте

  Первоначальный осмотр сайта обнаружил, что у клиента закрыт доступ по фтп, что сузило круг подозреваемых уязвимостей, стало быть отверстие в какомто скрипте движка joomla. Касперский яро...

Troj/JSRedir-MH

Снова грянул гром зарежения сайтов новым вирусом  Troj/JSRedir-MH.  И так в коротко по вирусу Troj/JSRedir-MH. Вирус или троян куда интереснее чем свои предшествиники, тепер...

Доработка расширения для рассылки Send Email JK

Сегодня поделюсь немного интересной информацией для владельцев сайтов собранных ан joomla.  Рано и поздно возникает задача подписки и рассылки информации с сайта, это может быть разная постановка зада...

Привет Ie 10 регулярка

И вот и мне пришлось столкнулся с проблемами перехода на win 8 в придачу с ie 10, некоторых постоянных пользователей моих сайтов. На многих сайтах  имеющих раздел по приёму объявлений, использ...

Kunena заменяем ссылку на профиль пользователя

Всем привет, снова снова кунена, получил задание на допиливание популярного форума Kunena, сегодня потребовалось поменять ссылку на профиль пользователя. Это связано с тем, что на сайте стоит социа...

Работает на Kunena - зачем на каждой странице?

  Все у кого стоит форум kunena мешает надпись с двумя ссылкам внизу форума "Работает на Kunena". Сея надпись висит на каждой странице форма, а также страница разработчиков содержит множество вн...

Kunena избавимся от лишних quote

Для тех кто действительно делает сайт для людей, моя следующая заметка. Расскажу вам, как избавиться от лишних quote в постах на форуме kunena. У меня несколько тематических сайтов с нормальной посеща...

Kunena решаем проблему с пропажей аватаров

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

Джомлавикам

Обработка параметров расширений joomla

При разработке расширений для CMS Joomla, таких как плагины, модули, компоненты или шаблоны, часто возникает необходимость получить параметры разрабатываемого или любого другого расширения. В этой ...

Кunena крамсаем шаблон

1. В папке \components\com_kunena\template\ваш_шаблон\ находим файл template.xml и вставляем в него такой кусок (чтобы была возможность выбора показывать это поле или нет): <param name="l...

Подключить свои классы и методы в Joomla?

Иногда случается, что набор собственных функций или библиотек нужно подключить в Joomla. Но иногда подключить их нужно так, чтобы они присутсвовали во всей системе, вне зависимо...

3 новых полезных класса в Joomla 2.5

В платформе Joomla 11.3 разработчики добавлил несколько полезных новых классов для разработчиков. Рассмотрю некоторый из них - JGrid (для построения HTML таблиц), JWebClient (для получения информац...

Репозиторий файлов на Joomla средствами Apache

Создадим две вложенные директории /files/files в корне сайта. Если вы пожелаете использовать другие имена директорий, то вам необходимо будет внести соответствующие правки в дальнейшем. ...