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

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

Open
jsk01 opened this issue Aug 15, 2023 · 3 comments
Open

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

jsk01 opened this issue Aug 15, 2023 · 3 comments

Comments

@jsk01
Copy link

jsk01 commented Aug 15, 2023

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,
            });
          }
        } 
      });
@tmcw
Copy link
Collaborator

tmcw commented Aug 15, 2023

So in previous PR #120 we swapped the rotation direction which got closer, but still off by a bit. My guess is that the rotation should be happening in geodesic space rather than euclidean - the current implementation just thinks in degrees longitude and latitude.

@jsk01
Copy link
Author

jsk01 commented Aug 17, 2023

After some digging it looks like Mapbox uses a projection of EPSG:3857. KML is EPSG:4326.

stack overflow - see answer
GDAL - KML driver

@tmcw
Copy link
Collaborator

tmcw commented Aug 17, 2023

With images aligned by their corners, that should have only a really tiny effect - Mapbox reprojects internally from WGS84 data into EPSG:3857, and at most you should have slightly warped edges rather than incorrect anchor points, at this size. This image itself probably has a different projection than either - probably a local projection.

I just mostly need to figure out a more accurate way to rotate a box without warping.

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