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>KML на Leaflet</title>
  <link
    rel="stylesheet"
    href="https://unpkg.com/leaflet/dist/leaflet.css"
  />
  <style>
    #map {
      width: 100vw;
      height: 100vh;
    }
  </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>
    // Создаем карту, центрируем где-то в Эстонии
    const map = L.map('map').setView([59.44, 24.72], 13);

    // Добавляем OpenStreetMap тайлы
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© OpenStreetMap contributors'
    }).addTo(map);

    // Загружаем и отображаем KML
    omnivore.kml('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>KML map</name>
    <description/>
    <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-673AB7-1200-77-nodesc-normal">
      <LineStyle>
        <color>ffb73a67</color>
        <width>1.2</width>
      </LineStyle>
      <PolyStyle>
        <color>4db73a67</color>
        <fill>1</fill>
        <outline>1</outline>
      </PolyStyle>
      <BalloonStyle>
        <text><![CDATA[<h3>$[name]</h3>]]></text>
      </BalloonStyle>
    </Style>
    <Style id="poly-673AB7-1200-77-nodesc-highlight">
      <LineStyle>
        <color>ffb73a67</color>
        <width>1.8</width>
      </LineStyle>
      <PolyStyle>
        <color>4db73a67</color>
        <fill>1</fill>
        <outline>1</outline>
      </PolyStyle>
      <BalloonStyle>
        <text><![CDATA[<h3>$[name]</h3>]]></text>
      </BalloonStyle>
    </Style>
    <StyleMap id="poly-673AB7-1200-77-nodesc">
      <Pair>
        <key>normal</key>
        <styleUrl>#poly-673AB7-1200-77-nodesc-normal</styleUrl>
      </Pair>
      <Pair>
        <key>highlight</key>
        <styleUrl>#poly-673AB7-1200-77-nodesc-highlight</styleUrl>
      </Pair>
    </StyleMap>
    <Style id="poly-7CB342-1200-77-nodesc-normal">
      <LineStyle>
        <color>ff42b37c</color>
        <width>1.2</width>
      </LineStyle>
      <PolyStyle>
        <color>4d42b37c</color>
        <fill>1</fill>
        <outline>1</outline>
      </PolyStyle>
      <BalloonStyle>
        <text><![CDATA[<h3>$[name]</h3>]]></text>
      </BalloonStyle>
    </Style>
    <Style id="poly-7CB342-1200-77-nodesc-highlight">
      <LineStyle>
        <color>ff42b37c</color>
        <width>1.8</width>
      </LineStyle>
      <PolyStyle>
        <color>4d42b37c</color>
        <fill>1</fill>
        <outline>1</outline>
      </PolyStyle>
      <BalloonStyle>
        <text><![CDATA[<h3>$[name]</h3>]]></text>
      </BalloonStyle>
    </Style>
    <StyleMap id="poly-7CB342-1200-77-nodesc">
      <Pair>
        <key>normal</key>
        <styleUrl>#poly-7CB342-1200-77-nodesc-normal</styleUrl>
      </Pair>
      <Pair>
        <key>highlight</key>
        <styleUrl>#poly-7CB342-1200-77-nodesc-highlight</styleUrl>
      </Pair>
    </StyleMap>
    <Folder>
      <name>Punktid</name>
      <Placemark>
        <name>TTHK</name>
        <styleUrl>#poly-673AB7-1200-77-nodesc</styleUrl>
        <Polygon>
          <outerBoundaryIs>
            <LinearRing>
              <tessellate>1</tessellate>
              <coordinates>
                24.7055861,59.4116916,0
                24.7051033,59.4118063,0
                24.7050497,59.4117353,0
                24.7046903,59.4118172,0
                24.7050336,59.4122321,0
                24.7044703,59.4123686,0
                24.7040894,59.41194,0
                24.7037032,59.4120219,0
                24.704068,59.4124914,0
                24.7037676,59.4125597,0
                24.7030863,59.4117626,0
                24.7023621,59.4119373,0
                24.7019329,59.4114132,0
                24.7023567,59.4113204,0
                24.7027054,59.411738,0
                24.7037032,59.4115333,0
                24.7033813,59.4111129,0
                24.7039607,59.4109846,0
                24.7042987,59.4113995,0
                24.7046903,59.4113149,0
                24.7046259,59.4112439,0
                24.7051248,59.4111402,0
                24.7053018,59.4113258,0
                24.7042557,59.4115115,0
                24.7044435,59.4117489,0
                24.7054359,59.4115442,0
                24.7055861,59.4116916,0
              </coordinates>
            </LinearRing>
          </outerBoundaryIs>
        </Polygon>
      </Placemark>
      <Placemark>
        <name>Kodu</name>
        <styleUrl>#poly-7CB342-1200-77-nodesc</styleUrl>
        <Polygon>
          <outerBoundaryIs>
            <LinearRing>
              <tessellate>1</tessellate>
              <coordinates>
                24.7279066,59.4475164,0
                24.7280863,59.4474224,0
                24.7284215,59.4475928,0
                24.7290787,59.4472846,0
                24.7287783,59.4471115,0
                24.7289446,59.4470283,0
                24.7294542,59.4473092,0
                24.7284081,59.4477755,0
                24.7279066,59.4475164,0
              </coordinates>
            </LinearRing>
          </outerBoundaryIs>
        </Polygon>
      </Placemark>
      <Placemark>
        <name>Tthk Area</name>
        <styleUrl>#poly-673AB7-1200-77-nodesc</styleUrl>
        <Polygon>
          <outerBoundaryIs>
            <LinearRing>
              <tessellate>1</tessellate>
              <coordinates>
                24.703556,59.414102,0
                24.7011957,59.4111539,0
                24.7078904,59.4097999,0
                24.7102937,59.4127262,0
                24.703556,59.414102,0
              </coordinates>
            </LinearRing>
          </outerBoundaryIs>
        </Polygon>
      </Placemark>
      <Placemark>
        <name>Kodu Area</name>
        <styleUrl>#poly-7CB342-1200-77-nodesc</styleUrl>
        <Polygon>
          <outerBoundaryIs>
            <LinearRing>
              <tessellate>1</tessellate>
              <coordinates>
                24.731682,59.447951,0
                24.7280342,59.4491508,0
                24.7246439,59.4473838,0
                24.72812,59.4458131,0
                24.731682,59.447951,0
              </coordinates>
            </LinearRing>
          </outerBoundaryIs>
        </Polygon>
      </Placemark>
    </Folder>
    <Folder>
      <name>Kodus koolini</name>
      <Placemark>
        <name>Kodus koolini</name>
        <styleUrl>#line-1267FF-5000-nodesc</styleUrl>
        <LineString>
          <tessellate>1</tessellate>
          <coordinates>
            24.72911,59.4476,0
            24.72971,59.44737,0
            24.72986,59.44732,0
            24.72999,59.44726,0
            24.73045,59.44706,0
            24.73048,59.44705,0
            24.73069,59.44695,0
            24.73072,59.44693,0
            24.73095,59.44683,0
            24.73112,59.44677,0
            24.73312,59.44587,0
            24.73287,59.44569,0
            24.73259,59.4455,0
            24.73217,59.44519,0
            24.7319,59.44502,0
            24.73171,59.44487,0
            24.73157,59.44477,0
            24.73138,59.44464,0
            24.73121,59.44451,0
            24.73103,59.44439,0
            24.73031,59.44386,0
            24.73,59.44365,0
            24.72956,59.44334,0
            24.72952,59.4433,0
            24.7295,59.44328,0
            24.72946,59.44324,0
            24.7286,59.44227,0
            24.7285,59.44218,0
            24.72862,59.44215,0
            24.72927,59.44199,0
            24.72985,59.44184,0
            24.73043,59.4417,0
            24.73056,59.44167,0
            24.7307,59.44164,0
            24.73082,59.44162,0
            24.73093,59.4416,0
            24.731,59.44159,0
            24.73105,59.44158,0
            24.73109,59.44156,0
            24.73113,59.44153,0
            24.73116,59.4415,0
            24.73118,59.44146,0
            24.73111,59.44141,0
            24.73098,59.44134,0
            24.73088,59.44128,0
            24.73046,59.44106,0
            24.73046,59.44105,0
            24.73038,59.44097,0
            24.72978,59.44064,0
            24.72958,59.44054,0
            24.72946,59.44046,0
            24.72941,59.44043,0
            24.72923,59.44034,0
            24.72918,59.4403,0
            24.72896,59.44018,0
            24.72864,59.44001,0
            24.72843,59.4399,0
            24.72834,59.43985,0
            24.72832,59.43984,0
            24.7283,59.43983,0
            24.72813,59.43975,0
            24.72803,59.4397,0
            24.72801,59.43969,0
            24.72791,59.43964,0
            24.72789,59.43963,0
            24.72783,59.43959,0
            24.72754,59.43945,0
            24.72748,59.43942,0
            24.7274,59.43938,0
            24.7273,59.43934,0
            24.72729,59.43933,0
            24.72718,59.43927,0
            24.72702,59.43919,0
            24.72686,59.43911,0
            24.72654,59.43893,0
            24.7264,59.43886,0
            24.72626,59.43878,0
            24.72622,59.43876,0
            24.72591,59.4386,0
            24.72551,59.43842,0
            24.72507,59.43821,0
            24.72493,59.43814,0
            24.72483,59.4381,0
            24.72393,59.43771,0
            24.7238,59.43765,0
            24.72365,59.43755,0
            24.72346,59.43747,0
            24.72336,59.43742,0
            24.72317,59.43733,0
            24.72304,59.43726,0
            24.72267,59.43707,0
            24.72194,59.43669,0
            24.72168,59.43657,0
            24.72155,59.43652,0
            24.72127,59.43638,0
            24.72061,59.43607,0
            24.72044,59.43599,0
            24.7203,59.43593,0
            24.72008,59.43583,0
            24.71997,59.43576,0
            24.71968,59.43555,0
            24.71962,59.43551,0
            24.71957,59.43544,0
            24.71951,59.43537,0
            24.71947,59.4353,0
            24.7193,59.43507,0
            24.71921,59.43496,0
            24.71906,59.43476,0
            24.71896,59.43462,0
            24.71859,59.43404,0
            24.71831,59.4337,0
            24.71809,59.43338,0
            24.71805,59.43334,0
            24.71802,59.43331,0
            24.71792,59.43326,0
            24.71782,59.43321,0
            24.71768,59.43315,0
            24.71746,59.4331,0
            24.71634,59.43279,0
            24.71621,59.43277,0
            24.71607,59.43274,0
            24.71603,59.43273,0
            24.71606,59.43271,0
            24.71628,59.43262,0
            24.71646,59.43244,0
            24.71659,59.43234,0
            24.71688,59.4321,0
            24.71716,59.43188,0
            24.71732,59.43173,0
            24.71745,59.43162,0
            24.71761,59.43145,0
            24.71773,59.43128,0
            24.71787,59.43109,0
            24.71805,59.43084,0
            24.71834,59.43046,0
            24.71844,59.43033,0
            24.71876,59.4299,0
            24.7189,59.42973,0
            24.71925,59.42926,0
            24.7196,59.4288,0
            24.7199,59.42844,0
            24.71999,59.42831,0
            24.72001,59.42817,0
            24.72001,59.42794,0
            24.72001,59.42774,0
            24.72002,59.42764,0
            24.72001,59.42756,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>Tööstuse tn 43, 10411 Tallinn, Эстония</name>
        <styleUrl>#icon-1899-DB4436-nodesc</styleUrl>
        <Point>
          <coordinates>
            24.7291083,59.4475957,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>

Visul studio tulemus:

Minu map brauseris:

https://davidmyrseth23.thkit.ee/Map/index.html