Генерируем файл в формате YmapsML с данными автоматически — версия для API Яндекс.Карт 2.х

Автор: | 11.11.2013
Нет комментариев

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

В этой заметке я расскажу как можно этот же код использовать для API Яндекс.Карт 2.х.

Первый пример YmapsML-файла мы возьмем из «Моих карт» Яндекс.Карт.

Моих карты - Яндекс.Карты

Вот ссылка на него: http://maps.yandex.ru/export/usermaps/BcVPilYqehBtG-z1TiqfSq78WGuklbNm/

Попробуем вывести его содержимое на карту.

Загрузка YmapsML - API Яндекс.Карт 2.х. Первый пример

Код нашего примера:

<!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>Примеры. Загрузка XML.</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU"
            type="text/javascript"></script>
        <script type="text/javascript">
 
        ymaps.ready(init);
 
        function init () {
            var myMap = new ymaps.Map("map", {
                    center: [56.326944, 44.0075], 
                    zoom: 12
                });
 
		myMap.controls
			.add("zoomControl")
			.add("mapTools")
			.add('typeSelector');	
 
 
        ymaps.geoXml.load('http://maps.yandex.ru/export/usermaps/BcVPilYqehBtG-z1TiqfSq78WGuklbNm/').then(function (res) {
        myMap.geoObjects.add(res.geoObjects);
            if (res.mapState) {
                res.mapState.applyToMap(myMap);
            }
        });
 
        }
    </script>
    </head>
    <body>
        <div id="map" style="width: 800px; height: 600px"></div>
	</body>
</html>

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

Щелкаем по одной из меток и открывается балун с информацией

Загрузка YmapsML - API Яндекс.Карт 2.х. Первый пример - открытый балун

Теперь возьмем файл create_ymapsml.php из первого примера заметки «Генерируем файл в формате 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>Примеры. Загрузка XML.</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU"
            type="text/javascript"></script>
        <script type="text/javascript">
 
        ymaps.ready(init);
 
        function init () {
            var myMap = new ymaps.Map("map", {
                    center: [56.326944, 44.0075], 
                    zoom: 12
                });
 
		myMap.controls
        .add("zoomControl")
        .add("mapTools")
        .add('typeSelector');
 
 
        ymaps.geoXml.load('http://webmap-blog.ru/examples/ymap-ymapsml/create_ymapsml.php').then(function (res) {
        myMap.geoObjects.add(res.geoObjects);
        if (res.mapState) {
            res.mapState.applyToMap(myMap);
        }
        });
 
        }
    </script>
    </head>
    <body>
        <div id="map" style="width: 800px; height: 600px"></div>
    </body>
</html>

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

Загрузка YmapsML - API Яндекс.Карт 2.х. Второй пример

Как видите наш код работает без изменений.

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

Для этого будем использовать код файла 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);
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 '<style>', $styleorg[$i-1], '</style>';
echo '</GeoObject>';
 
echo "\n";
 
}
}
echo '</gml:featureMembers>
    </GeoObjectCollection>
</ymaps>';
 
 
?>

А код файла для вывода карты будет таким:

<!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>Примеры. Загрузка XML.</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
    <script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU"
            type="text/javascript"></script>
 
    <script type="text/javascript">
 
        ymaps.ready(init);
 
        function init () {
            var myMap = new ymaps.Map("map", {
                    center: [56.326944, 44.0075], 
                    zoom: 12
                });
 
		myMap.controls
        .add("zoomControl")
        .add("mapTools")
        .add('typeSelector');
 
 
        ymaps.geoXml.load('http://webmap-blog.ru/files/ymapsml-api2/create_ymapsml-2.php').then(function (res) {
             myMap.geoObjects.add(res.geoObjects);
            if (res.mapState) {
		res.mapState.applyToMap(myMap);
             }
        });
 
        }
    </script>
</head>
 
<body>
 
<div id="map" style="width: 800px; height: 600px"></div>
 
</body>
</html>

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

Загрузка YmapsML - API Яндекс.Карт 2.х. Четвертый пример

И на последок, давайте получим код YmapsML-файла аналогичный коду примера из «Моих карт».

Это можно сделать с помощью файла create_ymapsml-new.php

Вот его код:

<?php
 
header("Content-type: text/xml");
 
include("bd.php");
 
echo '<?xml version="1.0" encoding="utf-8"?>
<ym:ymaps xmlns:ym="http://maps.yandex.ru/ymaps/1.x">
  <Representation xmlns="http://maps.yandex.ru/representation/1.x">
    <Style xmlns:gml="http://www.opengis.net/gml" gml:id="userobject">
      <iconContentStyle>
        <template>#placemark</template>
      </iconContentStyle>
      <balloonContentStyle>
        <template>#balloon</template>
      </balloonContentStyle>
    </Style>
    <Template xmlns:gml="http://www.opengis.net/gml" gml:id="placemark">
      <text>$[metaDataProperty.AnyMetaData.number]</text>
    </Template>
    <Template xmlns:gml="http://www.opengis.net/gml" gml:id="balloon">
      <text>&lt;div style="max-width:400px;*width:400px;"&gt;&lt;div style="color:#ff0303;font-weight:bold"&gt;$[name]&lt;/div&gt;&lt;div&gt;$[description]&lt;/div&gt;&lt;/div&gt;</text>
    </Template>
  </Representation>
  <ym:GeoObjectCollection xmlns="http://www.opengis.net/gml">
    <featureMembers>';
 
$query1= "SELECT * FROM org_yandexmapnn";
$result1 = mysql_query($query1);
while ($par1 = mysql_fetch_array($result1))
{	 
echo '<ym:GeoObject>';
echo '<metaDataProperty>';
echo '<ym:AnyMetaData>';
echo '<ym:number>', $par1['ID'], '</ym:number>';
echo '</ym:AnyMetaData>';
echo '</metaDataProperty>';
echo '<name>', htmlspecialchars($par1['NAME']), '</name>';
echo '<description>Адрес: ', $par1['ADRES'], '&lt;br/&gt;Телефон: ', $par1['TELEPHON'], '&lt;br/&gt;Тип: ', $par1['TYPE'], '</description>';
echo '<Point>';
echo '<pos>', $par1['XX'], ' ', $par1['YY'], '</pos>';
echo '</Point>';
echo '<ym:style>default#redPoint</ym:style>';
echo '</ym:GeoObject>';
 
echo "\n";
 
} 
echo '</featureMembers>
    <gml:name xmlns:gml="http://www.opengis.net/gml">Объекты карте</gml:name>
    <ym:style>#userobject</ym:style>
  </ym:GeoObjectCollection>
</ym:ymaps>'; 
 
?>

А код вывода карты будет иметь вид:

<!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>Примеры. Загрузка XML.</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
    <script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU"
            type="text/javascript"></script>
 
    <script type="text/javascript">
 
        ymaps.ready(init);
 
        function init () {
            var myMap = new ymaps.Map("map", {
                    center: [56.326944, 44.0075], 
                    zoom: 12
                });
 
		myMap.controls
        .add("zoomControl")
        .add("mapTools")
        .add('typeSelector');
 
 
        ymaps.geoXml.load('http://webmap-blog.ru/files/ymapsml-api2/create_ymapsml-new.php').then(function (res) {
        myMap.geoObjects.add(res.geoObjects);
        if (res.mapState) {
            res.mapState.applyToMap(myMap);
            }
        });
 
        }
    </script>
</head>
 
<body>
 
<div id="map" style="width: 800px; height: 600px"></div>
 
</body>
</html>

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

Загрузка YmapsML - API Яндекс.Карт 2.х. Третий пример

Как видите всё предельно просто.

Загрузить архив с файлами примеров

И два замечания в заключении.

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

2. Если в YmapsML-файле меток очень много (1000 и более), можно не выводить их все одним файлом YmapsML, а разбить на несколько по категориям. Иначе данные будут долго подгружаться на карту.

Альтернативой YmapsML может быть представление данных в формате JSON.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *