bubble-stack.json

{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/maps/bubble/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 id=\"template\" style=\"display:none\">\n    <div class=\"toolback\">\n                <div class=\"listing2\">\n                    <center>\n                        ${name}                                            \n                    </center>\n                </div>\n                <hr style=\"margin-top: 2px;margin-bottom:5px;border:0.5px solid #DDDDDD\">\n                <div>\n                    <span class=\"listing1\">Rank : </span><span class=\"listing2\">${rank}</span>\n                </div> \n                <div>\n                    <span class=\"listing1\">Population : </span><span class=\"listing2\">${population}</span>\n                </div>\n    </div>\n    \n</div>\n<div class=\"control-section\">\n    <div id=\"container\" align=\"center\"></div>\n    <!-- Source link -->\n    <div style=\"float: right; margin-right: 10px;\">Source:\n       <a href=\"https://en.wikipedia.org/wiki/List_of_countries_by_number_of_Internet_users\" target=\"_blank\">en.wikipedia.org</a>\n    </div>\n</div>\n\n    \n    <style>\n        .toolback {\n            border-radius: 4px;\n            border: 1px #abb9c6;\n            opacity: 90%;\n            background: rgba(53, 63, 76, 0.90);\n            box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.40);\n            padding-bottom: 10px;\n            padding-top: 10px;\n            padding-left: 10px;\n            padding-right: 10px;\n            width: 165px;\n        }\n        .listing1 {\n             font-size:13px;\n             color:#cccccc\n        }\n        .listing2 {\n             font-size:13px;\n             color:#ffffff;\n             font-weight: 500;\n        }\n     </style></div></body></html>","index.js":"{{ripple}}/**\n * Bubble sample\n */\n\n\n    var maps = new ej.maps.Maps({\n\n        bubbleRendering: function (args) {\n            args.radius = args.data.value;\n        },\n        format: 'n',\n        useGroupingSeparator: true,\n        zoomSettings: {\n            enable: true,\n            horizontalAlignment: 'Near',\n            toolBarOrientation: 'Vertical',\n            pinchZooming: true\n        },\n        titleSettings: {\n            text: 'Top 30 countries with highest Internet users',\n            textStyle: {\n                size: '16px'\n            }\n        },\n        layers: [\n            {\n                shapeDataPath: 'name',\n                shapePropertyPath: 'name',\n                shapeData: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/world-map.json'),\n                shapeSettings: {\n                    fill: '#E5E5E5'\n                },\n                bubbleSettings: [\n                    {\n                        visible: true,\n                        valuePath: 'value',\n                        colorValuePath: 'color',\n                        minRadius: 3,\n                        maxRadius: 70,\n\t\t\t\t\t\topacity: 0.8,\n                        dataSource: window.internetUsers,\n\t\t\t\t\t\ttooltipSettings: {\n                            visible: true,\n                            valuePath: 'population',\n                            template: '#template'\n                        },\n                    }\n                ]\n            }\n        ]\n    });\n    maps.appendTo('#container');\n"}