marker-cluster-stack.json

{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/maps/marker-cluster/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\n\n<div id=\"template\" style=\"display:none\">\n    <div class=\"toolback\">\n                <div class=\"listing2\">\n                    <center>\n                        ${city}                                            \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\">Area : </span><span class=\"listing2\">${area} sq kms</span>\n                </div> \n    </div>\n    \n</div>\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: 140px;\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 * Marker clustersample\n */\n\n    var maps = new ej.maps.Maps({\n\n        useGroupingSeparator: true,\n        format: 'n',\n        zoomSettings: {\n            enable: true\n        },\n        titleSettings: {\n            text: 'Top 50 largest 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                shapeSettings: {\n                    fill: '#C1DFF5'\n                },\n                markerClusterSettings: {\n                    allowClustering: true,\n                    shape: 'Image',\n                    height: 40,\n                    width: 40,\n                    imageUrl: '//ej2.syncfusion.com/javascript/demos/src/maps/images/cluster.svg'\n                },\n                markerSettings: [\n                    {\n                        visible: true,\n                        dataSource: window.cluster,\n                        shape: 'Image',\n                        imageUrl: '//ej2.syncfusion.com/javascript/demos/src/maps/images/ballon.png',\n                        tooltipSettings: {\n                            template: '#template',\n                            visible: true,\n                            valuePath: 'area',\n                        },\n                        height: 20,\n                        width: 20,\n                        animationDuration: 0\n                    },\n                ]\n            }\n        ]\n    });\n    maps.appendTo('#container');\n"}