The following files are required to place a map to an HTML page:
An SVG file containing topobase (for example, Russia.svg).
An XML file that contains map settings (settings data must have the JSON format).
Library of DHTML components PP.js.
Library for working with base classes of visual components PP.GraphicsBase.js.
Library used to work with a PP.MapChart map.
A styles file PP.css.
In the HEAD tag add links to JS and CSS files (PP.js, MapChart.js, PP.css).
In the BODY tag add the attribute onresize:
<body onresize="onresize()">
<div id="map"></div>
</body>
In the SCRIPT tag add the following code:
//Create a variable that will contain a map
var map;
function createMap(mapData)
{
if (map) map.dispose();
var mapContent = document.getElementById("map-content");
//get the JSON settings of the map
var settings = JSON.parse(mapData);
//determine a topobase
settings.MapChart.Topobase = "MapData/topobase/SVG/Russia.svg";
settings.MapChart.ParentNode = "map";
//path to the folder with images
settings.MapChart.ImagePath = "PP_img/";
//create a map
map = new PP.MapChart(settings.MapChart ? settings.MapChart : settings);
window.onresize();
}
//request to get the file with JSON settings of the map
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 to update map sizes
function updateSize()
{
if (map)
{
map.setHeight(document.documentElement.clientHeight - 60);
map.setWidth(document.documentElement.clientWidth);
}
}
var idTime;
//function to set map sizes according to window sizes
window.onresize = function ()
{
if (idTime) clearTimeout(idTime);
idTime = setTimeout(updateSize, 100);
}
The map with the Russia.svg topobase is located on the HTML page after an example execution. Map appearance depends on the settings specified in the XML file:

See also: