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

Автор: ugol1972 | 23.01.2012

В прошлой заметке, я рассказал о том, как можно автоматически генерировать файл в формате 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>

<!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>';
 
 
?>

<?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>

<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>

<!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>';
 
?>

<?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>'; ?>

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

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

ustus 26.01.2012

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

Ответить ↓
ILYA 14.02.2012

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

Ответить ↓
Татьяна 21.02.2012

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

Ответить ↓
1. admin Автор записи21.02.2012
  
  Вот здесь, есть обсуждение примера решения.
  Пример
  
  Ответить ↓
Олег 29.03.2012

Большое спасибо. Очень пригодилась статья.

Ответить ↓
Татьяна 24.04.2012

Здравствуйте!
Помогите, пожалуйста! Когда меняю в файле viv-grups-menu-2.htm строку http://webmap-blog.ru/examples/ymap-ymapsml/create_ymapsml-4.php?id=… на create_ymapsml.php?id=…, который, как мне кажется, соответствует Вашему файлу, выдает ошибку:

Ошибка: [object Object].

Ошибка из строки:
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);
});

Но что же с файлом, который Вы дали в примере?!
Помогите, пожалуйста, буду Вам очень признательна!

Ответить ↓
Татьяна 24.04.2012

Это была моя ошибка (bd.php). Простите за беспокойство!

Ответить ↓
Татьяна 24.04.2012

Подскажите, пожалуйста, как все это можно применить под OSM, предпологаю, что нужно изменить строку

Только как?! Заказчику невозможно объяснить, что намного проще работать с яндекс-картами, чем с осм. Говорит, что яндекс — коммерческие карты и вскоре будут невыгодны.
Помогите, пожалуйста! Самой, к сожалению, не разобраться…

Ответить ↓
1. admin Автор записи24.04.2012
  
  Для отображения OSM можно использовать библиотеку OpenLayers или Leaflet. Но тут придется переделывать весь код, т.к. каждая библиотека имеет свои особенности. Можно отобразить карты OSM используя API Яндекс.Карт новой версии 2.0.
  И это тоже приведет к полной переделке исходного кода примера.
  
  Ответить ↓
Татьяна 25.04.2012

Большое спасибо за ответ!

Ответить ↓
Татьяна 30.04.2012

Добрый день.
Скажите, пожалуйста, можно ли убрать или хотя бы как-то изменить надпись (сделать ее короче):
© ЗАО «Резидент», © ФГУП «Верхневолжское аэрогеодезическое предприятие», 2009 – Условия использования
или это будет нарушать пользовательское соглашение?!
К примеру, на вот этом сайте — http://dstweb.ru/cont/ присутствует только «Яндекс — условия использования».
Буду очень благодарна за Вашу помощь!

Ответить ↓
1. admin Автор записи01.05.2012
  
  Я понимаю здесь указаны поставщики карт для Яндекса и убирать их нельзя. Для карты Москвы поставщики не указаны, т.к. Яндекс самостоятельно разрабатывал карту для Москвы и Московской области,по этому на сайте в примере их нет
  
  Ответить ↓
Татьяна 03.05.2012

Здравствуйте. Вы не могли бы помочь еще раз?!
Не сильна в js, поэтому сама сделать не могу. Я бы хотела, чтобы при клике на checkbox отображались определенные метки, т.е. вообщем-то все тоже самое, но с инпутом. Думаю, нужно изменить вот этот кусок, как-то указав в нем checked:

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»,»bold»);
});

Если мне не удалось объяснить, что я имею ввиду, посмотрите, пожалуйста, на моей странице(http://gipros.kiev.ua/viv-grups-menu-2.htm —> finansy).

Буду ждать Ваш ответ. И еще большое спасибо, что всегда отвечаете!!!

Ответить ↓
1. admin Автор записи04.05.2012
  
  Нужно проверять состояния всех checkbox, и если состояние изменилось добавлять или удалять группу меток.
  Пример проверки if($(‘#show_vokzal’).attr(‘checked’) == ‘checked’) map.addOverlay(vokzal);
  
  Ответить ↓
Татьяна 04.05.2012

Очередной вопрос — куда это вставить?! =)

Ответить ↓
Татьяна 04.05.2012

Проблема в том, что либо не ставится галочка, при клике по checkbox, хотя метки при этом появляются на карте, либо наоборот не пропадает (если ), уже несколько дней пытаюсь это побороть, но никак не получается.
Вот: http://gipros.kiev.ua/viv-grups-menu-2.htm

Ответить ↓
1. admin Автор записи05.05.2012
  
  Сделал пример с checkbox
  
  Ответить ↓
Татьяна 09.05.2012

Огромное спасибо. Вы просто талант!!!

Ответить ↓
Grey 03.06.2012

Добрый вечер. В примере все метки скрыты при загрузке, а как их отобразить, все группы сразу, при загрузке карты?

Ответить ↓
1. admin Автор записи04.06.2012
  
  Нужно после добавления пункта меню в список написать строку .click()
  
  Вот пример.
  
  Ответить ↓
Grey 05.06.2012

У меня несколько иной код, на API 2.0. При таком решении:

function addMenuItem(group, map) {
// Показать/скрыть группу геообъектов на карте
$(«» + group.properties.get(‘name’) + ««)
.bind(«click», function () {
var link = $(this);
// Если пункт меню «неактивный», то добавляем группу на карту,
// иначе — удаляем с карты
if (link.hasClass(«active»)) {
map.geoObjects.remove(group);
} else {
map.geoObjects.add(group);
}
// Меняем «активность» пункта меню
link.toggleClass(«active»);
return false;
})
// Добавление нового пункта меню в список
.appendTo(
$(«»).appendTo($(«#menu»))
).click()
}

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

Ответить ↓
Александр 02.08.2012

доброго дня, Сергей
такой вопрос возник, если у двух организаций из разных категорий совпадают адресакоординаты, каким образом можно или значок заменить(указав что там две огранизации) или как-то отобразить оба места?

Ответить ↓
1. admin Автор записи04.08.2012
  
  Можно выводить информацию о находящихся организациях в виде списка в балуне, а метку оставить одну. В метке можно указать число организаций.
  
  Ответить ↓
Александр 17.10.2012

Здравствуйте,у меня такой вопрос как включить,чтобы отображались фотографии объектов,не получается прописать функцию обработке фотографии,как сделать правильно?

Ответить ↓
Антон 18.05.2013

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

Ответить ↓

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

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