Using KMZ file in Leaflet Map

Question

I have to use KMZ files in my Leaflet Map. I found good plugins and tutorials to use KML files in Leaflet Maps but couldn't find a way to use KMZ files.

One of the plugin for using KML is : Leaflet-Omnivore. For KML all I have to do is(My Leaflet Map is in my ExtJs Application) :

var myMap =  Ext.ComponentQuery.query("leaflet")[0];
myMap.getMap().addLayer(omnivore.kml('http://url/doc.kml'))

Can any one guide me about how to use KMZ instead of KML in Leaflet?

If it is not possible then is there a way to convert KMZ to KML using JavaScript?

You would probably be interested in http://stackoverflow.com/questions/24243254/how-to-convert-kmz-file-to-kml-using-javascript and http://stackoverflow.com/questions/3498743/read-kmz-with-javascript — ghybs, Mar 08 '16 at 13:00
@ghybs thanks for your comment. So there is no way to directly use KMZ files? Only way is that I unzip it using zip.js and use the resulted .kml file ? — Abdul Rehman Yawar Khan, Mar 08 '16 at 13:34

score 5 · Accepted Answer · answered Mar 08 '16 at 17:27

5

A KMZ file is just a zipped KML file, possibly with associated embedded images, icons, etc.

So any program that supports KMZ files internally unzips them to access their KML files.

That may be a reason why many open source programs do not bother supporting KMZ once KML support is implemented: you just need to use an additional unzipping library of your choice, to convert the KMZ to KML.

The linked posts give some JavaScript-based solutions for unzipping.

answered Mar 08 '16 at 17:27

ghybs

47,565
6
74
99

Thanks @ghybs. This is what I figured out as well after searching on internet as well. – Abdul Rehman Yawar Khan Mar 09 '16 at 08:08

score 1 · Answer 2 · edited Jul 14 '16 at 08:59

1

OpenLayers 3 and Leaflet does not support KMZ. I made the KMZ parser up to depth level 3 its under construction but you can use it. The KMZ parsing is working. Here is the link to my GitHub repo.

https://github.com/engrabid411/kmzol3

edited Jul 14 '16 at 08:59

dakab

5,379
9
43
67

answered Apr 19 '16 at 19:36

Abid Nawaz

866
6
20

angela · Answer 3 · 2023-04-06T00:58:51.953

leaflet-kmz

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
  <title>Leaflet-KMZ</title>
  <!-- Leaflet -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
  <!-- Leaflet-KMZ -->
  <script src="https://unpkg.com/leaflet-kmz@latest/dist/leaflet-kmz.js"></script>
</head>
<body>
    <div id="mapid" style="width: 800px; height: 800px;"></div>
  <script>
    var mymap = L.map('mapid').setView([25.0730,121.3724], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 17,
      errorTileUrl: 'http://bpic.588ku.com/element_pic/16/12/07/706f7ff4f15725b17ba1d30d384e6468.jpg',
      attribution: '© OpenStreetMap'
    }).addTo(mymap);

    let kmz = L.kmzLayer().addTo(mymap);
    kmz.on('load', function(e) {
      e.layer.eachLayer(function(layer) {
        if (layer._popup) {
          layer._popup.setContent(popupContent);
        }
      });
      L.control.layers(null, null, { collapsed:false }).addTo(mymap).addOverlay(e.layer, e.name);
    });
    kmz.load('https://api.cloudrf.com//API/archive/data?sid=eHFIVXlaQ3BLZFdHN0VvMlN2Yjdtdz09&type=path');
  </script>
</body>
</html>

Please add a description to you answer, instead of having just code; at the very least link to the docs for `leaflet-kmz`. Also, I don't believe that import statement is correct; nothing is being imported. And please format you code a little better; it's currently quite hard to read. — Darryl Noakes, Apr 03 '23 at 18:17

Using KMZ file in Leaflet Map

3 Answers3

Linked