{"id":4495,"date":"2023-11-07T22:33:03","date_gmt":"2023-11-07T21:33:03","guid":{"rendered":"https:\/\/cldt.hr\/interaktivna-karta\/"},"modified":"2025-11-16T20:14:38","modified_gmt":"2025-11-16T19:14:38","slug":"interactive-map","status":"publish","type":"page","link":"https:\/\/cldt.hr\/en\/interactive-map\/","title":{"rendered":"Interactive Map"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row gap=&#8221;20&#8243; content_placement=&#8221;middle&#8221;][vc_column width=&#8221;1\/2&#8243;][vc_message icon_fontawesome=&#8221;fas fa-mobile-alt&#8221;]<\/p>\n<h3 style=\"margin: 0;\"><a href=\"https:\/\/cldt.hr\/en\/navigation-mobile-app\/\" target=\"_blank\" rel=\"noopener noreferrer\">DOWNLOAD MOBILE APP<\/a><\/h3>\n<p>[\/vc_message][\/vc_column][vc_column width=&#8221;1\/2&#8243;][vc_message icon_fontawesome=&#8221;fas fa-route&#8221;]<\/p>\n<h3 style=\"margin: 0;\"><a title=\"DOWNLOAD GPX ROUTE\" href=\"https:\/\/cldt.hr\/en\/trail\/#gpx\">DOWNLOAD GPX ROUTE<\/a><\/h3>\n<p>[\/vc_message][\/vc_column][\/vc_row][vc_row el_class=&#8221;vc-map-row-container&#8221; css=&#8221;.vc_custom_1701372050253{padding-top: 60px !important;}&#8221;][vc_column][vc_column_text]<\/p>\n<div id=\"ShortCode_Div\" style=\"text-align: center;\">\n\n        <div id=\"map_ol3js_1\"\n             class=\"map undefined\"\n             data-map_name=\"undefined\"\n             data-map=\"map_ol3js_1\"\n             style=\"width:100%;\n                    max-width:100%;\n                    height:700px;\n                    display:block;\n                    overflow:hidden;\n                    border:none !important;\">\n          <div id=\"map_ol3js_1_popup\" class=\"ol-popup\">\n            <a href=\"#\" id=\"map_ol3js_1_popup-closer\" class=\"ol-popup-closer\"><\/a>\n            <div id=\"map_ol3js_1_popup-content\"><\/div>\n          <\/div>\n        <\/div>\n    \n\n\t\t\t\t<script type=\"text\/javascript\">\n\t\t\t\t\ttranslations['openlayer'] = \"open layer\";\n\t\t\t\t\ttranslations['openlayerAtStartup'] = \"open layer at startup\";\n\t\t\t\t\ttranslations['generateLink'] = \"link to this map with opened layers\";\n\t\t\t\t\ttranslations['shortDescription'] = \"short description\";\n\t\t\t\t\ttranslations['generatedShortCode'] = \"to get a text control link paste this code in your wordpress editor\";\n\t\t\t\t\ttranslations['closeLayer'] = \"close layer\";\n\t\t\t\t\ttranslations['cantGenerateLink'] = \"put this string in the existing map short code to control this map\";\n\t\t\t  <\/script>\n\n\n\t\t\t  <script type=\"text\/javascript\">\n\t\t\t  vectorM['map_ol3js_1'] = [];\n\t        \n        var raster = getTileLayer(\"opentopomap\",\"NoKey\");\t\t\t\n\n\t\t\t  var map_ol3js_1 = new ol.Map({\n\t\t\t\tinteractions: ol.interaction.defaults.defaults({mouseWheelZoom:false}),\n\t\t\t\tlayers: [raster],\n\t\t\t\ttarget: \"map_ol3js_1\",\n\t\t\t\tview: new ol.View({\n\t\t\t\t  center: ol.proj.transform([6.378,58.213], \"EPSG:4326\", \"EPSG:3857\"),\n\t\t\t\t  zoom: 9\n\t\t\t\t})\n\t\t\t  });\n\t\t\t  \n    var style0 = {\n      \"Point\": [new ol.style.Style({\n\n          image: new ol.style.Icon({\n            anchor: [0.5, 41],\n            anchorXUnits: \"fraction\",\n            anchorYUnits: \"pixels\",\n            opacity: 0.75,\n            src: \"https:\/\/cldt.hr\/wp-content\/plugins\/osm\/icons\/mic_blue_pinother_02.png\"\n          })\n      })],\n\n      \"LineString\": [new ol.style.Style({\n        stroke: new ol.style.Stroke({\n          color: \"#000\",\n          width: 8\n        })\n      })],\n      \"MultiLineString\": [new ol.style.Style({\n        stroke: new ol.style.Stroke({\n          color: \"#000\",\n          width: 4\n        })\n      })]\n    };\n\t\t  var vectorL0 = new ol.layer.Vector({\n\t\t\t\tsource: new ol.source.Vector({\n\t\t\t\turl:\"https:\/\/cldt.hr\/wp-content\/uploads\/2023\/11\/CLDT_Croatian_Long_Distance_Trail_2023_v1.gpx\",\n\t\t\t\tformat: new ol.format.GPX({\n\t\t\t\t\textractStyles: false\n\t\t\t\t})\n\t\t\t}),\n\t\t\tzIndex: 92,\n\t\t\tstyle: function(feature, resolution) {return style0[feature.getGeometry().getType()];}\n\t\t  });\n\t\t  map_ol3js_1.addLayer(vectorL0);\n      var extension1 = ol.extent.createEmpty();\n      var curZoom1 = map_ol3js_1.getView().getZoom();\n\n      map_ol3js_1.getLayers().forEach(function(layer){\n         if(!layer.get(\"id\")) {     \n            layer.once(\"change\", function(e){\n               ol.extent.extend(extension1, (layer.getSource().getExtent()));\n               map_ol3js_1.getView().fit(extension1, {padding: [50, 50, 50, 50]});\n            });\n         }\n      });\n\n    \naddControls2Map(map_ol3js_1,1,0,3,1,5,6,7,1,1);\nosm_addPopupClickhandler(map_ol3js_1,  \"map_ol3js_1\"); \nosm_addMouseHover(map_ol3js_1); <\/script>\n<\/div>\n<p>[\/vc_column_text][\/vc_column][\/vc_row]<\/p><\/div>","protected":false},"excerpt":{"rendered":"<p>[vc_row gap=&#8221;20&#8243; content_placement=&#8221;middle&#8221;][vc_column width=&#8221;1\/2&#8243;][vc_message icon_fontawesome=&#8221;fas fa-mobile-alt&#8221;] DOWNLOAD MOBILE APP [\/vc_message][\/vc_column][vc_column width=&#8221;1\/2&#8243;][vc_message icon_fontawesome=&#8221;fas fa-route&#8221;] DOWNLOAD GPX ROUTE [\/vc_message][\/vc_column][\/vc_row][vc_row el_class=&#8221;vc-map-row-container&#8221; css=&#8221;.vc_custom_1701372050253{padding-top: 60px !important;}&#8221;][vc_column][vc_column_text] [\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_lmt_disableupdate":"no","_lmt_disable":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-4495","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/cldt.hr\/en\/wp-json\/wp\/v2\/pages\/4495","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cldt.hr\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cldt.hr\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cldt.hr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cldt.hr\/en\/wp-json\/wp\/v2\/comments?post=4495"}],"version-history":[{"count":2,"href":"https:\/\/cldt.hr\/en\/wp-json\/wp\/v2\/pages\/4495\/revisions"}],"predecessor-version":[{"id":5448,"href":"https:\/\/cldt.hr\/en\/wp-json\/wp\/v2\/pages\/4495\/revisions\/5448"}],"wp:attachment":[{"href":"https:\/\/cldt.hr\/en\/wp-json\/wp\/v2\/media?parent=4495"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}