navigation-line-stack.json

{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/maps/navigation-line/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\" align=\"center\"></div>\n    <!-- Source link -->\n    <div style=\"float: right; margin-right: 10px;\">Source:\n       <a href=\"http://www.lineaships.com/en/linea-peninsular/\" target=\"_blank\">www.lineaships.com</a>\n    </div>\n</div>\n\n\n","index.js":"{{ripple}}/**\n * Linea penisular sample\n */\n\n    var maps = new ej.maps.Maps({\n\n        titleSettings: {\n            text: 'Shipping sea route between various cities',\n            textStyle: {\n                size: '18px'\n            }\n        },\n        zoomSettings: {\n            enable: false,\n             zoomFactor: 13\n        },\n        mapsArea: {\n            background: '#4863A0'\n        },\n        centerPosition: {\n            latitude: 25.54244147012483,\n            longitude: -89.62646484375\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: '#789071'\n                 },\n                navigationLineSettings: window.penisular_location,\n                markerSettings: [\n                    {\n                        visible: true,\n                        shape: 'Circle',\n                        fill: 'white',\n                        width: 10,\n                        height: 10,\n                        dataSource: window.penisular_marker\n                    },\n                    {\n                        visible: true,\n                        template: '<div id=\"marker1\" style=\"font-size: 12px;color:white\">ALTAMIRA' +\n                            '</div>',\n                        dataSource: [\n                            { latitude: 22.403410892712124, longitude: -99.5 }\n                        ],\n                        animationDuration: 0\n                    },\n                    {\n                        visible: true,\n                        template: '<div id=\"marker2\" style=\"font-size: 12px;color:white\">HOUSTON' +\n                            '</div>',\n                        dataSource: [\n                            { latitude: 30.332197482973, longitude: -95.36270141601562 }\n                        ],\n                        animationDuration: 0\n                    },\n                    {\n                        visible: true,\n                        template: '<div id=\"marker3\" style=\"font-size: 12px;color:white\">PANAMA CITY' +\n                            '</div>',\n                        dataSource: [\n                            { latitude: 30.380747605060766, longitude: -85.81283569335938 }\n                        ],\n                        animationDuration: 0\n                    },\n                    {\n                        visible: true,\n                        template: '<div id=\"marker4\" style=\"font-size: 12px;color:white\">TAMPA' +\n                            '</div>',\n                        dataSource: [\n                            { latitude: 27.9337540167772, longitude: -81.29908447265625 }\n                        ],\n                        animationDuration: 0\n                    },\n                    {\n                        visible: true,\n                        template: '<div id=\"marker5\" style=\"font-size: 12px;color:white\">PROGRESO' +\n                            '</div>',\n                        dataSource: [\n                            { latitude: 20.62336521195344, longitude: -89.6649169921875 }\n                        ],\n                        animationDuration: 0\n                    }\n                ]\n            }\n        ]\n    });\n    maps.appendTo('#container');\n"}