a14n / dart-google-maps

A library to use Google Maps JavaScript API v3 from Dart scripts.
Other
128 stars 65 forks source link

OverlayView with tilt #137

Open fne00 opened 1 month ago

fne00 commented 1 month ago

I overlay tiles from a KMZ file with OverlayView.

This works well, except when the underlying map is tilted or rotated (using the default controls on the map when zoomed in).

My draw function is:

 void _draw() {

    final overlayProjection = overlayView.projection!;

    final sw = overlayProjection.fromLatLngToDivPixel(_bounds.southWest)!;
    final ne = overlayProjection.fromLatLngToDivPixel(_bounds.northEast)!;

    final div = _div!;
    div.style
      ..left = '${sw.x}px'
      ..top = '${ne.y}px'
      ..width = '${ne.x! - sw.x!}px'
      ..height = '${sw.y! - ne.y!}px'
      ..opacity = '${opacity}'
      ..transform = 'rotate(${-(double.tryParse(_rotation) ?? 0.0)}deg)';
  }

It appears that the overlayProjection.fromLatLngToDivPixel does not handle tilting/rotation? Or am I missing something?

Without tilt:

Screenshot 2024-08-12 at 7 35 16 AM

With Tilt:

Screenshot 2024-08-12 at 7 32 00 AM
a14n commented 1 month ago

Interesting topic! This problem is not related to google_maps package, you should have the same problem with a JS implementation. I don't have free time to search for a solution but I guess other people on the JS world had faced the same issue. Try to google/stackoverflow your problem in the JS world.