Example of Creating the MapChart Component

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:

2. The following folders must be created in the project root folder:

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:

MapChart