marker-template-stack.json

{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/maps/marker-template/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=\"markertemp\"></div>\n    <!-- Source link -->\n    <div style=\"float: right; margin-right: 10px;\">Source:\n        <a href=\"http://www.bom.gov.au/calendar/annual/climate.shtml\" target=\"_blank\">www.bom.gov.au</a>\n     </div>\n</div>\n\n    \n","index.js":"{{ripple}}/**\n * Marker template sample\n */\n\n    var maps = new ej.maps.Maps({\n\n        zoomSettings: {\n            enable: false\n        },\n        titleSettings: {\n            text: ' Australia cities weather detail',\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/australia.json'),\n                markerSettings: [\n                    {\n                        height: 30,\n                        width: 30,\n                        visible: true,\n                        template: '<div id=\"marker1\"><img class=\"markerTemplate\" src=\"//ej2.syncfusion.com/javascript/demos/src/maps/images/weather-clear.png\"/>' +\n                            '<p>{{:Name}}:{{:Temperature}}°C</p></div>',\n                        dataSource: [\n                            { Name: 'Perth', latitude: -31.950527, longitude: 115.860457, Temperature: 31.6 }\n                        ]\n                    },\n                    {\n                        height: 30,\n                        width: 30,\n                        visible: true,\n                        template: '<div id=\"marker1\"><img class=\"markerTemplate\" src=\"//ej2.syncfusion.com/javascript/demos/src/maps/images/weather-clouds.png\"/>' +\n                            '<p>{{:Name}}:{{:Temperature}}°C</p></div>',\n                        dataSource: [\n                            { Name: 'Adelaide', latitude: -34.928499, longitude: 138.600746, Temperature: 28.5 }\n                        ]\n                    },\n                    {\n                        height: 30,\n                        width: 30,\n                        visible: true,\n                        template: '<div id=\"marker1\"><img class=\"markerTemplate\" src=\"//ej2.syncfusion.com/javascript/demos/src/maps/images/weather-clear.png\"/>' +\n                            '<p>{{:Name}}:{{:Temperature}}°C</p></div>',\n                        dataSource: [\n                            { Name: 'Townsville', latitude: -19.2589635, longitude: 146.8169483, Temperature: 31.3 }\n                        ]\n                    },\n                    {\n                        height: 30,\n                        width: 30,\n                        visible: true,\n                        template: '<div id=\"marker1\"><img class=\"markerTemplate\" src=\"//ej2.syncfusion.com/javascript/demos/src/maps/images/weather-rain.png\"/>' +\n                            '<p>{{:Name}}:{{:Temperature}}°C</p></div>',\n                        dataSource: [\n                            { Name: 'Sydney', latitude: -33.868820, longitude: 151.209296, Temperature: 26.4 }\n                        ]\n                    },\n                    {\n                        height: 30,\n                        width: 30,\n                        visible: true,\n                        template: '<div id=\"marker1\"><img class=\"markerTemplate\" src=\"//ej2.syncfusion.com/javascript/demos/src/maps/images/weather-clear.png\"/>' +\n                            '<p>{{:Name}}:{{:Temperature}}°C</p></div>',\n                        dataSource: [\n                            { Name: 'Alice Springs', latitude: -23.698042, longitude: 133.880747, Temperature: 36.4 },\n                        ]\n                    },\n                    {\n                        height: 30,\n                        width: 30,\n                        visible: true,\n                        template: '<div id=\"marker1\"><img class=\"markerTemplate\" src=\"//ej2.syncfusion.com/javascript/demos/src/maps/images/weather-clouds.png\"/>' + \n                        '<p>{{:Name}}:{{:Temperature}}°C</p></div>',\n                        dataSource: [\n                            { Name: 'Brisbane', latitude: -27.469771, longitude: 153.025124, Temperature: 29.1 }\n                        ]\n                    }\n                ],\n                tooltipSettings: {\n                    visible: false\n                },\n                shapeSettings: {\n                    autofill: true,\n                    palette: ['#E2B247', '#88DB46', '#42C4E2', '#C08AF8', '#52BACC', '#F4CE2F', '#6986ED'],\n                    border: {\n                        width: 0.5,\n                        color: 'white'\n                    },\n                }\n            }\n        ]\n    });\n    maps.appendTo('#markertemp');\n"}