multi-layer-stack.json

{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/maps/multi-layer/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</div>\n<!-- Source link -->\n<div style=\"float: right; margin-right: 10px;\">Source:\n        <a href=\"http://www.samsung.com/semiconductor/about-us/location/\" target=\"_blank\">www.samsung.com</a>\n     </div>\n<div id=\"markercircle\" style=\"display:none;\">\n    <svg width=\"30\" height=\"30\">\n        <circle class=\"svgcircle\" cx=\"15\" cy=\"15\" r=\"6\" stroke=\"rgba(77, 77, 77, 0.8)\" fill=\"rgba(0, 77, 153, 0.8)\"/>\n    </svg>\n</div>\n\n</div>\n\n\n    \n<style>\n    .markerTemplate {\n        font-size: 12px;\n        color: black;\n        font-weight: 500\n    }\n</style></body></html>","index.js":"{{ripple}}/**\n * Multilayer sample\n */\n\n    var maps = new ej.maps.Maps({\n\n        zoomSettings: {\n            enable: true,\n            pinchZooming: true\n        },\n        titleSettings: {\n            text: 'Samsung Semiconductor office locations in USA',\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/usa.json'),\n                shapeSettings: {\n                    fill: '#E5E5E5',\n                    border: {\n                        color: 'black',\n                        width: 0.1\n                    }\n                },\n                dataLabelSettings: {\n                    visible: true,\n                    labelPath: 'iso_3166_2',\n                    smartLabelMode: 'Hide'\n                }\n            },\n            {\n                shapeData: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/texas.json'),\n                type: 'SubLayer',\n                shapeSettings: {\n                    fill: 'rgba(141, 206, 255, 0.6)',\n                    border: {\n                        color: '#1a9cff',\n                        width: 0.25\n                    }\n                },\n                markerSettings: [\n                    {\n                        visible: true,\n                        width: 20,\n                        height: 20,\n                        template: '#markercircle',\n                        dataSource: [\n                            {\n                                latitude: 30.267153,\n                                longitude: -97.7430608,\n                                name: 'Austin'\n                            }\n                        ],\n                        tooltipSettings: {\n                            visible: true,\n                            valuePath: 'name',\n                            format: '<b>${name}</b><br>Manufacturing Center,<br>Research and Development Center'\n                        }\n                    },\n                    {\n                        visible: true,\n                        dataSource: [\n                            {\n                                latitude: 31.80289258670676,\n                                longitude: -98.96484375\n                            }\n                        ],\n                        template: '<div>TX</div>'\n                    }\n                ]\n            },\n            {\n                shapeData: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/california.json'),\n                type: 'SubLayer',\n                shapeSettings: {\n                    fill: 'rgba(141, 206, 255, 0.6)',\n                    border: {\n                        color: '#1a9cff',\n                        width: 0.25\n                    }\n                },\n                markerSettings: [\n                    {\n                        visible: true,\n                        width: 20,\n                        height: 20,\n                        dataSource: [\n                            {\n                                latitude: 37.3382082,\n                                longitude: -121.8863286,\n                                name: 'San Jose'\n                            }\n                        ],\n                        tooltipSettings: {\n                            visible: true,\n                            valuePath: 'name',\n                            format: '<b>${name}</b><br>Regional Office,<br>Research and Development Center'\n                        },\n                        template: '#markercircle'\n                    },\n                    {\n                        visible: true,\n                        dataSource: [\n                            {\n                                latitude: 37.09023980307208,\n                                longitude: -119.35546875000001\n                            }\n                        ],\n                        template: '<div>CA</div>'\n                    }\n                ]\n            }\n        ]\n    });\n    maps.appendTo('#container');\n"}