{"id":2494,"date":"2025-10-03T10:36:46","date_gmt":"2025-10-03T10:36:46","guid":{"rendered":"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/?page_id=2494"},"modified":"2025-10-03T11:53:14","modified_gmt":"2025-10-03T11:53:14","slug":"kml-leaflet-maps","status":"publish","type":"page","link":"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/kml-leaflet-maps\/","title":{"rendered":"KML \/ Leaflet Maps"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\">Mis on KML?<\/h3>\n\n\n\n<p><strong>KML<\/strong> (Keyhole Markup Language) on failiformaat geograafilise info esitamiseks. See on XML-p\u00f5hine keel, millega saab kirjeldada kaarte, kohti, jooni, alasid, m\u00e4rke ja muud geograafilist infot. Algup\u00e4raselt t\u00f6\u00f6tas v\u00e4lja Google, kasutatakse n\u00e4iteks Google Earthis ja muudes kaartide rakendustes. KML-faile kasutatakse, et jagada ja kuvada erinevaid geograafilisi objekte ja kihte.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Mis on Leaflet?<\/h3>\n\n\n\n<p><strong>Leaflet<\/strong> on populaarne JavaScripti raamatukogu (library), mis v\u00f5imaldab luua interaktiivseid veebikaarte. See on kerge, kiire ja lihtne kasutada. Leaflet v\u00f5imaldab kuvada erinevaid kaardikihti, markereid, jooni, pol\u00fcgoone jne. Tavaliselt kasutatakse koos kaartide teenustega nagu OpenStreetMap v\u00f5i Google Maps. Leaflet on avatud l\u00e4htekoodiga ja toetab erinevaid laiendusi (plugin\u2019e), n\u00e4iteks KML-failide laadimist.<\/p>\n\n\n\n<p class=\"has-large-font-size\">Mis on OpenLayers?<\/p>\n\n\n\n<p>OpenLayers on v\u00f5imas ja paindlik JavaScripti teek keerukate veebikaartide loomiseks. See sobib ideaalselt GIS-rakenduste, suure andmemahuga projektide, avatud l\u00e4htekoodiga algatuste ja offline-kaardilahenduste jaoks. Teek pakub detailset kontrolli kaardi \u00fcle, toetab paljusid andmeformaate ja v\u00f5imaldab kohandatud stiile. Kuigi selle \u00f5ppimisk\u00f5ver on j\u00e4rsem kui lihtsamatel teekidel, on OpenLayers parim valik, kui on vaja ulatuslikku funktsionaalsust, avatud standardite tuge ja kohandatavust.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Ava Google My Maps<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large wp-duotone-unset-1\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"272\" src=\"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/10\/E3277486-7C2B-4D93-95DB-614D7DC595B9-1024x272.png\" alt=\"\" class=\"wp-image-2505\" srcset=\"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/10\/E3277486-7C2B-4D93-95DB-614D7DC595B9-1024x272.png 1024w, https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/10\/E3277486-7C2B-4D93-95DB-614D7DC595B9-300x80.png 300w, https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/10\/E3277486-7C2B-4D93-95DB-614D7DC595B9-768x204.png 768w, https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/10\/E3277486-7C2B-4D93-95DB-614D7DC595B9-150x40.png 150w, https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/10\/E3277486-7C2B-4D93-95DB-614D7DC595B9.png 1056w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>Looge m\u00f5ned punktid ja marsruudid<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large wp-duotone-unset-2\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"613\" src=\"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/10\/C1A4218C-32E5-46E6-9485-279A8CAFB46B-1024x613.png\" alt=\"\" class=\"wp-image-2507\" srcset=\"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/10\/C1A4218C-32E5-46E6-9485-279A8CAFB46B-1024x613.png 1024w, https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/10\/C1A4218C-32E5-46E6-9485-279A8CAFB46B-300x180.png 300w, https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/10\/C1A4218C-32E5-46E6-9485-279A8CAFB46B-768x460.png 768w, https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/10\/C1A4218C-32E5-46E6-9485-279A8CAFB46B-150x90.png 150w, https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/10\/C1A4218C-32E5-46E6-9485-279A8CAFB46B.png 1344w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>Salvesta KML-ina<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large wp-duotone-unset-3\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"658\" src=\"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/10\/9A718162-E2A4-435B-84F2-4C65D041098C-1024x658.png\" alt=\"\" class=\"wp-image-2509\" srcset=\"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/10\/9A718162-E2A4-435B-84F2-4C65D041098C-1024x658.png 1024w, https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/10\/9A718162-E2A4-435B-84F2-4C65D041098C-300x193.png 300w, https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/10\/9A718162-E2A4-435B-84F2-4C65D041098C-768x493.png 768w, https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/10\/9A718162-E2A4-435B-84F2-4C65D041098C-150x96.png 150w, https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/10\/9A718162-E2A4-435B-84F2-4C65D041098C.png 1259w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full wp-duotone-unset-4\"><img loading=\"lazy\" decoding=\"async\" width=\"757\" height=\"265\" src=\"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/10\/AAA8F035-0DE4-4FD4-913B-A32CF610DAE8.png\" alt=\"\" class=\"wp-image-2511\" srcset=\"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/10\/AAA8F035-0DE4-4FD4-913B-A32CF610DAE8.png 757w, https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/10\/AAA8F035-0DE4-4FD4-913B-A32CF610DAE8-300x105.png 300w, https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/10\/AAA8F035-0DE4-4FD4-913B-A32CF610DAE8-150x53.png 150w\" sizes=\"auto, (max-width: 757px) 100vw, 757px\" \/><\/figure>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li>Kasutage selle kuvamiseks HTML-i<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:clamp(16px, 1rem, 24px);font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#e1e4e8;--cbp-line-number-width:calc(2 * 0.6 * 1rem);line-height:clamp(20px, 1.25rem, 30px);--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#2f363c;color:#d3d7dd\">HTML<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\n  &lt;head>\n    &lt;meta charset=\"UTF-8\" \/>\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n    &lt;title>KML&lt;\/title>\n    &lt;!-- Leaflet -->\n    &lt;!-- https:\/\/leafletjs.com\/ -->\n    &lt;link\n      rel=\"stylesheet\"\n      href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\"\n      integrity=\"sha256-p4NxAoJBhIIN+hmNHrzRCf9tD\/miZyoHS5obTRR9BMY=\"\n      crossorigin=\"\"\n    \/>\n    &lt;script\n      src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\"\n      integrity=\"sha256-20nQCchB9co0qIjJZRGuk2\/Z9VM+kNiyxNV1lvTlZBo=\"\n      crossorigin=\"\"\n    >&lt;\/script>\n    &lt;!-- Leaflet Omnivore -->\n    &lt;!-- https:\/\/github.com\/mapbox\/leaflet-omnivore -->\n    &lt;script src=\"\/\/api.tiles.mapbox.com\/mapbox.js\/plugins\/leaflet-omnivore\/v0.3.1\/leaflet-omnivore.min.js\">&lt;\/script>\n    &lt;style>\n      html,\n      body {\n        padding: 0;\n        margin: 0;\n      }\n      h1 {\n        text-align: center;\n      }\n      #map {\n        height: 85vh;\n        width: 90%;\n        margin: auto;\n      }\n    &lt;\/style>\n  &lt;\/head>\n  &lt;body>\n    &lt;h1>KML marsruudid&lt;\/h1>\n    &lt;div id=\"map\">&lt;\/div>\n    &lt;script>\n      var map = L.map(\"map\");\n      \/\/ https:\/\/leafletjs.com\/\n      L.tileLayer(\"https:\/\/tile.openstreetmap.org\/{z}\/{x}\/{y}.png\", {\n        attribution:\n          '&copy; &lt;a href=\"https:\/\/www.openstreetmap.org\/copyright\">OpenStreetMap&lt;\/a> contributors',\n      }).addTo(map);\n      omnivore\n        .kml(\"KML.kml\")\n        .on(\"ready\", function () {\n          map.fitBounds(this.getBounds());\n        })\n        .addTo(map);\n    &lt;\/script>\n  &lt;\/body>\n&lt;\/html><\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #E1E4E8\">&lt;!<\/span><span style=\"color: #85E89D\">DOCTYPE<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">lang<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;en&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">meta<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">charset<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;UTF-8&quot;<\/span><span style=\"color: #E1E4E8\"> \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">meta<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">name<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;viewport&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">content<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;width=device-width, initial-scale=1.0&quot;<\/span><span style=\"color: #E1E4E8\"> \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;KML&lt;\/<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #6A737D\">&lt;!-- Leaflet --&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #6A737D\">&lt;!-- https:\/\/leafletjs.com\/ --&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">link<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #B392F0\">rel<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;stylesheet&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #B392F0\">href<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #B392F0\">integrity<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;sha256-p4NxAoJBhIIN+hmNHrzRCf9tD\/miZyoHS5obTRR9BMY=&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #B392F0\">crossorigin<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">script<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #B392F0\">src<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #B392F0\">integrity<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;sha256-20nQCchB9co0qIjJZRGuk2\/Z9VM+kNiyxNV1lvTlZBo=&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #B392F0\">crossorigin<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &gt;&lt;\/<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #6A737D\">&lt;!-- Leaflet Omnivore --&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #6A737D\">&lt;!-- https:\/\/github.com\/mapbox\/leaflet-omnivore --&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">src<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;\/\/api.tiles.mapbox.com\/mapbox.js\/plugins\/leaflet-omnivore\/v0.3.1\/leaflet-omnivore.min.js&quot;<\/span><span style=\"color: #E1E4E8\">&gt;&lt;\/<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">style<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #79B8FF\">padding<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">0<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #79B8FF\">margin<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">0<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #85E89D\">h1<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #79B8FF\">text-align<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">center<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #B392F0\">#map<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #79B8FF\">height<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">85<\/span><span style=\"color: #F97583\">vh<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #79B8FF\">width<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">90<\/span><span style=\"color: #F97583\">%<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #79B8FF\">margin<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">auto<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;\/<\/span><span style=\"color: #85E89D\">style<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">h1<\/span><span style=\"color: #E1E4E8\">&gt;KML marsruudid&lt;\/<\/span><span style=\"color: #85E89D\">h1<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;map&quot;<\/span><span style=\"color: #E1E4E8\">&gt;&lt;\/<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #F97583\">var<\/span><span style=\"color: #E1E4E8\"> map <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">L<\/span><span style=\"color: #E1E4E8\">.<\/span><span style=\"color: #B392F0\">map<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&quot;map&quot;<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #6A737D\">\/\/ https:\/\/leafletjs.com\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">L<\/span><span style=\"color: #E1E4E8\">.<\/span><span style=\"color: #B392F0\">tileLayer<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&quot;https:\/\/tile.openstreetmap.org\/{z}\/{x}\/{y}.png&quot;<\/span><span style=\"color: #E1E4E8\">, {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        attribution:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">          <\/span><span style=\"color: #9ECBFF\">&#39;\u00a9 &lt;a href=&quot;https:\/\/www.openstreetmap.org\/copyright&quot;&gt;OpenStreetMap&lt;\/a&gt; contributors&#39;<\/span><span style=\"color: #E1E4E8\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      }).<\/span><span style=\"color: #B392F0\">addTo<\/span><span style=\"color: #E1E4E8\">(map);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      omnivore<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        .<\/span><span style=\"color: #B392F0\">kml<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&quot;KML.kml&quot;<\/span><span style=\"color: #E1E4E8\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        .<\/span><span style=\"color: #B392F0\">on<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&quot;ready&quot;<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\"> () {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">          map.<\/span><span style=\"color: #B392F0\">fitBounds<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #79B8FF\">this<\/span><span style=\"color: #E1E4E8\">.<\/span><span style=\"color: #B392F0\">getBounds<\/span><span style=\"color: #E1E4E8\">());<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        })<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        .<\/span><span style=\"color: #B392F0\">addTo<\/span><span style=\"color: #E1E4E8\">(map);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;\/<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<figure class=\"wp-block-image size-full wp-duotone-unset-5\"><img loading=\"lazy\" decoding=\"async\" width=\"928\" height=\"648\" src=\"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/10\/0F0DD1D8-4FB2-427B-BFCD-FEE1A259E5EC.png\" alt=\"\" class=\"wp-image-2531\" srcset=\"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/10\/0F0DD1D8-4FB2-427B-BFCD-FEE1A259E5EC.png 928w, https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/10\/0F0DD1D8-4FB2-427B-BFCD-FEE1A259E5EC-300x209.png 300w, https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/10\/0F0DD1D8-4FB2-427B-BFCD-FEE1A259E5EC-768x536.png 768w, https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/10\/0F0DD1D8-4FB2-427B-BFCD-FEE1A259E5EC-150x105.png 150w\" sizes=\"auto, (max-width: 928px) 100vw, 928px\" \/><\/figure>\n\n\n\n<p class=\"has-large-font-size\"><a href=\"https:\/\/vladislavkudriashev23.thkit.ee\/KML\">https:\/\/vladislavkudriashev23.thkit.ee\/KML<\/a><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Mis on KML? KML (Keyhole Markup Language) on failiformaat geograafilise info esitamiseks. See on XML-p\u00f5hine keel, millega saab kirjeldada kaarte, kohti, jooni, alasid, m\u00e4rke ja muud geograafilist infot. Algup\u00e4raselt t\u00f6\u00f6tas v\u00e4lja Google, kasutatakse n\u00e4iteks Google Earthis ja muudes kaartide rakendustes. KML-faile kasutatakse, et jagada ja kuvada erinevaid geograafilisi objekte ja kihte. Mis on Leaflet? Leaflet [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2494","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-json\/wp\/v2\/pages\/2494","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-json\/wp\/v2\/comments?post=2494"}],"version-history":[{"count":27,"href":"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-json\/wp\/v2\/pages\/2494\/revisions"}],"predecessor-version":[{"id":2533,"href":"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-json\/wp\/v2\/pages\/2494\/revisions\/2533"}],"wp:attachment":[{"href":"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-json\/wp\/v2\/media?parent=2494"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}