marker-stack.json

{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/maps/marker/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=\"control-section\">\n    <div id=\"container\"></div>\n    <!-- Source link -->\n    <div style=\"float: right; margin-right: 10px;\">Source:\n            <a href=\"http://www.citymayors.com/statistics/largest-cities-population-125.html\" target=\"_blank\">www.citymayors.com</a>\n         </div>\n</div>\n<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\">Country : </span><span class=\"listing2\">${Country}</span>\n                    </div>\n                    <div>\n                        <span class=\"listing1\">Population : </span><span class=\"listing2\">${population}</span>\n                    </div> \n        </div>\n        \n    </div>\n    \n        \n","index.js":"{{ripple}}/**\n * Marker sample\n */\n\n    var maps = new ej.maps.Maps({\n\n        useGroupingSeparator: true,\n        format: 'n',\n        zoomSettings: {\n            enable: false\n        },\n        titleSettings: {\n            text: 'Top 25 populated cities in the world',\n            textStyle: {\n                size: '16px'\n            }\n        },\n        layers: [\n            {\n                shapeData: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/world-map.json'),\n                dataSource: window.topPopulation,\n                shapeSettings: {\n                    fill: '#C3E6ED'\n                },\n                markerSettings: [\n                    {\n                        dataSource: window.topPopulation,\n                        visible: true,\n                        animationDuration: 0,\n                        shape: 'Circle',\n                        fill: 'white',\n                        width: 3,\n                        border: { width: 2, color: '#285255' },\n                        tooltipSettings: {\n                            template: '#template',\n                            visible: true,\n                            valuePath: 'population',\n                        }\n                    },\n                ]\n            }\n        ]\n    });\n    maps.appendTo('#container');\n"}