Для размещения карты на HTML странице понадобится следующий набор файлов:
файл с топоосновой в формате SVG (напимер, Russia.svg);
xml-файл с настройками для карты (данные для настроек должны быть представлены в формате JSON);
библиотека DHTML-компонентов PP.js;
Библиотека для работы с базовыми классами графических компонентов PP.GraphicsBase.js;
библиотека для работы с картой PP.MapChart;
файл со стилями PP.css.
В теге HEAD добавьте ссылки на js- и css-файлы (PP.js, MapChart.js, PP.css).
В теге BODY добавьте атрибут onresize:
<body onresize="onresize()">
<div id="map"></div>
</body>
В теге SCRIPT добавьте следующий код:
//Создаем переменную, которая будет содержать карту
var map;
function createMap(mapData)
{
if (map) map.dispose();
var mapContent = document.getElementById("map-content");
//получаем JSON-настройки карты
var settings = JSON.parse(mapData);
//определяем топооснову
settings.MapChart.Topobase = "MapData/topobase/SVG/Russia.svg";
settings.MapChart.ParentNode = "map";
//путь к папке с картинками
settings.MapChart.ImagePath = "PP_img/";
//создаем карту
map = new PP.MapChart(settings.MapChart ? settings.MapChart : settings);
window.onresize();
}
//запрос для получения файла с JSON-настройками карты
var Request = new PP.Ajax(
{
Url: "MapData/MapData_russia.xml?d=" + (new Date).toTimeString(),
Success: function (sender, args)
{
createMap(args.ResponseText);
Request.dispose();
}
});
Request.send();
//Функция для обновления размеров карты
function updateSize()
{
if (map)
{
map.setHeight(document.documentElement.clientHeight - 60);
map.setWidth(document.documentElement.clientWidth);
}
}
var idTime;
//функция для установки размеров карты в соответствии с размерами окна
window.onresize = function ()
{
if (idTime) clearTimeout(idTime);
idTime = setTimeout(updateSize, 100);
}
После выполнения примера на html-странице будет размещена карта с топоосновой Russia.svg. Внешний вид карты зависит от настроек, указанных в xml-файле:

См. также: