Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

EPSG: 4326 and Groundoverlays support #9

Closed
DrPDash opened this issue Apr 18, 2020 · 5 comments
Closed

EPSG: 4326 and Groundoverlays support #9

DrPDash opened this issue Apr 18, 2020 · 5 comments

Comments

@DrPDash
Copy link

DrPDash commented Apr 18, 2020

Does it parse and display all elements of the KMZ file?

I tried with one sample file (attached below), and it displays only the associated KML file but ignores the PNG images, logo, color bar, etc. The plugin is useful but it would be nice to have a full parse capability as KMZ files are meant to pack various information.

Example file:
(please modify the extension: rename to .kmz).
S1A_ESA_2020_04_06_07_14_06_0639472446_168.65E_15.46S_VH_C-7_GFS05CDF_wind.ZIP

Below is the HTML, CSS, JS in index.html file. Your help is much appreciated.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>KMZ display</title>
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
  <script src="https://unpkg.com/leaflet-kmz@latest/dist/leaflet-kmz.js"></script>
  <style>
    html,
    body,
    #map {
      height: 100%;
      width: 100%;
      padding: 0px;
      margin: 0px;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    /////////////////////////////////////////////////////////////////////////////////////////////
    //setting up the map//
    /////////////////////////////////////////////////////////////////////////////////////////////
    var map = L.map('map').setView([-15.5, 168.5], 8);

    const ATTR = '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
      '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a> | ' +
      '&copy; <a href="http://cartodb.com/attributions">CartoDB</a>';

    const CDB_URL = 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';

    L.tileLayer(CDB_URL, {
      attribution: ATTR
    }).addTo(map);

    var kmzUrl = {your path for KMZ file} + 'S1A_ESA_2020_04_06_07_14_06_0639472446_168.65E_15.46S_VH_C-7_GFS05CDF_wind.kmz'

    // Instantiate KMZ parser (async)
    var kmzParser = new L.KMZParser({
      onKMZLoaded: function(layer, name) {
        layer.addTo(map);
      }
    });
    kmzParser.load(kmzUrl);
  </script>
</body>
</html>
@Raruto
Copy link
Owner

Raruto commented Apr 18, 2020

Hi Prasanjit,

this library depends on tmcw/togeojson for the parsing of kml files, here you can see the currently supported features (i.e. GroundOverlays are not in that list).

As for images, try removing leading / trailing spaces.

For example:

<href> images/modelimage.kml.png </href>

should become:

<href>images/modelimage.kml.png</href>

(however I don't think it will have any effect because this tag is within a <GroundOverlay>)

As a general rule, always try to avoid all those empty spaces within kml tags.

Regards,
Raruto

@DrPDash
Copy link
Author

DrPDash commented Apr 18, 2020

Thank You, Raruto, for the deeper insight. Much appreciated. I will try as you suggested but got two more associated questions (for just the KML display part):


  1. Is the display independent of CRS? When I tried the prevalent EPSG3857, the location is correct. However, when I made the same display on EPSG4326, it seems displaced.

    EPSG:3857 (WGS 84 / Pseudo-Mercator, units = meters)

    epsg3857

    EPSG: 4326 (WGS 84 / geographic, units = degrees)

    epsg4326


  1. How can I access the Layer created by onKMZLoaded: ? Instead of using Leaflet controls, I have external controls to delete the layer when a user wants to remove the layer.

    Basically, would need access to layer.

    // Instantiate KMZ parser (async)
    var kmzParser = new L.KMZParser({
        onKMZLoaded: function(layer, name) {
          layer.addTo(map);
        }
    });
    kmzParser.load(kmzUrl);

Thanks and regards and let's stay safe wherever we all are.
Prasanjit

@Raruto
Copy link
Owner

Raruto commented Apr 19, 2020

  1. Is the display independent of CRS? When I tried the prevalent EPSG3857, the location is correct. However, when I made the same display on EPSG4326, it seems displaced.

Yes, in general leaflet map does not automatically perform conversions for you. Therefore solutions to this can then be many and varied (eg. server / client side reprojection).

As for those two CRS mentioned above, leaflet should be able to natively support them both (but not "simultaneously"), otherwise try to take a look at this library: Proj4Leaflet.

If in doubt, try searching on: gis.stackexchange.com and stackoverflow.com


  1. How can I access the Layer created by onKMZLoaded: ? Instead of using Leaflet controls, I have external controls to delete the layer when a user wants to remove the layer.

In javascript, unpacking zipped files is an asynchronous operation, and therefore, the easiest way to access it is within the callback function:

// Your callback function
function addLayer(layer, name) {
    layer.addTo(map); // <-- same as kmzParser.get(0).layer.addTo(map)
}

// Instantiate KMZ parser (async)
var kmzParser = new L.KMZParser({ onKMZLoaded: addLayer });
kmzParser.load(kmzUrl);

Otherwise you can also try doing such a thing:

<label>
  <input type="checkbox" onchange="toggleLayer(this)" checked>
   toggleLayer
</label>

<script>
  function toggleLayer(e) {
    var kmz = kmzParser.get(0);
    if(kmz) { // <-- check needed because `kmzParser.load(kmzUrl);` is async
      kmz.layer[e.checked ? 'removeFrom' : 'addTo' ](map);
    }  
  }
</script>

@DrPDash
Copy link
Author

DrPDash commented Apr 19, 2020

  1. I have Proj4LL in the package and mostly, as you mentioned, leaflet takes care of this natively at least between CRSs: EPSG 3413. 4326. 3031 when I overlay various geoJSON vector layers. Its a bit strange that my current setup is failing between EPSG 3857 and EPSG 4326.

    Oddly enough, I unpacked KMZ on the fly using JSZip() and did some manual parsing instead of the plugin:

    var parser = new DOMParser();
    var xmlDoc = parser.parseFromString(text, "text/xml");
    var fileData = toGeoJSON.kml(xmlDoc);

    Then just display.

    And the location seems to be fine again. I need to dig deeper and see why 3857/4326 conversion is not working properly natively. But thank you for the tip and I will try to follow a proactive approach, as you suggested.


  1. The callback approach is brilliant. Thank you.

Closing the thread for now.

@DrPDash DrPDash closed this as completed Apr 19, 2020
@Raruto
Copy link
Owner

Raruto commented Apr 20, 2020

I have Proj4LL in the package and mostly, as you mentioned, leaflet takes care of this natively at least between CRSs: EPSG 3413. 4326. 3031 when I overlay various geoJSON vector layers. Its a bit strange that my current setup is failing between EPSG 3857 and EPSG 4326.

Probably the problem is due to the mapbox/geojson-vt#57 library (used within this library to optimize map rendering for large volumes of vector data).

Oddly enough, I unpacked KMZ on the fly using JSZip() and did some manual parsing instead of the plugin

By chance, does it works in this way?

// Instantiate KMZ parser (async)
var kmzParser = new L.KMZParser({
    onKMZLoaded: function(layer, name) {
      layer.addTo(map);
    }
});
kmzParser.load(kmzUrl, { tiled: false } ); // <-- add tiled option here

@Raruto Raruto changed the title Does not parse the full content of the KMZ file EPSG: 4326 and Groundoverlays support Apr 20, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants