legend-stack.json

{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/maps/legend/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-8 control-section\">\n    <div class=\"content-wrapper\">\n    <div id=\"container\" align=\"center\"></div>\n    <!-- Source link -->\n    <div style=\"float: right; margin-right: 10px;\">Source:\n       <a href=\"https://simple.wikipedia.org/wiki/List_of_countries_by_population_density\" target=\"_blank\">simple.wikipedia.org</a>\n    </div>\n</div>\n</div>\n<!-- Property Panel -->\n<div class=\"col-lg-4 property-section\">\n        <table id=\"property\" title=\"Properties\" style=\"width: 100%\">\n            <tbody>\n                <tr style=\"height: 50px\">\n                    <td style=\"width: 10%\">\n                        <div class=\"property-text\" style=\"padding: 0px;\">Legend mode </div>\n                    </td>\n                    <td style=\"width: 30%;\">\n                        <select name=\"selectIndex\" autocomplete=\"off\" id=\"legendMode\" style=\"width:60%;\">\n                            <option value=\"Default\" selected>Default</option>\n                            <option value=\"Interactive\">Interactive</option>\n                        </select>\n                    </td>\n                </tr>\n                <tr style=\"height: 50px\">\n                    <td style=\"width: 10%\">\n                        <div class=\"property-text\" style=\"padding: 0px;\">Legend position </div>\n                    </td>\n                    <td style=\"width: 30%\">\n                        <select name=\"legendPos\" autocomplete=\"off\" id=\"legendPosition\" style=\"width:60%;\">\n                            <option value=\"Top\" selected>Top</option>\n                            <option value=\"Bottom\">Bottom</option>\n                            <option value=\"Left\">Left</option>\n                            <option value=\"Right\">Right</option>\n                        </select>\n                    </td>\n                </tr>\n                <tr style=\"height: 50px\">\n                    <td style=\"width: 70%\">\n                        <div class=\"property-text\" style=\"padding: 0px;\">Show legend for remaining data source items</div>\n                    </td>\n                    <td style=\"width: 20%\">\n                        <div style=\"padding-top:0px;\">\n                            <input type=\"checkbox\" id=\"opacity\">\n                        </div>\n                    </td>\n                </tr>\n                <tr style=\"height: 50px\">\n                    <td style=\"width: 70%\">\n                        <div class=\"property-text\" style=\"padding: 0px;\">Show population density when the legend item is toggled</div>\n                    </td>\n                    <td style=\"width: 20%\">\n                        <div style=\"padding-top:0px;\">\n                            <input type=\"checkbox\" id=\"toggleLegend\">\n                        </div>\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n    </div>\n\n    </div></body></html>","index.js":"{{ripple}}/**\n * Legend sample\n */\n\n    var maps = new ej.maps.Maps({\n\n        tooltipRender: function (args) {\n            if (!args.options.data) {\n                args.cancel = true;\n            }\n        },\n        zoomSettings: {\n            enable: false\n        },\n        titleSettings: {\n            text: 'Population density (per square kilometer) - 2015',\n            textStyle: {\n                size: '16px'\n            }\n        },\n        legendSettings: {\n            visible: true,\n            position: 'Top',\n        },\n        layers: [\n            {\n                shapeData: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/world-map.json'),\n                shapeDataPath: 'name',\n                shapePropertyPath: 'name',\n                dataSource: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/legend-datasource.json'),\n                tooltipSettings: {\n                    visible: true,\n                    valuePath: 'name',\n                    format: '${name} : ${density}'\n                },\n                shapeSettings: {\n                    colorValuePath: 'density',\n                    fill: '#E5E5E5',\n                    colorMapping: [\n                        {\n                            from: 0.00001, to: 100, color: 'rgb(153,174,214)', label: '<100'\n                        },\n                        {\n                            from: 100, to: 200, color: 'rgb(115,143,199)', label: '100 - 200'\n                        },\n                        {\n                            from: 200, to: 300, color: 'rgb(77,112,184)', label: '200 - 300'\n                        },\n                        {\n                            from: 300, to: 500, color: 'rgb(38,82,168)', label: '300 - 500'\n                        },\n                        {\n                            from: 500, to: 19000, color: 'rgb(0,51,153)', label: '>500'\n                        },\n                        {\n                            color: null, label: null\n                        }\n                    ]\n                }\n            }\n        ]\n    });\n    maps.appendTo('#container');\n    // Code for Property Panel\n    var legendPosition = new ej.dropdowns.DropDownList({\n        index: 0,\n        placeholder: 'Legend Position',\n        width: 100,\n        change: function () {\n            maps.legendSettings.position = legendPosition.value;\n            if (legendPosition.value === 'Left' || legendPosition.value === 'Right') {\n                maps.legendSettings.orientation = 'Vertical';\n                if (maps.legendSettings.mode === 'Interactive') {\n                    maps.legendSettings.height = '70%';\n                    maps.legendSettings.width = '10';\n                }\n                else {\n                    maps.legendSettings.height = '';\n                    maps.legendSettings.width = '';\n                }\n            }\n            else {\n                maps.legendSettings.orientation = 'Horizontal';\n                if (maps.legendSettings.mode === 'Interactive') {\n                    maps.legendSettings.height = '10';\n                    maps.legendSettings.width = '';\n                }\n            }\n            maps.refresh();\n        }\n    });\n    legendPosition.appendTo('#legendPosition');\n    var mode = new ej.dropdowns.DropDownList({\n        index: 0,\n        placeholder: 'Select layoutMode type',\n        width: 100,\n        change: function () {\n            maps.legendSettings.mode = mode.value;\n            if (mode.value === 'Interactive') {\n                if (maps.legendSettings.orientation === 'Horizontal' || maps.legendSettings.orientation === 'None') {\n                    maps.legendSettings.height = '10';\n                    maps.legendSettings.width = '';\n                }\n                else {\n                    maps.legendSettings.height = '70%';\n                    maps.legendSettings.width = '10';\n                }\n            }\n            else {\n                maps.legendSettings.height = '';\n                maps.legendSettings.width = '';\n            }\n            maps.refresh();\n        }\n    });\n    mode.appendTo('#legendMode');\n    var opacity;\n    var highlightCheckBox = new ej.buttons.CheckBox({\n        change: opacity, checked: false\n    }, '#opacity');\n    highlightCheckBox.change = opacity = function (e) {\n        if (e.checked) {\n            maps.layers[0].shapeSettings.colorMapping[5].color = 'lightgrey';\n            maps.layers[0].shapeSettings.colorMapping[5].label = 'No Data';\n        }\n        else {\n            maps.layers[0].shapeSettings.colorMapping[5].color = null;\n            maps.layers[0].shapeSettings.colorMapping[5].label = null;\n        }\n        maps.refresh();\n    };\n    var toggleLegend;\n    var legendCheckBox = new ej.buttons.CheckBox({\n        change: toggleLegend, checked: false\n    }, '#toggleLegend');\n    legendCheckBox.change = toggleLegend = function (e) {\n        maps.legendSettings.toggleLegendSettings.enable = e.checked;\n        maps.refresh();\n    };\n"}