KML/ Leaflet Maps

Mis on KML?

KML (Keyhole Markup Language) see on XML põhine failiformaat, mida kasutatakse geograafilise informatsiooni esitamiseks ja vahetamiseks. KML võimaldab kirjeldada kohti (punktid), jooni (teed), polügoone (piirkonnad), ikoone ja muud, mida saab visualiseerida kaardirakendustes nagu Google Earth või Leaflet.

KML on loodud selleks, et:

  • Kirjutada ja jagada geograafilisi koordinaate.
  • Visualiseerida kohti ja marsruute kaardil.
  • Salvestada erinevaid geoobjekte ühes failis.

KML-faili loomine ja kodukoha näitamine:

Läheme saidile Google my maps, avame logime sisse ja klikkime nuppule loo uus kaart

Vasakul asuvas paneelis saab vaadata sisu.
Selles paneelis saab nime muutmiseks sellel klikata ning muuta ka värve, nimesid ja teisi seadeid.

Selleks, et lisada teed klikkime olevale nuppule

Loome marsruudi, kus määrame kohad, kust ja kuhu meie joon peab viima.
Saame valida sõiduvahendiks auto, jalgratta või jalgsi. Teisi transpordiliike valida ei saa või ma ei leidnud neid valikuid.

Tulemus:

HTML fail:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <title>Карта с маршрутом</title>

  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.css" />

  <style>
    #map {
      width: 100vw;
      height: 100vh;
      margin: 0;
      padding: 0;
    }
    body {
      margin: 0;
    }
  </style>
</head>
<body>

<div id="map"></div>

<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-omnivore@0.3.4/leaflet-omnivore.min.js"></script>
<script src="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.js"></script>

<script>
 
  const map = L.map('map').setView([59.44, 24.72], 13);

  
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
  }).addTo(map);

  
  omnivore.kml("map.kml")
    .on("ready", function() {
      map.fitBounds(this.getBounds());
    })
    .addTo(map);

  
</script>

</body>
</html>

KML fail:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
  <Document>
    <name>Map</name>
    <description/>
    <Style id="icon-1899-0288D1-nodesc-normal">
      <IconStyle>
        <color>ffd18802</color>
        <scale>1</scale>
        <Icon>
          <href>https://www.gstatic.com/mapspro/images/stock/503-wht-blank_maps.png</href>
        </Icon>
        <hotSpot x="32" xunits="pixels" y="64" yunits="insetPixels"/>
      </IconStyle>
      <LabelStyle>
        <scale>0</scale>
      </LabelStyle>
      <BalloonStyle>
        <text><![CDATA[<h3>$[name]</h3>]]></text>
      </BalloonStyle>
    </Style>
    <Style id="icon-1899-0288D1-nodesc-highlight">
      <IconStyle>
        <color>ffd18802</color>
        <scale>1</scale>
        <Icon>
          <href>https://www.gstatic.com/mapspro/images/stock/503-wht-blank_maps.png</href>
        </Icon>
        <hotSpot x="32" xunits="pixels" y="64" yunits="insetPixels"/>
      </IconStyle>
      <LabelStyle>
        <scale>1</scale>
      </LabelStyle>
      <BalloonStyle>
        <text><![CDATA[<h3>$[name]</h3>]]></text>
      </BalloonStyle>
    </Style>
    <StyleMap id="icon-1899-0288D1-nodesc">
      <Pair>
        <key>normal</key>
        <styleUrl>#icon-1899-0288D1-nodesc-normal</styleUrl>
      </Pair>
      <Pair>
        <key>highlight</key>
        <styleUrl>#icon-1899-0288D1-nodesc-highlight</styleUrl>
      </Pair>
    </StyleMap>
    <Style id="icon-1899-DB4436-nodesc-normal">
      <IconStyle>
        <color>ff3644db</color>
        <scale>1</scale>
        <Icon>
          <href>https://www.gstatic.com/mapspro/images/stock/503-wht-blank_maps.png</href>
        </Icon>
        <hotSpot x="32" xunits="pixels" y="64" yunits="insetPixels"/>
      </IconStyle>
      <LabelStyle>
        <scale>0</scale>
      </LabelStyle>
      <BalloonStyle>
        <text><![CDATA[<h3>$[name]</h3>]]></text>
      </BalloonStyle>
    </Style>
    <Style id="icon-1899-DB4436-nodesc-highlight">
      <IconStyle>
        <color>ff3644db</color>
        <scale>1</scale>
        <Icon>
          <href>https://www.gstatic.com/mapspro/images/stock/503-wht-blank_maps.png</href>
        </Icon>
        <hotSpot x="32" xunits="pixels" y="64" yunits="insetPixels"/>
      </IconStyle>
      <LabelStyle>
        <scale>1</scale>
      </LabelStyle>
      <BalloonStyle>
        <text><![CDATA[<h3>$[name]</h3>]]></text>
      </BalloonStyle>
    </Style>
    <StyleMap id="icon-1899-DB4436-nodesc">
      <Pair>
        <key>normal</key>
        <styleUrl>#icon-1899-DB4436-nodesc-normal</styleUrl>
      </Pair>
      <Pair>
        <key>highlight</key>
        <styleUrl>#icon-1899-DB4436-nodesc-highlight</styleUrl>
      </Pair>
    </StyleMap>
    <Style id="line-1267FF-5000-nodesc-normal">
      <LineStyle>
        <color>ffff6712</color>
        <width>5</width>
      </LineStyle>
      <BalloonStyle>
        <text><![CDATA[<h3>$[name]</h3>]]></text>
      </BalloonStyle>
    </Style>
    <Style id="line-1267FF-5000-nodesc-highlight">
      <LineStyle>
        <color>ffff6712</color>
        <width>7.5</width>
      </LineStyle>
      <BalloonStyle>
        <text><![CDATA[<h3>$[name]</h3>]]></text>
      </BalloonStyle>
    </Style>
    <StyleMap id="line-1267FF-5000-nodesc">
      <Pair>
        <key>normal</key>
        <styleUrl>#line-1267FF-5000-nodesc-normal</styleUrl>
      </Pair>
      <Pair>
        <key>highlight</key>
        <styleUrl>#line-1267FF-5000-nodesc-highlight</styleUrl>
      </Pair>
    </StyleMap>
    <Style id="poly-01579B-1200-77-nodesc-normal">
      <LineStyle>
        <color>ff9b5701</color>
        <width>1.2</width>
      </LineStyle>
      <PolyStyle>
        <color>4d9b5701</color>
        <fill>1</fill>
        <outline>1</outline>
      </PolyStyle>
      <BalloonStyle>
        <text><![CDATA[<h3>$[name]</h3>]]></text>
      </BalloonStyle>
    </Style>
    <Style id="poly-01579B-1200-77-nodesc-highlight">
      <LineStyle>
        <color>ff9b5701</color>
        <width>1.8</width>
      </LineStyle>
      <PolyStyle>
        <color>4d9b5701</color>
        <fill>1</fill>
        <outline>1</outline>
      </PolyStyle>
      <BalloonStyle>
        <text><![CDATA[<h3>$[name]</h3>]]></text>
      </BalloonStyle>
    </Style>
    <StyleMap id="poly-01579B-1200-77-nodesc">
      <Pair>
        <key>normal</key>
        <styleUrl>#poly-01579B-1200-77-nodesc-normal</styleUrl>
      </Pair>
      <Pair>
        <key>highlight</key>
        <styleUrl>#poly-01579B-1200-77-nodesc-highlight</styleUrl>
      </Pair>
    </StyleMap>
    <Style id="poly-1A237E-1200-77-nodesc-normal">
      <LineStyle>
        <color>ff7e231a</color>
        <width>1.2</width>
      </LineStyle>
      <PolyStyle>
        <color>4d7e231a</color>
        <fill>1</fill>
        <outline>1</outline>
      </PolyStyle>
      <BalloonStyle>
        <text><![CDATA[<h3>$[name]</h3>]]></text>
      </BalloonStyle>
    </Style>
    <Style id="poly-1A237E-1200-77-nodesc-highlight">
      <LineStyle>
        <color>ff7e231a</color>
        <width>1.8</width>
      </LineStyle>
      <PolyStyle>
        <color>4d7e231a</color>
        <fill>1</fill>
        <outline>1</outline>
      </PolyStyle>
      <BalloonStyle>
        <text><![CDATA[<h3>$[name]</h3>]]></text>
      </BalloonStyle>
    </Style>
    <StyleMap id="poly-1A237E-1200-77-nodesc">
      <Pair>
        <key>normal</key>
        <styleUrl>#poly-1A237E-1200-77-nodesc-normal</styleUrl>
      </Pair>
      <Pair>
        <key>highlight</key>
        <styleUrl>#poly-1A237E-1200-77-nodesc-highlight</styleUrl>
      </Pair>
    </StyleMap>
    <Style id="poly-558B2F-1200-77-nodesc-normal">
      <LineStyle>
        <color>ff2f8b55</color>
        <width>1.2</width>
      </LineStyle>
      <PolyStyle>
        <color>4d2f8b55</color>
        <fill>1</fill>
        <outline>1</outline>
      </PolyStyle>
      <BalloonStyle>
        <text><![CDATA[<h3>$[name]</h3>]]></text>
      </BalloonStyle>
    </Style>
    <Style id="poly-558B2F-1200-77-nodesc-highlight">
      <LineStyle>
        <color>ff2f8b55</color>
        <width>1.8</width>
      </LineStyle>
      <PolyStyle>
        <color>4d2f8b55</color>
        <fill>1</fill>
        <outline>1</outline>
      </PolyStyle>
      <BalloonStyle>
        <text><![CDATA[<h3>$[name]</h3>]]></text>
      </BalloonStyle>
    </Style>
    <StyleMap id="poly-558B2F-1200-77-nodesc">
      <Pair>
        <key>normal</key>
        <styleUrl>#poly-558B2F-1200-77-nodesc-normal</styleUrl>
      </Pair>
      <Pair>
        <key>highlight</key>
        <styleUrl>#poly-558B2F-1200-77-nodesc-highlight</styleUrl>
      </Pair>
    </StyleMap>
    <Folder>
      <name>Слой без названия</name>
      <Placemark>
        <name>Lastekodu tn 6</name>
        <styleUrl>#icon-1899-0288D1-nodesc</styleUrl>
        <Point>
          <coordinates>
            24.7633895,59.4316104,0
          </coordinates>
        </Point>
      </Placemark>
      <Placemark>
        <name>Kodu</name>
        <styleUrl>#poly-1A237E-1200-77-nodesc</styleUrl>
        <Polygon>
          <outerBoundaryIs>
            <LinearRing>
              <tessellate>1</tessellate>
              <coordinates>
                24.7629045,59.4317823,0
                24.7628267,59.4316731,0
                24.7638674,59.4314494,0
                24.7639532,59.4315531,0
                24.7629045,59.4317823,0
              </coordinates>
            </LinearRing>
          </outerBoundaryIs>
        </Polygon>
      </Placemark>
      <Placemark>
        <name>THK</name>
        <styleUrl>#icon-1899-0288D1-nodesc</styleUrl>
        <Point>
          <coordinates>
            24.7052629,59.4116016,0
          </coordinates>
        </Point>
      </Placemark>
      <Placemark>
        <name>TTHK</name>
        <styleUrl>#poly-01579B-1200-77-nodesc</styleUrl>
        <Polygon>
          <outerBoundaryIs>
            <LinearRing>
              <tessellate>1</tessellate>
              <coordinates>
                24.705552,59.4116971,0
                24.7050853,59.4118009,0
                24.705037,59.4117326,0
                24.7046937,59.4118091,0
                24.7050477,59.4122431,0
                24.7044952,59.4123468,0
                24.7041036,59.4119456,0
                24.7037388,59.4120247,0
                24.703653,59.4119183,0
                24.7053964,59.4115525,0
                24.705552,59.4116971,0
              </coordinates>
            </LinearRing>
          </outerBoundaryIs>
        </Polygon>
      </Placemark>
      <Placemark>
        <name>TTHK Area</name>
        <styleUrl>#poly-558B2F-1200-77-nodesc</styleUrl>
        <Polygon>
          <outerBoundaryIs>
            <LinearRing>
              <tessellate>1</tessellate>
              <coordinates>
                24.7030643,59.4119075,0
                24.7055534,59.411165,0
                24.707034,59.4121477,0
                24.7040299,59.4127592,0
                24.7030643,59.4119075,0
              </coordinates>
            </LinearRing>
          </outerBoundaryIs>
        </Polygon>
      </Placemark>
      <Placemark>
        <name>Kodu Area</name>
        <styleUrl>#poly-558B2F-1200-77-nodesc</styleUrl>
        <Polygon>
          <outerBoundaryIs>
            <LinearRing>
              <tessellate>1</tessellate>
              <coordinates>
                24.7627006,59.4320113,0
                24.762368,59.4315585,0
                24.7641061,59.4312256,0
                24.764503,59.4317167,0
                24.7627006,59.4320113,0
              </coordinates>
            </LinearRing>
          </outerBoundaryIs>
        </Polygon>
      </Placemark>
    </Folder>
    <Folder>
      <name>Маршрут Lastekodu tn 6 – Tallinn Industrial Education Center, Sõpruse puiestee, Таллин</name>
      <Placemark>
        <name>Маршрут Lastekodu tn 6 – Tallinn Industrial Education Center, Sõpruse puiestee, Таллин</name>
        <styleUrl>#line-1267FF-5000-nodesc</styleUrl>
        <LineString>
          <tessellate>1</tessellate>
          <coordinates>
            24.76333,59.43154,0
            24.76269,59.43168,0
            24.76251,59.43152,0
            24.76212,59.43122,0
            24.76225,59.43114,0
            24.76231,59.43109,0
            24.76234,59.43105,0
            24.76235,59.43103,0
            24.76237,59.431,0
            24.76237,59.43094,0
            24.76235,59.43086,0
            24.7623,59.43071,0
            24.76222,59.43049,0
            24.76172,59.43059,0
            24.76154,59.43023,0
            24.76151,59.43008,0
            24.76127,59.42977,0
            24.7612,59.42951,0
            24.76082,59.4297,0
            24.76064,59.42979,0
            24.76045,59.42989,0
            24.7601,59.43001,0
            24.75986,59.43012,0
            24.75963,59.43022,0
            24.75961,59.43023,0
            24.75941,59.43035,0
            24.75929,59.43042,0
            24.75926,59.43043,0
            24.75891,59.43028,0
            24.75874,59.43021,0
            24.7579,59.42997,0
            24.75743,59.42979,0
            24.75699,59.42966,0
            24.75688,59.42961,0
            24.7563,59.42944,0
            24.75563,59.4293,0
            24.75524,59.42922,0
            24.75501,59.42918,0
            24.75435,59.42909,0
            24.75392,59.42903,0
            24.75346,59.42896,0
            24.75335,59.42894,0
            24.75286,59.42886,0
            24.75172,59.42869,0
            24.75162,59.42868,0
            24.75075,59.42852,0
            24.75039,59.42846,0
            24.75012,59.42841,0
            24.7495,59.42832,0
            24.74813,59.42811,0
            24.74777,59.42806,0
            24.74755,59.428,0
            24.7474,59.42796,0
            24.74517,59.42759,0
            24.74462,59.42751,0
            24.74426,59.42744,0
            24.74384,59.42738,0
            24.74362,59.42736,0
            24.74355,59.42735,0
            24.7434,59.42734,0
            24.74269,59.42729,0
            24.74254,59.42729,0
            24.74242,59.42729,0
            24.74224,59.42729,0
            24.74221,59.42729,0
            24.74217,59.42729,0
            24.74077,59.42728,0
            24.74076,59.42728,0
            24.74054,59.42728,0
            24.74031,59.42724,0
            24.73975,59.42726,0
            24.73867,59.42732,0
            24.7378,59.42741,0
            24.73634,59.42764,0
            24.73603,59.42769,0
            24.73596,59.4277,0
            24.73563,59.42774,0
            24.73471,59.42787,0
            24.73335,59.42807,0
            24.73328,59.42807,0
            24.73322,59.42808,0
            24.73318,59.42809,0
            24.73312,59.4281,0
            24.73294,59.42813,0
            24.73275,59.42816,0
            24.73264,59.42819,0
            24.73185,59.42834,0
            24.7317,59.42838,0
            24.73136,59.42846,0
            24.73106,59.42855,0
            24.73057,59.42875,0
            24.73004,59.42897,0
            24.72982,59.42905,0
            24.72968,59.4291,0
            24.72951,59.42915,0
            24.72937,59.42919,0
            24.72917,59.42922,0
            24.729,59.42925,0
            24.72882,59.42926,0
            24.72877,59.42927,0
            24.72856,59.42928,0
            24.72798,59.42928,0
            24.7277,59.42921,0
            24.72733,59.42912,0
            24.72697,59.42905,0
            24.72682,59.42901,0
            24.72656,59.4289,0
            24.72635,59.42881,0
            24.72606,59.42868,0
            24.726,59.42865,0
            24.72567,59.4285,0
            24.72537,59.4284,0
            24.72486,59.42827,0
            24.72484,59.42827,0
            24.72476,59.42825,0
            24.72389,59.42809,0
            24.72309,59.42795,0
            24.72297,59.42792,0
            24.72222,59.42779,0
            24.72156,59.42771,0
            24.72153,59.42769,0
            24.72151,59.42768,0
            24.72148,59.42766,0
            24.72142,59.42764,0
            24.72135,59.42762,0
            24.72128,59.4276,0
            24.72068,59.4275,0
            24.72035,59.42744,0
            24.72013,59.42739,0
            24.71995,59.42739,0
            24.71988,59.42729,0
            24.71977,59.42723,0
            24.71939,59.427,0
            24.71938,59.427,0
            24.71915,59.42684,0
            24.7189,59.42667,0
            24.71879,59.42656,0
            24.71868,59.42645,0
            24.71838,59.42614,0
            24.71827,59.42602,0
            24.71804,59.42575,0
            24.71775,59.42542,0
            24.7176,59.42521,0
            24.71743,59.42499,0
            24.7156,59.42292,0
            24.71515,59.42239,0
            24.71513,59.42236,0
            24.7147,59.42186,0
            24.71435,59.42146,0
            24.71425,59.42134,0
            24.7139,59.42094,0
            24.71389,59.42094,0
            24.71381,59.42085,0
            24.71366,59.42067,0
            24.71267,59.41953,0
            24.71259,59.41945,0
            24.71253,59.4194,0
            24.71244,59.41931,0
            24.71212,59.41893,0
            24.71199,59.41879,0
            24.71179,59.41855,0
            24.71176,59.41851,0
            24.71164,59.41838,0
            24.71058,59.41716,0
            24.71,59.41642,0
            24.70966,59.41593,0
            24.70931,59.41545,0
            24.70916,59.41525,0
            24.70902,59.41507,0
            24.7087,59.4146,0
            24.70861,59.41449,0
            24.70827,59.41401,0
            24.70798,59.4136,0
            24.70785,59.41342,0
            24.70751,59.41294,0
            24.70711,59.41301,0
            24.70694,59.41305,0
            24.7068,59.41307,0
            24.70658,59.41311,0
            24.70609,59.4126,0
            24.70537,59.41178,0
          </coordinates>
        </LineString>
      </Placemark>
      <Placemark>
        <name>Lastekodu tn 6</name>
        <styleUrl>#icon-1899-DB4436-nodesc</styleUrl>
        <Point>
          <coordinates>
            24.7633271,59.4315393,0
          </coordinates>
        </Point>
      </Placemark>
      <Placemark>
        <name>Tallinn Industrial Education Center, Sõpruse puiestee, Таллин</name>
        <styleUrl>#icon-1899-DB4436-nodesc</styleUrl>
        <Point>
          <coordinates>
            24.7053735,59.4117824,0
          </coordinates>
        </Point>
      </Placemark>
    </Folder>
  </Document>
</kml>

Minu map brauseris:

https://aleksejev21.thkit.ee/Leaflet/map.html

Scroll to Top