3

I'm wondering if there is a way to display MSID/MID with leaflet.

I found this forum below; Any way I can load KML data from Google maps (again) via JS API?

KMZs work fantastically with the arcgis and google API (kmlLayer) but I can't seem to find any information on using a kmz with leaflet.
I'd prefer not having to Unzip locally, and omnivore does not appear to work with KMZs.

  • Also found this Question/Answer Using KMZ files with OpenLayers. – Jean-Yves Landry May 17 '16 at 16:06
  • Is your issue with using a google My Maps URL for a KMZ file (with kml?mid=..., for instance) in Leaflet, or loading KMZ files generally? I'm not sure that using a My Maps URL is possible from a non-Google map, since (at least when I try this) there is no Access-Control-Allow-Origin header to allow access from non-Google domains. If you want to load a KMZ file with Omnivore, you will probably have to unzip it first using something like JSZip and then use Omnivore's .kml.parse method on the result. – nathansnider May 17 '16 at 18:06
  • using the my maps url (.kmz). – Jean-Yves Landry May 17 '16 at 18:27
  • I was able to use the mid with ArcGis API - jsfiddle.net/jyveslandry/4ujfgjky and google api jsfiddle.net/jyveslandry/ose0s5d1 – Jean-Yves Landry May 17 '16 at 18:33
  • Thanks Nathan I'll try JSZip, do you know of any examples where this has been done? – Jean-Yves Landry May 17 '16 at 18:46
1

I haven't got any solutions for accessing KMZ files via a My Maps MSID/MID in Leaflet. However, in general, to load a KMZ file in Leaflet, you can use JSZip (along with the getBinaryContent method of JSZipUtils) to extract the KML, then Leaflet Omnivore to parse the result.

JSZip will produce an object containing all the files in an archive, and you can select an individual file either by name or with the file(regex) method. You can use file(/.*\.kml/)[0] to select the first file with a .kml extension. Then to read the file as text, you would use either the asText method (in version 2.x of JSZip) or the async("string") method (in version 3.x). Once you have the kml as text, you can use Leaflet Omnivore's .kml.parse method to read it into a Leaflet layer. For version 2.x (which I find more straightforward), the whole thing would look like this:

var kmzUrl = *your URL here*;

JSZipUtils.getBinaryContent(kmzUrl, function(e, d) {
  try {
    var z = new JSZip(d);
    var k = z.file(/.*\.kml/)[0].asText();
    var p = omnivore.kml.parse(k).addTo(map);
    p.eachLayer(function(layer){
      layer.bindPopup(layer.feature.properties.description); //or whatever
    })
  } catch (e) {
    alert(e);
  }
});

Example fiddle here: http://jsfiddle.net/nathansnider/26vagt77/

For version 3.x, it would look like this:

var kmzUrl = *your URL here*;

JSZipUtils.getBinaryContent(kmzUrl, function(err, data) {
  if (err) {
    alert(err);
    return;
  }
  try {
    JSZip.loadAsync(data)
      .then(function(zip) {
        return zip.file(/.*\.kml/)[0].async("string");
      })
      .then(function success(text) {
          var p = omnivore.kml.parse(text).addTo(map);
          p.eachLayer(function(layer) {
            layer.bindPopup(layer.feature.properties.description); //or whatever
          });
        },
        function error(e) {
          alert(e);
        });
  } catch (e) {
    alert(e);
  }
});

Example fiddle: http://jsfiddle.net/nathansnider/adxcapeo/

  • Thanks Nathan that definitely does the job. I also found a work around see stackoverflow.com/a/37311185/4346433. You then avoid using JSzip. – Jean-Yves Landry May 18 '16 at 22:37
  • Your answer seems to have been deleted, but I was able to see it before it disappeared. The trick was to add &forcekml=1 to the URL, correct? If you found a workaround for loading the My Maps URLs directly in Leaflet, you should probably post that here as an answer too. – nathansnider May 18 '16 at 23:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.