{"id":5070,"date":"2022-02-16T09:19:57","date_gmt":"2022-02-16T09:19:57","guid":{"rendered":"https:\/\/visitkefaloniaisland.gr\/sea-routes\/"},"modified":"2022-03-02T09:36:19","modified_gmt":"2022-03-02T09:36:19","slug":"sea-routes","status":"publish","type":"post","link":"https:\/\/visitkefaloniaisland.gr\/sea-routes\/","title":{"rendered":"Sea Routes"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"5070\" class=\"elementor elementor-5070 elementor-4167\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-50b7c49 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"50b7c49\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-613dd2c\" data-id=\"613dd2c\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e6206b2 elementor-widget elementor-widget-html\" data-id=\"e6206b2\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div class=\"custom-html\" id='map_options_cont'><\/div>\r\n<div class=\"custom-html\" id='map_container' data-lang='gr' data-app='6'><\/div>\r\n<p><\/p>\r\n<div style='padding-top: 20px;padding-bottom:20px;'>\r\nPowered by <img src='http:\/\/kefalonia.intelligentcity.gr\/icityops\/icity_repos\/images\/brand\/IntelligentCity_2.png' width='150px' alt='IntelligentCity' \/> <img src='http:\/\/kefalonia.intelligentcity.gr\/icityops\/icity_repos\/images\/brand\/CITYROUTES_website_logo.png' width='150px' alt='CityRoutes' \/>\r\n<script src=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.1.0\/js\/bootstrap.min.js\" integrity=\"sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt\/6v9KI65qnm\" crossorigin=\"anonymous\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/select2\/4.0.6-rc.0\/js\/select2.min.js\"><\/script>\r\n<script>\r\nfunction checkURL(url) {\r\n    return (url.match(\/\\.(jpeg|jpg|gif|png|JPG|PNG)$\/) != null);\r\n}\r\nvar map = null;\r\nvar routes = [];\r\nvar boundbox = null;\r\nvar ajax_data = null;\r\nvar has_points = false;\r\nvar lang = '';\r\nvar point_groups = [];\r\nvar $ = jQuery;\r\nfunction open_modal(data, address, position, icon) {\r\n    \/\/ console.log(data, address, position, icon);\r\n    var content = \"\";\r\n    let title = \"\";\r\n    var has_images = false;\r\n    $.each(data, function(i, o){\r\n        if(o.name === 'CTP_TITLE'){\r\n            title = o.data;\r\n        }\r\n    });\r\n\r\n    content += \"<table class='table table-responsive ' style='width: 100%'>\";\r\n    content += \"<tbody>\";\r\n    content += \"<tr><th style='width:30%'>\u0394\u03b9\u03b5\u03cd\u03b8\u03c5\u03bd\u03c3\u03b7 \/ Address<\/th><td style='width:70%'>\" + address + \"<\/td><\/tr>\";\r\n    if (typeof data !== 'undefined') {\r\n        $.each(data, function (index, d) {\r\n            if(d.name != 'CTP_TITLE' && d.name != 'CTP_URL'){\r\n                if(!(d.name.includes('gr_') && lang === 'en') && !(d.name.includes('en') && lang === 'gr')){\r\n                    if(d.name.includes('gr_') || d.name.includes('en_')){\r\n                        d.name = d.name.substring(3);\r\n                    }\r\n                    if (d.type === 'text_box' && d.name.includes('\u03a0\u03b1\u03c1\u03b1\u03c4\u03b7\u03c1\u03ae\u03c3\u03b5\u03b9\u03c2')) {\r\n                        content += \"<tr style='padding: 2px;'><th style='padding: 2px;'>\u03a0\u03b5\u03c1\u03b9\u03b3\u03c1\u03b1\u03c6\u03ae \/ Description<\/th><td style='padding: 2px;'>\" + d.data + \"<\/td><\/tr>\";\r\n                    }\r\n                    if (d.type === 'text_box' && !d.name.includes('\u03a0\u03b1\u03c1\u03b1\u03c4\u03b7\u03c1\u03ae\u03c3\u03b5\u03b9\u03c2')) {\r\n                        content += \"<tr style='padding: 2px;'><th style='padding: 2px;'>\" + d.name + \"<\/th><td style='padding: 2px;'>\" + d.data + \"<\/td><\/tr>\";\r\n                    }\r\n                    if (d.type === 'text') {\r\n                        content += \"<tr style='padding: 2px;'><th style='padding: 2px;'>\" + d.name + \"<\/th><td style='padding: 2px;'>\" + d.data + \"<\/td><\/tr>\";\r\n                    }\r\n                    if (d.type === 'files') {\r\n                        content += \"<tr style='padding: 2px;'><th style='padding: 2px;'>\u03a6\u03c9\u03c4\u03bf\u03b3\u03c1\u03b1\u03c6\u03b9\u03ba\u03cc \u03a5\u03bb\u03b9\u03ba\u03cc \/ Images<\/th><td>\";\r\n                        \r\n                        $.each(d.data, function (i, f) {\r\n\r\n                            if (checkURL(f.path)) {\r\n                                has_images = true;\r\n                                content += \"<img style='margin-bottom: 10px;' src='\" + f.path + \"' width='100%'>\";\r\n                            }\r\n                        });\r\n                        content += \"<\/td><\/tr>\";\r\n                    }\r\n                    if(d.type === 'select'){\r\n                        content += \"<tr style='padding: 2px;'><th style='padding: 2px;'>\" + d.name + \"<\/th><td style='padding: 2px;'>\" + d.data + \"<\/td><\/tr>\";\r\n                    }\r\n                }\r\n            }\r\n        });\r\n        \r\n    }\r\n    content += \"<\/tbody>\";\r\n    content += \"<\/table>\";\r\n    $.each(data, function(i, o){\r\n        if(o.name === 'CTP_URL'){\r\n            content += \"<p> \u0394\u03b5\u03af\u03c4\u03b5 \u03c0\u03b5\u03c1\u03b9\u03c3\u03c3\u03cc\u03c4\u03b5\u03c1\u03b1: <a target='_blank' href='\" + o.data + \"'>\u03b5\u03b4\u03ce<\/a><\/p>\";\r\n        }\r\n    });\r\n    content += \"<div id='point_map' style='width:100%;height:300px'><\/div>\";\r\n    \/\/$('#modal_content').html(content);\r\n    setTimeout(function(){\r\n        map.setCenter(position); \r\n        map.setZoom(18);\r\n        \/\/var point_map = new google.maps.Map(document.getElementById('point_map'), {zoom: 20, center:position, mapTypeId: 'hybrid'});\r\n        \/\/var pointMarker = new google.maps.Marker({position: position, icon: {url: icon}, map: point_map});\r\n    }, 1000);\r\n    \/\/$('#myModal').modal('show');\r\n    CustomModal.html(\"#cp-modal\", {\r\n        header: title,\r\n        body: content\r\n    })\r\n    CustomModal.open(\"#cp-modal\");\r\n}\r\nfunction open_modal_group(files, title, info) {\r\n    var content = \"\";\r\n    \r\n    content += \"<h4>\" + title + \"<\/h4>\";\r\n    $.each(files, function (i, f) {\r\n        console.log(f);\r\n        if(checkURL(f.path)){\r\n            content += \"<div style='width:100%;padding: 20px;'><img style='margin-bottom: 10px;' src='\" + f.path + \"' width='100%'><\/div>\";\r\n        }\r\n    });\r\n    content += \"<p>\" + info + \"<\/p>\";\r\n    \/\/console.log(files);\r\n    \r\n    \r\n    $('#modal_content').html(content);\r\n\r\n    $('#myModal').modal('show');\r\n}\r\n\/\/var getColor2 = $(\".maps\").css(\"backgroundColor\"); \r\n            var rgb2hex2 = function(rgb){\r\n             rgb = rgb.match(\/^rgba?[\\s+]?\\([\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?\/i);\r\n             return (rgb && rgb.length === 4) ? \"#\" +\r\n              (\"0\" + parseInt(rgb[1],10).toString(16)).slice(-2) +\r\n              (\"0\" + parseInt(rgb[2],10).toString(16)).slice(-2) +\r\n              (\"0\" + parseInt(rgb[3],10).toString(16)).slice(-2) : '';\r\n            }\r\n            var setHue = '#314B66' \/\/rgb2hex2( getColor2 );\r\nvar styles = [\r\n                {\r\n                  stylers: [\r\n                    { hue: setHue }, \/\/ Custom Color\r\n                    { saturation: 50 }, \/\/For Gray\r\n                    \/\/{ lightness: 10 }, \/\/ Basic Color\r\n                    \/\/{ saturation: 0 }\r\n                  ]\r\n                },{\r\n                  featureType: \"road\",\r\n                  elementType: \"geometry\",\r\n                  stylers: [\r\n                    { lightness: 50 },\r\n                    { visibility: \"simplified\" }\r\n                  ]\r\n                },{\r\n                  featureType: \"road\",\r\n                  elementType: \"labels\",\r\n                  stylers: [\r\n                    { visibility: \"off\" }\r\n                  ]\r\n                }\r\n            ];\r\nfunction initMap(){\r\n    google.maps.Polyline.prototype.getBounds = function() {\r\n        var bounds = new google.maps.LatLngBounds();\r\n        this.getPath().forEach(function(item, index) {\r\n            bounds.extend(new google.maps.LatLng(item.lat(), item.lng()));\r\n        });\r\n        return bounds;\r\n    };\r\n    lang = $('#map_container').data('lang');\r\n    console.log(lang);\r\n    map = new google.maps.Map(document.getElementById('map_container'), {\r\n        scrollwheel: false,\r\n        center: { lat: 38.1749073299669, lng: 20.5875115656067 },\r\n        zoom: 10,\r\n        styles: styles\r\n    });\r\n    $('#map_options_cont').html(\"<h5>\" + (lang === 'gr' ? \"\u0395\u03c0\u03b9\u03bb\u03ad\u03be\u03c4\u03b5 \u0394\u03b9\u03b1\u03b4\u03c1\u03bf\u03bc\u03ae\" : 'Select Route') + \"<\/h5><select class='form-control form-control-sm select2' id='select_trip'><option value='-1' style='margin-bottom: 20px;'>\" + (lang === 'gr' ? \"\u038c\u03bb\u03b5\u03c2 \u03bf\u03b9 \u03b4\u03b9\u03b1\u03b4\u03c1\u03bf\u03bc\u03ad\u03c2\" : 'All Routes') + \"<\/option><\/select>\");\r\n    var resize_map = function () {\r\n        $(\"#map_container\").css(\"height\", \"600px\");\r\n        $(\"#map_container\").css(\"width\", \"100%\");\r\n    }\r\n    var soft_id = $('#map_container').data('app');\r\n    resize_map();\r\n    \r\n    $.ajax({\r\n        method: 'post',\r\n        url: 'https:\/\/kefalonia.intelligentcity.gr\/icityops\/api.php',\r\n        dataType: 'json',\r\n        data: {\r\n            op: 'get',\r\n            item: 'apo-get-software-data',\r\n            softID: soft_id\r\n        },\r\n        success: function (response) {\r\n            \r\n            ajax_data = response;\r\n            window.removeEventListener(\"resize\", resize_map);\r\n            window.addEventListener(\"resize\", resize_map);\r\n            var center = false;\r\n\r\n            \r\n            boundbox = new google.maps.LatLngBounds();\r\n            if (response.status === 'success') {\r\n                var points_all = [];\r\n                \/\/display_data_details(response.data.elements);\r\n                var html = '';\r\n                $.each(response.data.elements, function (index, elem) {\r\n                    if (elem.data.length > 0) {\r\n                        if (elem.type === 'point')\r\n                        {\r\n                            has_points = true;\r\n                        }\r\n                        if (elem.type === 'path') {\r\n                            has_routes = true;\r\n                        }\r\n                        if (elem.type === 'point' ) {\r\n                            has_points = true;\r\n                            html += \"<option value='\" + elem.sID + \"'>\" + elem.title + \"<\/option>\";\r\n                            point_groups[elem.sID] = [];\r\n                            $.each(elem.data, function (index2, obj) {\r\n                                var myLatlng = new google.maps.LatLng(obj.lat, obj.lng);\r\n                                boundbox.extend(myLatlng);\r\n                                var marker = new google.maps.Marker({\r\n                                    position: myLatlng,\r\n                                    icon: elem.icon,\r\n                                    address: obj.address,\r\n                                    point_data: obj.point_data,\r\n                                    on_map: true\r\n                                });\r\n\r\n                                point_groups[elem.sID][index2] = marker;\r\n\r\n                                marker.addListener('click', function () {\r\n                                    open_modal(marker.point_data, marker.address, myLatlng, elem.icon);\r\n                                });\r\n\r\n                                \/\/ To add the marker to the map, call setMap();\r\n                                marker.setMap(map);\r\n                            });\r\n                            console.log(html);\r\n                        }\r\n                    }\r\n                });\r\n                if(has_points){\r\n                    $('#select_trip').append(html);\r\n                    $('#map_options_cont').css('padding-bottom', '20px');\r\n                }\r\n                $.each(response.data.elements, function (index, elem2) {\r\n                    if (elem2.data.length > 0) {\r\n                         if (elem2.type == 'path' ) {\r\n                            draw_line(elem2, map, boundbox)\r\n                                \r\n                         }\r\n                        \r\n                    }\r\n                });\r\n                $('.select2').select2();\r\n                init_filter();\r\n                map.setCenter(boundbox.getCenter());\r\n                map.fitBounds(boundbox);\r\n            }\r\n\r\n        }\r\n    });\r\n    \r\n};\r\n\r\nvar init_filter = function(){\r\n    \/\/console.log(routes);\r\n    if(!has_points){\r\n        $('#select_trip').change(function(){\r\n            var val = $('#select_trip').val();\r\n            if(parseInt(val) === -1){\r\n                $.each(routes, function(i, o){\r\n                    if(o){\r\n                        o.setMap(map);\r\n                        $.each(o.markers, function(ii, oo){\r\n                            if(oo){\r\n                                oo.setMap(map);\r\n                            }\r\n                        });\r\n                    }\r\n                });\r\n                map.fitBounds(boundbox);\r\n                map.setCenter(boundbox.getCenter());\r\n            }\r\n            else{\r\n                $.each(routes, function(i, o){\r\n                    if(o){\r\n                        if(parseInt(val) === parseInt(o.shapeID)){\r\n                            o.setMap(map);\r\n                            $.each(o.markers, function(ii, oo){\r\n                                if(oo){\r\n                                    oo.setMap(map);\r\n                                }\r\n                            });\r\n                            var bb = o.getBounds();\r\n                            map.fitBounds(bb);\r\n                            map.setCenter(bb.getCenter());\r\n\r\n                        }\r\n                        else{\r\n                            o.setMap(null);\r\n                            $.each(o.markers, function(ii, oo){\r\n                                if(oo){\r\n                                    oo.setMap(null);\r\n                                }\r\n                            });\r\n                        }\r\n                    }\r\n                    \r\n                })\r\n            }\r\n        });\r\n    }\r\n    else{\r\n        $('#select_trip').change(function(){\r\n            var val = $('#select_trip').val();\r\n            var bb = new google.maps.LatLngBounds()\r\n            if(parseInt(val) !== -1){\r\n                $.each(point_groups, function(i, e){\r\n                    if(e){\r\n                        $.each(e, function(ii, oo){\r\n                            if(oo){\r\n                                oo.setMap(null);\r\n                            }\r\n                        });\r\n                        if(i === parseInt(val)){\r\n                            $.each(e, function(ii, oo){\r\n                                if(oo){\r\n                                    oo.setMap(map);\r\n                                    bb.extend(oo.getPosition());\r\n                                }\r\n                            });\r\n                        }\r\n                    }\r\n                });\r\n            }\r\n            else{\r\n                $.each(point_groups, function(i, e){\r\n                    if(e){\r\n                        $.each(e, function(ii, oo){\r\n                            if(oo){\r\n                                oo.setMap(map);\r\n                                bb.extend(oo.getPosition());\r\n                            }\r\n                        });\r\n                    }\r\n                });\r\n            }\r\n            map.setCenter(bb.getCenter());\r\n            map.fitBounds(bb);\r\n        });\r\n    }\r\n};\r\n\r\nfunction draw_line(elem, map, boundbox)\r\n{\r\n\r\n    $.each(elem.data, function (index2, obj) {\r\n        var markers = [];\r\n        var path_points = [];\r\n        $.each(obj.points, function (i, o) {\r\n            var myLatlng = new google.maps.LatLng(o.lat, o.lng);\r\n            boundbox.extend(myLatlng);\r\n            markers[i] = myLatlng;\r\n            if (o.has_data) {\r\n                var marker = new google.maps.Marker({\r\n                    position: myLatlng,\r\n                    address: o.address,\r\n                    index: index2,\r\n                    icon: elem.icon,\r\n                    point_data: o.point_data\r\n                });\r\n                path_points[i] = marker;\r\n                marker.addListener('click', function () {\r\n                    open_modal(marker.point_data, marker.address, myLatlng, elem.icon);\r\n                });\r\n                marker.setMap(map);\r\n            }\r\n        });\r\n        var path = new google.maps.Polyline({\r\n            path: markers,\r\n            geodesic: true,\r\n            strokeColor: obj.color,\r\n            strokeOpacity: 1.0,\r\n            info: obj.info,\r\n            shapeID: obj.shapeID,\r\n            title: obj.title,\r\n            files: obj.files,\r\n            strokeWeight: 4,\r\n            markers: path_points,\r\n            on_map: true\r\n        });\r\n        routes[obj.shapeID] = path;\r\n        path.addListener('click', function (e) {\r\n            open_modal_group(path.files, path.title, path.info);\r\n        });\r\n        $('#select_trip').append(\"<option value='\" + obj.shapeID + \"'>\" + path.title + \"<\/option>\")\r\n        path.setMap(map);\r\n        \r\n        \r\n    });\r\n}\t\r\n<\/script>\r\n<script src='https:\/\/maps.googleapis.com\/maps\/api\/js?key=AIzaSyAZJxP8aoy2vg16BrnlszY7dsiypZ7pB84&amp;libraries=geometry&amp;callback=initMap'><\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Powered by<\/p>\n","protected":false},"author":3,"featured_media":5062,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[86,88],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/visitkefaloniaisland.gr\/wp-json\/wp\/v2\/posts\/5070"}],"collection":[{"href":"https:\/\/visitkefaloniaisland.gr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/visitkefaloniaisland.gr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/visitkefaloniaisland.gr\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/visitkefaloniaisland.gr\/wp-json\/wp\/v2\/comments?post=5070"}],"version-history":[{"count":0,"href":"https:\/\/visitkefaloniaisland.gr\/wp-json\/wp\/v2\/posts\/5070\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/visitkefaloniaisland.gr\/wp-json\/wp\/v2\/media\/5062"}],"wp:attachment":[{"href":"https:\/\/visitkefaloniaisland.gr\/wp-json\/wp\/v2\/media?parent=5070"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/visitkefaloniaisland.gr\/wp-json\/wp\/v2\/categories?post=5070"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/visitkefaloniaisland.gr\/wp-json\/wp\/v2\/tags?post=5070"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}