Skip to content

KMZ overlays not aligning same as seen in Google Earth #121

@jsk01

Description

@jsk01

I'm working on overlay implementation with Mapbox GL JS. Google Earth is being used to align overlay images and save as KMZ. In the Mapbox map the overlays appear to be rotated close to what is expected but not quite matching the rotation seen in Google Earth. Some of the overlays seem like the scale could be different. The same KMZ files load and display correctly using ESRI ArcGIS so I believe the issue is in togeojson. I'm attaching a sample kmz that can be used for seeing the issue. Also note that this seems to only happen with overlays that have a rotation.

Example showing what looks like the rotation being slightly off:
issue with overlay rotation not aligning

Sample overlay showing what looks to be scale not quite same:
overlay issue not to scale

Here is a sample KMZ that has 3 locations showing the issues.
Overlay-invalidLocations.zip

Code loading the source and layer:

      featureCollection.features.forEach((feature, index) => {
        if (
          feature.properties["@geometry-type"] &&
          feature.properties["@geometry-type"] === "groundoverlay"
        ) {
          const tempName = sourceName + "-overlay-" + index;
          if (!map.getSource(tempName)) {
            let imageSource = feature.properties.icon;
            if (imageSource.startsWith("files/")) {
              imageSource = imageSource.substring(6, imageSource.length);
            }
            globalThis.map.addSource(tempName, {
              type: "image",
              url: feature.properties.icon,
              coordinates: feature.geometry.coordinates[0].slice(
                0,
                4 // feature.geometry.coordinates[0].length - 1
              ),
            });
            globalThis.map.addLayer({
              id: tempName,
              type: "raster",
              source: tempName,
            });
          }
        } 
      });

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions