highlighted-region-stack.json

{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/maps/highlighted-region/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 style=\"width:300px;margin:0 auto;padding-bottom:10px\">\n        <img src=\"//ej2.syncfusion.com/javascript/demos/src/maps/images/atm.png\" style=\"width:25px;height:25px;float:left\">\n        <div style=\"padding-left:30px;font-size:18px;font-weight:400;\">ATM locations in Oklahoma, USA</div>\n    </div> \n<div id=\"container\"></div>\n<!-- Source link -->\n<div style=\"float: right; margin-right: 10px;\">Source:\n   <a href=\"https://www.google.co.in/maps/search/atm+in+oklahoma/@35.3864432,-98.2888719,8z/data=!3m1!4b1\" target=\"_blank\">www.google.co.in/maps</a>\n</div>\n</div>\n\n</div></body></html>","index.js":"{{ripple}}/**\n * Highlighted region sample\n */\n\n    var maps = new ej.maps.Maps({\n\n        centerPosition: {\n            latitude: 35.65, longitude: -97.3\n        },\n        zoomSettings: {\n            enable: false,\n            zoomFactor: 1.75\n        },\n        layers: [\n            {\n                shapeData: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/oklahoma.json'),\n                shapeSettings: {\n                    fill: '#F5F5F5',\n                    border: { color: '#EEDA97', width: 1 }\n                },\n                markerSettings: [\n                    {\n                        width: 20,\n                        height: 20,\n                        animationDuration: 0,\n                        visible: true,\n                        shape: 'Image',\n                        imageUrl: '//ej2.syncfusion.com/javascript/demos/src/maps/images/ballon.png',\n                        fill: '#000080',\n                        border: {\n                            color: 'transparent'\n                        },\n                        dataSource: [\n                            {\n                                latitude: 35.6379762, longitude: -97.4823761\n                            }, {\n                                latitude: 35.5676663, longitude: -97.5128031\n                            }, {\n                                latitude: 35.5412361, longitude: -97.601552\n                            }, {\n                                latitude: 35.5451471, longitude: -97.5661039\n                            }, {\n                                latitude: 35.5120376, longitude: -97.5918531\n                            }, {\n                                latitude: 35.5112516, longitude: -97.5843\n                            }, {\n                                latitude: 35.4737072, longitude: -97.5158072\n                            }, {\n                                latitude: 35.4575239, longitude: -97.6179457\n                            }, {\n                                latitude: 35.4362676, longitude: -97.5998354\n                            }, {\n                                latitude: 35.3954872, longitude: -97.5962305\n                            }, {\n                                latitude: 35.3492258, longitude: -97.5294113\n                            },\n                            {\n                                latitude: 35.5260794, longitude: -98.7032318\n                            },\n                            {\n                                latitude: 34.7827916, longitude: -98.3001709\n                            },\n                            {\n                                latitude: 34.0793936, longkitude: -98.5583496\n                            },\n                            {\n                                latitude: 36.1434199, longitude: -97.0690155\n                            },\n                            {\n                                latitude: 36.0170318, longitude: -96.11063\n                            },\n                            {\n                                latitude: 36.1608845, longitude: -96.0205078\n                            },\n                            {\n                                latitude: 36.1323292, longitude: -95.9624863\n                            },\n                            {\n                                latitude: 36.1317746, longitude: -95.9046364\n                            },\n                            {\n                                latitude: 36.1604341, longitude: -95.8885002\n                            },\n                        ]\n                    },\n                    {\n                        animationDuration: 0,\n                        visible: true,\n                        shape: 'Circle',\n                        width: 130,\n                        height: 130,\n                        fill: 'rgba(70,130,180,0.3)',\n                        dataSource: [\n                            {\n                                latitude: 35.5112516,\n                                longitude: -97.5843,\n                                text: '10/18 ATMs'\n                            }\n                        ],\n                        border: {\n                            color: 'transparent'\n                        },\n                        tooltipSettings: {\n                            visible: true,\n                            valuePath: 'text'\n                        }\n                    },\n                    {\n                        animationDuration: 0,\n                        visible: true,\n                        shape: 'Circle',\n                        width: 100,\n                        height: 100,\n                        fill: 'rgba(70,130,180,0.3)',\n                        dataSource: [\n                            {\n                                latitude: 36.0808845,\n                                longitude: -96.0205078,\n                                text: '5/18 ATMs'\n                            }\n                        ],\n                        tooltipSettings: {\n                            visible: true,\n                            valuePath: 'text'\n                        },\n                        border: {\n                            color: 'transparent'\n                        }\n                    },\n                    {\n                        visible: true,\n                        template: '<div style=\"color: black;\">{{:name}}</div>',\n                        dataSource: [\n                            {\n                                longitude: -101.9450281, latitude: 35.2018863, name: 'Amarillo'\n                            },\n                            {\n                                longitude: -98.0971969, latitude: 35.5514624, name: 'El Reno'\n                            },\n                            {\n                                longitude: -97.8432238, latitude: 35.5150073, name: 'Yukon'\n                            },\n                            {\n                                longitude: -97.2557752, latitude: 35.4933852, name: 'Harrah'\n                            },\n                            {\n                                longitude: -97.1019391, latitude: 35.3620257, name: 'Shawnee'\n                            },\n                            {\n                                longitude: -97.072877, latitude: 35.6853011, name: 'Wellston'\n                            },\n                            {\n                                longitude: -96.2093353, latitude: 36.133417, name: 'Lotsee'\n                            },\n                            {\n                                longitude: -96.3077788, latitude: 36.1879088, name: 'Sand Springs'\n                            },\n                            {\n                                longitude: -98.7075369, latitude: 35.931371, name: 'Oakwood'\n                            },\n                            {\n                                longitude: -98.0003367, latitude: 35.0403272, name: 'Chickasha'\n                            },\n                            {\n                                longitude: -97.1836494, latitude: 36.4595554, name: 'Red Rock'\n                            },\n                            {\n                                longitude: -96.7148021, latitude: 35.4859752, name: 'Prague'\n                            },\n                            {\n                                longitude: -97.9339651, latitude: 36.1022835, name: 'Hennessey'\n                            },\n                            {\n                                longitude: -96.2595621, latitude: 35.2453183, name: 'Wetumka'\n                            },\n                            {\n                                longitude: -97.4499583, latitude: 35.0304344, name: 'Purcell'\n                            },\n                            {\n                                longitude: -96.1059044, latitude: 35.605942, name: 'Okmulgee'\n                            },\n                            {\n                                longitude: -97.9684792, latitude: 35.8439429, name: 'Kingfisher'\n                            },\n                            {\n                                longitude: -95.7691956, latitude: 34.9332303, name: 'McAlester'\n                            },\n                            {\n                                longitude: -96.1289978, latitude: 34.3853794, name: 'Atoka'\n                            },\n                            {\n                                longitude: -97.1191406, latitude: 34.5042932, name: 'Davis'\n                            },\n                            {\n                                longitude: -98.0310059, latitude: 37.1537496, name: 'Anthony'\n                            },\n                            {\n                                longitude: -98.3564758, latitude: 36.7542898, name: 'Cherokee'\n                            },\n                            {\n                                longitude: -95.3695679, latitude: 35.7476268, name: 'Muskogee'\n                            },\n                            {\n                                longitude: -95.582428, latitude: 35.2871057, name: 'Eufaula'\n                            },\n                            {\n                                longitude: -96.9412994, latitude: 36.0446575, name: 'Mehan'\n                            },\n                            {\n                                longitude: -99.0925598, latitude: 35.0299964, name: 'Hobart'\n                            },\n                            {\n                                longitude: -98.4924316, latitude: 33.9137338, name: 'Wichita Falls'\n                            },\n                            {\n                                longitude: -98.9675903, latitude: 35.5154609, name: 'Clinton'\n                            },\n                            {\n                                longitude: -98.923645, latitude: 36.1478557, name: 'Seiling'\n                            },\n                            {\n                                longitude: -99.2985535, latitude: 36.1500735, name: 'Vici'\n                            },\n                            {\n                                longitude: -95.3173828, latitude: 36.3084855, name: 'Pryor'\n                            },\n                            {\n                                longitude: -96.7524719, latitude: 34.9596836, name: 'Konawa'\n                            }\n                        ]\n                    }\n                ]\n            }\n        ]\n    });\n    maps.appendTo('#container');\n"}