To execute this example, create an HTML page and perform the following operations:
1. Add a link to the PP.css file.
Also add links to the following JS files:
PP.js.
PP.GraphicsBase.js.
PP.MapChart.js.
PP.BaseMaster.js.
PP.MapMaster.js.
resources.ru.js.
2. The following folders must be created in the project root folder:
Json. The JSON folder contains files with names of the following format: MapExample_<Territory code>.js. Executing the example requires the MapExample_Russia.js and MapExample_World.js files.
png. The png folder contains files with icons whose name correspond to the format Yahoo_Weather_<Icon number>.png. To correctly execute this example the folder must contain seven files with numbers ranging from 001 to 007, such as Yahoo_Weather_003.png.
Topobase. The folder contains two more folders:
SVG. Contains files for SVG topobases. The Russia.svg file is mandatory.
WebGL. The folder contains files for WebGL and Sphere topobases. Russia.tr and World.trsp files must be available.
3. In the <body> tag place a block with the MapType ID to store the panel for selecting map topobase, and the "map" block to store the map:
<body> <!-- Container for a panel of map topobase choice --> <div id="MapType" style="float: right;"></div> <!-- Container for a master --> <div id="mapMaster" style="float: left;"></div>
<!-- Container for a map --> <div id="map"style="float: left;"></div> </body>
3. Add a script creating a map:
(function() { // Create a variable that contains map map = null; // Specify path to the root folder containing resources files PP.resourceManager.setRootResourcesFolder("../../../resources/"); // Determine language settings for resources PP.setCurrentCulture(PP.Cultures.ru) // Determine default map type type = PP.MapChartType.SVG; // By default load topobase from the Russia.svg file in the SVG folder var topobase = "Russia"; var dir = "SVG"; var ext = "svg"; // Determine folder with map settings var settingsDir = "Json/"; // Determine file with map settings
var currentUrl = "MapExample_Russia.js"; // Function for creating map function createMap(mapData) { if (map) map.dispose(); var mapContent = document.getElementById("map-content"); // Get map JSON settings var settings = JSON.parse(mapData); // Determine path to required file depending on topobase type switch (type) { case 'SVG': dir = "Topobase/SVG"; topobase = "Russia"; ext = "svg"; break; case 'WebGL':
dir = 'Topobase/WebGL'; topobase = "Russia"; ext = 'tr'; break; case 'Sphere': dir = 'Topobase/WebGL'; topobase = 'World'; ext = 'trsp'; break; default: settings.MapChart.Mode = "Drawing2D"; }; // Change map type settings.MapChart.Type = type;
// Disable rendering of map elements on canvas settings.MapChart.RenderToCanvas = false; // Determine topobase settings.MapChart.Topobase = dir + "/" + topobase + "." + ext; settings.MapChart.ParentNode = document.getElementById("map"); // Determine path to images folder settings.MapChart.ImagePath = "../../../build/img/"; PP.ImagePath = settings.MapChart.ImagePath; // Create a map map = new PP.MapChart(settings.MapChart ? settings.MapChart : settings); // Rerender map sizes updateSize(); }; // Executes Ajax query to get a file with map JSON settings
function getRequest(dataURL) { var Request = new PP.Ajax({ Url: dataURL, Success: function(sender, args) { createMap(args.ResponseText); // Create a map Request.dispose(); } }); Request.send(); // Send query } var idTime; // Refreshes map sizes and deletes unnecessary layers function updateSize() { if (idTime) clearTimeout(idTime); idTime = setTimeout(function() { if (map) {
if (map.getMapTerritoryTranscript()) { map.getMapTerritoryTranscript().hide(); }; map.getMilestoneLayer().remove(); map.getArrowLayer().remove(); } }, 100); } // Loads map function loadMapChart() { getRequest(settingsDir + currentUrl); createToolBar(); // Create a button panel for toggling map type } // Creates a button panel for toggling map topobase type function createToolBar() { MapType = new PP.Ui.ToolBar({
ParentNode: "MapType", Items: [{ Content: 'SVG', Id: 'SVG', IsChecked: true, GroupName: 'mode' }, { Content: 'WebGL', Id: 'WebGL', GroupName: 'mode', IsVisible: !PP.IsIE }, { Content: 'Sphere', Id: 'Sphere', GroupName: 'mode',
IsVisible: !PP.IsIE }], IsVisible: false // Hide toolbar }); MapType.Click.add(changeType); } /* Processes clicking of buttons located on selection panel of map topobase type */ function changeType(s, a) { if (a.Item) { var aa = a.Item; if (aa instanceof PP.Ui.ToolBarButton) { changeMapType(a.Item.getContent()); } } }
// Changes map type changeMapType = function(type) { this.type = type; switch (type) { case 'SVG': case 'WebGL': currentUrl = "MapExample_Russia.js"; getRequest(settingsDir + currentUrl); break; case 'Sphere': currentUrl = "MapExample_World.js"; getRequest(settingsDir + currentUrl); break; default: map.setType(type); } }
// Creates a minimap zoom panel function createMiniMap() { var miniMap = new PP.Ui.MiniMap({ // Set zoom panel width Width: 100, // Set whether map is displayed ShowMap: true, // Set whether zoom buttons are displayed ShowButtons: true, // Set whether map proportions are changed on resize KeepProportions: false, // Set whether initial borders are kept KeepInitialBounds: true, // Set height of zoom buttons ButtonsHeight: 20,
FrameStyle: new PP.Style({ Background: new PP.SolidColorBrush({ Color: PP.Color.Colors.lightgreen }) }) }); // Add a zoom panel to map map.setMiniMap(miniMap); // Set control on zoom panel miniMap._Control = map; // Display zoo panel on map map.setMiniMapEnabled(true, false); // Remove weather icons map._MilestoneLayer.remove(); } // Load map loadMapChart(); })();
NOTE. User can define his own paths to script, resource and image files.
4. To show a sphere, it is necessary to add following item inside the <staticContent> element in the web.config configuration file of the web application:
<mimemap fileextension=".trsp" mimetype="application/x-trsp">
To execute custom scripts for the map, including the examples given in the pages that contain descriptions of properties, methods and events of this component and its constituent parts, place the code after the script specified above or in the browser console.
After executing the example the PP.MapChart component is placed on the HTML page:
See also: