«
»

Создание меню для отображения коллекций объектов из YMapsML файла

В прошлой заметке, я рассказал о том, как можно автоматически генерировать файл в формате YMapsML.

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

Сделать это можно двумя способами.

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

Подгружать для каждой группы свой YMapsML файл.

Пример реализации первого способа показан в документации, пример используемого YmapsML файла.

Для примера рассматриваемого в заметке «Генерируем файл в формате YmapsML с данными автоматически» код карты будет иметь вид:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Вывод файла YMapsML на карту по категориям</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://api-maps.yandex.ru/1.1/index.xml?key=ACuF2EkBAAAAzahYCgIASLsFm9n8EPvNjaTc8nAWiETKgYcAAAAAAAAAAAC-q61vWtIK3Kzt2yQ9qFaGJGKzXw==" type="text/javascript"></script>
 
    <script type="text/javascript">
 
        // Создание обработчика для события window.onLoad
        YMaps.jQuery(function () {
            // Создание экземпляра карты и его привязка к созданному контейнеру
            var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
 
            // Установка для карты ее центра и масштаба
            map.setCenter(new YMaps.GeoPoint(44.0075,56.326944), 14);
 
            // Добавление элементов управления
            map.enableScrollZoom();
            map.addControl(new YMaps.ToolBar());
            map.addControl(new YMaps.TypeControl());
            map.addControl(new YMaps.Zoom());            
 
            // Загрузка YMapsML
            var ml = new YMaps.YMapsML("http://webmap-blog.ru/examples/ymap-ymapsml/create_ymapsml-3.php");
 
            // Обработчик успешной загрузки
            YMaps.Events.observe(ml, ml.Events.Load, function (ml) {
 
                // Создание списка групп
                ml.get(0).forEach(function (item) {
                    addMenuItem(item, map, YMaps.jQuery("#menu"));
                });
            });
 
 
 
            // Обработчик неудачной загрузки
            YMaps.Events.observe(ml, ml.Events.Fault, function (ml, error) {
                alert("При загрузке данных произошла ошибка: " + error);
            });
        })
 
        // Добавление одного пункта в список
        function addMenuItem (group, map, menuContainer) {
 
            // Показать/скрыть группу на карте
            YMaps.jQuery("<a class=\"title\" href=\"#\">" + group.name + "</a>")
 
                .bind("click", function () {
                    var link = YMaps.jQuery(this);
 
                    // Если пункт меню "неактивный", то добавляем группу на карту,
                    // иначе - удаляем с карты
                    if (link.hasClass("active")) {
                        map.removeOverlay(group);
                    } else {
                        map.addOverlay(group);
                    }
 
                    // Меняем "активность" пункта меню
                    link.toggleClass("active");
                    return false;
                })
 
                // Добавление нового пункта меню в список
                .appendTo(
                    YMaps.jQuery("<li></li>").appendTo(menuContainer)
                )
        };
 
    </script>
 
    <style type="text/css">
        /* Оформление меню (начало)*/
            #menu {
                list-style: none;
                margin: 0;
                padding: 0;
            }
 
 
 
            #menu a {
                text-decoration: none;
                border-bottom: dashed 1px;
            }           
 
            a.active {
                color: #000;
            }
 
        /* Оформление меню (конец)*/
    </style>
 
 
</head>
 
<body>
    <table>
    <tr>
        <td><div id="YMapsID" style="width:800px;height:700px"></div></td>
        <td valign="top"><ul id="menu"></ul></td>
    </tr>
    <table>
 
</body>
</html>

Нам также надо немного изменить код файла create_ymapsml-2.php

Он будет иметь следующий код:

<?php
 
header("Content-type: text/xml");
 
include("bd.php");
 
$styleorg = array("#styleHotels", "#styleTrain", "#styleInternetcafe", "#styleCafe", "#styleCinema", "#styleMuseum", "#styleParks", "#styleShips", "#styleTheater", "#styleTurism", "#styleFitness");
 
echo '<ymaps xmlns="http://maps.yandex.ru/ymaps/1.x" xmlns:gml="http://www.opengis.net/gml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maps.yandex.ru/schemas/ymaps/1.x/ymaps.xsd"> 
    <Representation xmlns="http://maps.yandex.ru/representation/1.x">		
		<Style gml:id="commonStyle">
			<iconStyle>
				<size x="32" y="37"/>
				<offset x="-16" y="-18"/>
			</iconStyle>
 
			<balloonContentStyle> 
				<template>#balloonTemplate</template> 
			</balloonContentStyle> 
 
		</Style>
 
<Style gml:id="styleHotels">
<parentStyle>#commonStyle</parentStyle>
<iconStyle>
<href>
http://webmap-blog.ru/examples/ymap-ymapsml/images/hotel.png
</href>
</iconStyle>
</Style>
 
<Style gml:id="styleTrain">
<parentStyle>#commonStyle</parentStyle>
<iconStyle>
<href>
http://webmap-blog.ru/examples/ymap-ymapsml/images/train.png
</href>
</iconStyle>
</Style>
 
<Style gml:id="styleInternetcafe">
<parentStyle>#commonStyle</parentStyle>
<iconStyle>
<href>
http://webmap-blog.ru/examples/ymap-ymapsml/images/internet.png
</href>
</iconStyle>
</Style>
 
<Style gml:id="styleCafe">
<parentStyle>#commonStyle</parentStyle>
<iconStyle>
<href>
http://webmap-blog.ru/examples/ymap-ymapsml/images/coffee.png
</href>
</iconStyle>
</Style>
 
<Style gml:id="styleCinema">
<parentStyle>#commonStyle</parentStyle>
<iconStyle>
<href>
http://webmap-blog.ru/examples/ymap-ymapsml/images/cinema.png
</href>
</iconStyle>
</Style>
 
<Style gml:id="styleMuseum">
<parentStyle>#commonStyle</parentStyle>
<iconStyle>
<href>
http://webmap-blog.ru/examples/ymap-ymapsml/images/museum.png
</href>
</iconStyle>
</Style>
 
<Style gml:id="styleParks">
<parentStyle>#commonStyle</parentStyle>
<iconStyle>
<href>
http://webmap-blog.ru/examples/ymap-ymapsml/images/parks.png
</href>
</iconStyle>
</Style>
 
<Style gml:id="styleShips">
<parentStyle>#commonStyle</parentStyle>
<iconStyle>
<href>
http://webmap-blog.ru/examples/ymap-ymapsml/images/ships.png
</href>
</iconStyle>
</Style>
 
<Style gml:id="styleTheater">
<parentStyle>#commonStyle</parentStyle>
<iconStyle>
<href>
http://webmap-blog.ru/examples/ymap-ymapsml/images/theater.png
</href>
</iconStyle>
</Style>
 
<Style gml:id="styleTurism">
<parentStyle>#commonStyle</parentStyle>
<iconStyle>
<href>
http://webmap-blog.ru/examples/ymap-ymapsml/images/turism.png
</href>
</iconStyle>
</Style>
 
<Style gml:id="styleFitness">
<parentStyle>#commonStyle</parentStyle>
<iconStyle>
<href>
http://webmap-blog.ru/examples/ymap-ymapsml/images/fitness.png
</href>
</iconStyle>
</Style>		
 
        <Template gml:id="balloonTemplate"> 
            <text><![CDATA[
			<div style="font-size:12px;"> 
                        <div style="color:#ff0303;font-weight:bold">$[name]</div>                        
                        <div>Адрес: $[metaDataProperty.AnyMetaData.adres|не задан]</div>
                        <div>Телефон: $[metaDataProperty.AnyMetaData.telefon|не задан]</div>  
						<div>Тип: $[metaDataProperty.AnyMetaData.type|не задан]</div> 	
                    </div>]]></text> 
        </Template> 
    </Representation> 
 
    <GeoObjectCollection> 
        <gml:name>Объекты карте</gml:name> 
        <gml:featureMembers>';
 
for($i=1; $i<12; $i++)	
{
$query1= "SELECT * FROM org_yandexmapnn WHERE CAT_ID = '$i'";
$result1 = mysql_query($query1);
 
echo '<GeoObjectCollection>
<gml:name>', mysql_result($result1,0,'TYPE'), '</gml:name>
<gml:featureMembers>';
 
if(mysql_numrows($result1)>1)
{
while ($par1 = mysql_fetch_array($result1))
{
echo '<GeoObject gml:id="', $par1['ID'], '">';
echo '<gml:name>', htmlspecialchars($par1['NAME']), '</gml:name>';
echo '<gml:metaDataProperty>';
echo '<AnyMetaData>';
echo '<adres>', $par1['ADRES'], '</adres>';
echo '<telefon>', $par1['TELEPHON'], '</telefon>';
echo '<type>', $par1['TYPE'], '</type>';
echo '</AnyMetaData>';
echo '</gml:metaDataProperty>';
echo '<gml:Point>';
echo '<gml:pos>', $par1['XX'], ' ', $par1['YY'], '</gml:pos>';
echo '</gml:Point>';
echo '</GeoObject>';
 
echo "\n";
}
}
else
{
echo '<GeoObject gml:id="', mysql_result($result1,0,'ID'), '">';
echo '<gml:name>', mysql_result($result1,0,'NAME'), '</gml:name>';
echo '<gml:metaDataProperty>';
echo '<AnyMetaData>';
echo '<adres>', mysql_result($result1,0,'ADRES'), '</adres>';
echo '<telefon>', mysql_result($result1,0,'TELEPHON'), '</telefon>';
echo '<type>', mysql_result($result1,0,'TYPE'), '</type>';
echo '</AnyMetaData>';
echo '</gml:metaDataProperty>';
echo '<gml:Point>';
echo '<gml:pos>', mysql_result($result1,0,'XX'), ' ', mysql_result($result1,0,'YY'), '</gml:pos>';
echo '</gml:Point>';
echo '</GeoObject>';
}
echo '</gml:featureMembers>
<style>', $styleorg[$i-1],'</style>
</GeoObjectCollection>';
 
echo "\n";
 
}
echo '</gml:featureMembers>
    </GeoObjectCollection>
</ymaps>';
 
 
?>

Посмотреть работу примера в действии

Теперь рассмотрим реализацию второго варианта.

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

Вот код меню:

<div style="margin-left: 60%; width: 40%">
<img src="http://webmap-blog.ru/examples/ymap-ymapsml/images/hotel.png" alt="Гостиница" width="32" height="37" align="middle" /><span id="show_hotels" class="link">Гостиница</span><br />
<img src="http://webmap-blog.ru/examples/ymap-ymapsml/images/train.png" width="32" height="37" align="middle" alt="Железнодорожный вокзал" /><span id="show_vokzal" class="link">Железнодорожный вокзал</span><br />
<img src="http://webmap-blog.ru/examples/ymap-ymapsml/images/internet.png" width="32" height="37" align="middle" alt="интернет-кафе" /><span id="show_internetcafe" class="link">интернет-кафе</span><br />
<img src="http://webmap-blog.ru/examples/ymap-ymapsml/images/coffee.png" width="32" height="37" align="middle" alt="Кафе и рестораны" /><span id="show_cafe" class="link">Кафе и рестораны</span><br />
<img src="http://webmap-blog.ru/examples/ymap-ymapsml/images/cinema.png" width="32" height="37" align="middle" alt="Кинотеатр" /><span id="show_cinema" class="link">Кинотеатр</span><br />
<img src="http://webmap-blog.ru/examples/ymap-ymapsml/images/museum.png" width="32" height="37" align="middle" alt="Музеи" /><span id="show_museum" class="link">Музеи</span><br />
<img src="http://webmap-blog.ru/examples/ymap-ymapsml/images/parks.png" width="32" height="37" align="middle" alt="Парки" /><span id="show_parks" class="link">Парки</span><br />
<img src="http://webmap-blog.ru/examples/ymap-ymapsml/images/ships.png" width="32" height="37" align="middle" alt="Речной вокзал" /><span id="show_ships" class="link">Речной вокзал</span><br />
<img src="http://webmap-blog.ru/examples/ymap-ymapsml/images/theater.png" width="32" height="37" align="middle" alt="Театры" /><span id="show_theater" class="link">Театры</span><br />
<img src="http://webmap-blog.ru/examples/ymap-ymapsml/images/turism.png" width="32" height="37" align="middle" alt="Туристическое агентство" /><span id="show_turism" class="link">Туристическое агентство</span><br />
<img src="http://webmap-blog.ru/examples/ymap-ymapsml/images/fitness.png" width="32" height="37" align="middle" alt="Фитнес центы, спортивные клубы" /><span id="show_fitness" class="link">Фитнес центы, спортивные клубы</span>
</div>

Для скрытия и отображения групп маркеров на карте мы используем возможности javascrip-библиотеки jQuery.

Полный код файла viv-grups-menu-2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Вывод файла YMapsML на карту по категориям - вариант 2</title>
 
<script src="http://api-maps.yandex.ru/1.1/index.xml?key=ACuF2EkBAAAAzahYCgIASLsFm9n8EPvNjaTc8nAWiETKgYcAAAAAAAAAAAC-q61vWtIK3Kzt2yQ9qFaGJGKzXw==" type="text/javascript"></script>
<style> 
 
.link:hover
{
text-decoration: none;
}
.link
{
cursor: pointer;
text-decoration: underline;
}
 
</style>
 
 
	<script type="text/javascript">
 
	 var map;
 
        // Создание обработчика для события window.onLoad
        YMaps.jQuery(function () {
            // Создание экземпляра карты и его привязка к созданному контейнеру
            map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
 
            // Установка для карты ее центра и масштаба
            map.setCenter(new YMaps.GeoPoint(44.0075,56.326944), 14);
 
			 //Добавляем элементы управления.
			map.addControl(new YMaps.TypeControl());//Тип карты, кнопочки Схема, Гибрид, Спутник
			map.addControl(new YMaps.ToolBar());//Тулбар, кнопки Рука, Лупа, Линейка
			map.addControl(new YMaps.Zoom());//Увеличение
 
// Гостиницы
var hotels = new YMaps.YMapsML('http://webmap-blog.ru/examples/ymap-ymapsml/create_ymapsml-4.php?id=1');
YMaps.Events.observe(hotels, hotels.Events.Fault, function (error) {
alert('Ошибка: ' + error);
});
 
 
YMaps.jQuery("#show_hotels").toggle(function(){
map.addOverlay(hotels);
YMaps.jQuery(this).css("font-weight","bold");
}, function(){
map.removeOverlay(hotels);
YMaps.jQuery(this).css("font-weight","normal");
});	
 
// Железнодорожный вокзал
var vokzal = new YMaps.YMapsML('http://webmap-blog.ru/examples/ymap-ymapsml/create_ymapsml-4.php?id=2');
YMaps.Events.observe(vokzal, vokzal.Events.Fault, function (error) {
alert('Ошибка: ' + error);
}); 
 
YMaps.jQuery("#show_vokzal").toggle(function(){
map.addOverlay(vokzal);
YMaps.jQuery(this).css("font-weight","bold");
}, function(){
map.removeOverlay(vokzal);
YMaps.jQuery(this).css("font-weight","normal");
});
 
// интернет-кафе
var internetcafe = new YMaps.YMapsML('http://webmap-blog.ru/examples/ymap-ymapsml/create_ymapsml-4.php?id=3');
YMaps.Events.observe(internetcafe, internetcafe.Events.Fault, function (error) {
alert('Ошибка: ' + error);
});
 
 
YMaps.jQuery("#show_internetcafe").toggle(function(){
map.addOverlay(internetcafe);
YMaps.jQuery(this).css("font-weight","bold");
}, function(){
map.removeOverlay(internetcafe);
YMaps.jQuery(this).css("font-weight","normal");
});
 
// Кафе и рестораны
var cafe = new YMaps.YMapsML('http://webmap-blog.ru/examples/ymap-ymapsml/create_ymapsml-4.php?id=4');
YMaps.Events.observe(cafe, cafe.Events.Fault, function (error) {
alert('Ошибка: ' + error);
}); 
 
YMaps.jQuery("#show_cafe").toggle(function(){
map.addOverlay(cafe);
YMaps.jQuery(this).css("font-weight","bold");
}, function(){
map.removeOverlay(cafe);
YMaps.jQuery(this).css("font-weight","normal");
});
 
// Кинотеатр
var cinema = new YMaps.YMapsML('http://webmap-blog.ru/examples/ymap-ymapsml/create_ymapsml-4.php?id=5');
YMaps.Events.observe(cinema, cinema.Events.Fault, function (error) {
alert('Ошибка: ' + error);
}); 
 
YMaps.jQuery("#show_cinema").toggle(function(){
map.addOverlay(cinema);
YMaps.jQuery(this).css("font-weight","bold");
}, function(){
map.removeOverlay(cinema);
YMaps.jQuery(this).css("font-weight","normal");
});
 
//Музеи
var museum = new YMaps.YMapsML('http://webmap-blog.ru/examples/ymap-ymapsml/create_ymapsml-4.php?id=6');
YMaps.Events.observe(museum, museum.Events.Fault, function (error) {
alert('Ошибка: ' + error);
}); 
 
YMaps.jQuery("#show_museum").toggle(function(){
map.addOverlay(museum);
YMaps.jQuery(this).css("font-weight","bold");
}, function(){
map.removeOverlay(museum);
YMaps.jQuery(this).css("font-weight","normal");
});
 
// Парки
var parks = new YMaps.YMapsML('http://webmap-blog.ru/examples/ymap-ymapsml/create_ymapsml-4.php?id=7');
YMaps.Events.observe(parks, parks.Events.Fault, function (error) {
alert('Ошибка: ' + error);
});
 
 
YMaps.jQuery("#show_parks").toggle(function(){
map.addOverlay(parks);
YMaps.jQuery(this).css("font-weight","bold");
}, function(){
map.removeOverlay(parks);
YMaps.jQuery(this).css("font-weight","normal");
});
 
// Речной вокзал
var ships = new YMaps.YMapsML('http://webmap-blog.ru/examples/ymap-ymapsml/create_ymapsml-4.php?id=8');
YMaps.Events.observe(ships, ships.Events.Fault, function (error) {
alert('Ошибка: ' + error);
});
 
 
YMaps.jQuery("#show_ships").toggle(function(){
map.addOverlay(ships);
YMaps.jQuery(this).css("font-weight","bold");
}, function(){
map.removeOverlay(ships);
YMaps.jQuery(this).css("font-weight","normal");
});
 
// Театры
var theater = new YMaps.YMapsML('http://webmap-blog.ru/examples/ymap-ymapsml/create_ymapsml-4.php?id=9');
YMaps.Events.observe(theater, theater.Events.Fault, function (error) {
alert('Ошибка: ' + error);
});
 
 
YMaps.jQuery("#show_theater").toggle(function(){
map.addOverlay(theater);
YMaps.jQuery(this).css("font-weight","bold");
}, function(){
map.removeOverlay(theater);
YMaps.jQuery(this).css("font-weight","normal");
});
 
// Туристическое агентство
var turism = new YMaps.YMapsML('http://webmap-blog.ru/examples/ymap-ymapsml/create_ymapsml-4.php?id=10');
YMaps.Events.observe(turism, turism.Events.Fault, function (error) {
alert('Ошибка: ' + error);
});
 
 
YMaps.jQuery("#show_turism").toggle(function(){
map.addOverlay(turism);
YMaps.jQuery(this).css("font-weight","bold");
}, function(){
map.removeOverlay(turism);
YMaps.jQuery(this).css("font-weight","normal");
});
 
// Фитнес центы, спортивные клубы
var fitness = new YMaps.YMapsML('http://webmap-blog.ru/examples/ymap-ymapsml/create_ymapsml-4.php?id=11');
YMaps.Events.observe(fitness, fitness.Events.Fault, function (error) {
alert('Ошибка: ' + error);
});
 
 
YMaps.jQuery("#show_fitness").toggle(function(){
map.addOverlay(fitness);
YMaps.jQuery(this).css("font-weight","bold");
}, function(){
map.removeOverlay(fitness);
YMaps.jQuery(this).css("font-weight","normal");
});
 
 
});
 
 
 
 
</script>
 
 
</head>
 
<body>
 
<div style="width: 100%">
<div id="YMapsID" style="width: 60%;height:600px; float:left;"></div>
<div style="margin-left: 60%; width: 40%">
<img src="http://webmap-blog.ru/examples/ymap-ymapsml/images/hotel.png" alt="Гостиница" width="32" height="37" align="middle" /><span id="show_hotels" class="link">Гостиница</span><br />
<img src="http://webmap-blog.ru/examples/ymap-ymapsml/images/train.png" width="32" height="37" align="middle" alt="Железнодорожный вокзал" /><span id="show_vokzal" class="link">Железнодорожный вокзал</span><br />
<img src="http://webmap-blog.ru/examples/ymap-ymapsml/images/internet.png" width="32" height="37" align="middle" alt="интернет-кафе" /><span id="show_internetcafe" class="link">интернет-кафе</span><br />
<img src="http://webmap-blog.ru/examples/ymap-ymapsml/images/coffee.png" width="32" height="37" align="middle" alt="Кафе и рестораны" /><span id="show_cafe" class="link">Кафе и рестораны</span><br />
<img src="http://webmap-blog.ru/examples/ymap-ymapsml/images/cinema.png" width="32" height="37" align="middle" alt="Кинотеатр" /><span id="show_cinema" class="link">Кинотеатр</span><br />
<img src="http://webmap-blog.ru/examples/ymap-ymapsml/images/museum.png" width="32" height="37" align="middle" alt="Музеи" /><span id="show_museum" class="link">Музеи</span><br />
<img src="http://webmap-blog.ru/examples/ymap-ymapsml/images/parks.png" width="32" height="37" align="middle" alt="Парки" /><span id="show_parks" class="link">Парки</span><br />
<img src="http://webmap-blog.ru/examples/ymap-ymapsml/images/ships.png" width="32" height="37" align="middle" alt="Речной вокзал" /><span id="show_ships" class="link">Речной вокзал</span><br />
<img src="http://webmap-blog.ru/examples/ymap-ymapsml/images/theater.png" width="32" height="37" align="middle" alt="Театры" /><span id="show_theater" class="link">Театры</span><br />
<img src="http://webmap-blog.ru/examples/ymap-ymapsml/images/turism.png" width="32" height="37" align="middle" alt="Туристическое агентство" /><span id="show_turism" class="link">Туристическое агентство</span><br />
<img src="http://webmap-blog.ru/examples/ymap-ymapsml/images/fitness.png" width="32" height="37" align="middle" alt="Фитнес центы, спортивные клубы" /><span id="show_fitness" class="link">Фитнес центы, спортивные клубы</span>
</div>
</div>
 
</body>
</html>

Код файла для создания YmapsML будет следующий

<?php
 
header("Content-type: text/xml");
 
include("bd.php");
 
$ID = $_GET['id']-1;
 
$styleorg = array("styleHotels", "styleTrain", "styleInternetcafe", "styleCafe", "styleCinema", "styleMuseum", "styleParks", "styleShips", "styleTheater", "styleTurism", "styleFitness");
 
$image_address = array("http://webmap-blog.ru/examples/ymap-ymapsml/images/hotel.png", 
"http://webmap-blog.ru/examples/ymap-ymapsml/images/train.png", 
"http://webmap-blog.ru/examples/ymap-ymapsml/images/internet.png", 
"http://webmap-blog.ru/examples/ymap-ymapsml/images/coffee.png", 
"http://webmap-blog.ru/examples/ymap-ymapsml/images/cinema.png", 
"http://webmap-blog.ru/examples/ymap-ymapsml/images/museum.png", 
"http://webmap-blog.ru/examples/ymap-ymapsml/images/parks.png", 
"http://webmap-blog.ru/examples/ymap-ymapsml/images/ships.png", 
"http://webmap-blog.ru/examples/ymap-ymapsml/images/theater.png", 
"http://webmap-blog.ru/examples/ymap-ymapsml/images/turism.png", 
"http://webmap-blog.ru/examples/ymap-ymapsml/images/fitness.png");
 
echo '<ymaps xmlns="http://maps.yandex.ru/ymaps/1.x" xmlns:gml="http://www.opengis.net/gml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maps.yandex.ru/schemas/ymaps/1.x/ymaps.xsd"> 
    <Representation xmlns="http://maps.yandex.ru/representation/1.x">';		
echo '<Style gml:id="', $styleorg[$ID], '">';
echo '<iconStyle><href>', $image_address[$ID],
				'</href><size x="32" y="37"/>
				<offset x="-16" y="-18"/>
			</iconStyle>
 
			<balloonContentStyle> 
				<template>#balloonTemplate</template> 
			</balloonContentStyle> 
 
		</Style>		
 
        <Template gml:id="balloonTemplate"> 
            <text><![CDATA[
			<div style="font-size:12px;"> 
                        <div style="color:#ff0303;font-weight:bold">$[name]</div>                        
                        <div>Адрес: $[metaDataProperty.AnyMetaData.adres|не задан]</div>
                        <div>Телефон: $[metaDataProperty.AnyMetaData.telefon|не задан]</div>  
						<div>Тип: $[metaDataProperty.AnyMetaData.type|не задан]</div> 	
                    </div>]]></text> 
        </Template> 
    </Representation> 
 
<GeoObjectCollection> 
<gml:name>Объекты карте</gml:name> 
<style>#', $styleorg[$ID],'</style> 
<gml:featureMembers>';
$idzap = $ID+1;		
$query1= "SELECT * FROM org_yandexmapnn WHERE CAT_ID = '$idzap'";
$result1 = mysql_query($query1);
 
while ($par1 = mysql_fetch_array($result1))
{
echo '<GeoObject gml:id="', $par1['ID'], '">';
echo '<gml:name>', htmlspecialchars($par1['NAME']), '</gml:name>';
echo '<gml:metaDataProperty>';
echo '<AnyMetaData>';
echo '<adres>', $par1['ADRES'], '</adres>';
echo '<telefon>', $par1['TELEPHON'], '</telefon>';
echo '<type>', $par1['TYPE'], '</type>';
echo '</AnyMetaData>';
echo '</gml:metaDataProperty>';
echo '<gml:Point>';
echo '<gml:pos>', $par1['XX'], ' ', $par1['YY'], '</gml:pos>';
echo '</gml:Point>';
echo '</GeoObject>';
 
echo "\n";
}
echo '</gml:featureMembers>
    </GeoObjectCollection>
</ymaps>';
 
?>

Посмотреть пример в действии

Похожие статьи:

Запись опубликована 23 января 2012 в 10:00 Категория: Яндекс Карты. Вы можете следить за комментариями с помощью RSS 2.0-ленты. Вы можете оставить комментарий или трекбэк с вашего сайта.

Комментарии (4) to “Создание меню для отображения коллекций объектов из YMapsML файла”

  1. ustus
    26 января 2012 в 0:13

    Статья супер, спасибо!
    И главное доходчиво и все понятно для непрограммистов в отличие от мануалов яндекса – че там к чему не понять простому смертному…

  2. ILYA
    14 февраля 2012 в 14:54

    А нигде такого нету, чтобы тоже скрывать и отображать рубрики иконок, но для Гугл Мапс?

  3. Татьяна
    21 февраля 2012 в 2:50

    Подскажите пожалуйста, как сделать, чтобы при клике по ссылке на странице сайта выводилась определенная метка, а не все метки из БД и также не группа меток, а именно одна. Уже прочла все, что можно было прочесть, но нигде нет ответа…

  4. admin
    21 февраля 2012 в 8:40

    Вот здесь, есть обсуждение примера решения.
    Пример

Оставить комментарий