[google_maps_flutter_web] Missing zIndex in convert.dart/_circleOptionsFromCircle #89374

amezzacapo · 2021-09-02T15:25:38Z

The zIndex on web is not working properly.

gmaps.CircleOptions _circleOptionsFromCircle(Circle circle) {
  final populationOptions = gmaps.CircleOptions()
    ..strokeColor = _getCssColor(circle.strokeColor)
    ..strokeOpacity = _getCssOpacity(circle.strokeColor)
    ..strokeWeight = circle.strokeWidth
    ..fillColor = _getCssColor(circle.fillColor)
    ..fillOpacity = _getCssOpacity(circle.fillColor)
    ..center = gmaps.LatLng(circle.center.latitude, circle.center.longitude)
    ..radius = circle.radius
    ..visible = circle.visible   
    ..zIndex = circle.zIndex; <----- Missing
  return populationOptions;
}

The text was updated successfully, but these errors were encountered:

darshankawar · 2021-09-03T06:40:55Z

@amezzacapo
Please provide flutter doctor -v and complete minimal reproducible code sample that we can directly use to verify this issue.
Thanks.

amezzacapo · 2021-09-06T09:53:28Z

@darshankawar thank you for your reply.

I have found the following problem:
I have to draw more overlapping and differentiated circles per layer based on their color.
But when I actually draw them and set up the zIndex for each circle, what happens is that they’re shown correctly in the mobile version, while they are overlapped based on the order in which they're added in the web one.

This is the code snippet:

Circle _circle(
    {required String id,
    required int circleId,
    required LatLng center,
    required double radius,
    required Color color,
    required int zIndex}) {
  return Circle(
      circleId: CircleId('${id}_$circleId'),
      center: center,
      radius: radius,
      fillColor: color.withOpacity(0.5),
      strokeWidth: 0,
      consumeTapEvents: true,
      zIndex: zIndex,
      onTap: () {});
}

_circle(
    id: "circle1",
    circleId: 1,
    center: LatLng(45.63465746853619, 8.723780023834223),
    radius: 100,
    color: Colors.red,
    zIndex: 300
) 
_circle(
    id: "circle1",
    circleId: 2,
    center: LatLng(45.63465746853619, 8.723780023834223),
    radius: 200,
    color: Colors.orange,
    zIndex: 200
)
_circle(
    id: "circle1",
    circleId: 3,
    center: LatLng(45.63465746853619, 8.723780023834223),
    radius: 400,
    color: Colors.yellow,
    zIndex: 100
)
_circle(
    id: "circle2",
    circleId: 1,
    center: LatLng(45.63465746853619, 8.723780023834223),
    radius: 100,
    color: Colors.red,
    zIndex: 300
) 
_circle(
    id: "circle2",
    circleId: 2,
    center: LatLng(45.63465746853619, 8.723780023834223),
    radius: 200,
    color: Colors.orange,
    zIndex: 200
)
_circle(
    id: "circle2",
    circleId: 3,
    center: LatLng(45.63465746853619, 8.723780023834223),
    radius: 400,
    color: Colors.yellow,
    zIndex: 100
)

This is the result:

Conversely, by making the aforementioned change, the result is displayed as in the mobile version:

This is the result after editing:

flutter doctor -v

[√] Flutter (Channel stable, 2.2.3, on Microsoft Windows [Versione 10.0.19043.1165], locale it-IT)
    • Flutter version 2.2.3 at C:\tools\flutter
    • Framework revision f4abaa0735 (9 weeks ago), 2021-07-01 12:46:11 -0700
    • Engine revision 241c87ad80
    • Dart version 2.13.4

[√] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at C:\Users\AlessioMezzacapo\AppData\Local\Android\sdk  
    • Platform android-30, build-tools 29.0.2
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6842174)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Android Studio (version 4.1.0)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6842174)

[√] IntelliJ IDEA Community Edition (version 2019.3)
    • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2019.2.4
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart

[√] IntelliJ IDEA Ultimate Edition (version 2019.3)
    • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA 2019.3.3
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe
                                                                     Edition 2021.1
[√] Android Studio (version 4.1.0)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6842174)

[√] IntelliJ IDEA Community Edition (version 2019.3)
    • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA Community86    • Android 10 (API 29) (emulator) Edition 2019.2.4                                                   cript • Google Chrome 92.0.4515.159
    • Flutter plugin can be installed from:                         cript • Microsoft Edge 92.0.902.78
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart

[√] IntelliJ IDEA Ultimate Edition (version 2019.3)
    • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA 2019.3.3
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart

[√] IntelliJ IDEA Community Edition (version 2021.1)
    • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2021.1
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart

[√] VS Code, 64-bit edition (version 1.59.1)
    • VS Code at C:\Program Files\Microsoft VS Code
    • Flutter extension version 3.26.0

[√] Connected device (3 available)
    • Android SDK built for x86 (mobile) • emulator-5554 • android-x86    • Android 10 (API 29) (emulator)
    • Chrome (web)                       • chrome        • web-javascript • Google Chrome 92.0.4515.159
    • Edge (web)                         • edge          • web-javascript • Microsoft Edge 92.0.902.78

darshankawar · 2021-09-06T12:52:49Z

complete minimal reproducible code sample that we can directly use to verify this issue.

@amezzacapo
As requested above, we would need complete code sample that we can directly use and run to verify the issue. The code snippet you provided isn't enough.

amezzacapo · 2021-09-06T14:43:11Z

@darshankawar
Here is the complete code sample you asked for:

flutter_map_poc

darshankawar · 2021-09-07T05:57:52Z

Thanks for the code sample. On latest master and stable, running on web, I see below:

What's the expected behavior are you looking for ?

amezzacapo · 2021-09-07T08:45:21Z

@darshankawar thank you for your reply.
The result of the code sample should be:

Since the zIndex of the circles has been set up as:

Yellow circles (zIndex:100)
Orange circles (zIndex:200)
Red circles (zIndex:300)

It follows that, the yellow circles have the lowest layer; the orange circles are drawn on the yellow ones as an intermediate layer; the red circles are drawn on the orange ones as the highest layer.

darshankawar · 2021-09-07T13:07:43Z

Thanks for confirming. I see the same behavior per my findings above.

stable, master flutter doctor -v

[✓] Flutter (Channel stable, 2.2.3, on Mac OS X 10.15.4 19E2269 darwin-x64,
    locale en-GB)
    • Flutter version 2.2.3 at /Users/dhs/documents/fluttersdk/flutter
    • Framework revision f4abaa0735 (4 days ago), 2021-07-01 12:46:11 -0700
    • Engine revision 241c87ad80
    • Dart version 2.13.4

[✓] Android toolchain - develop for Android devices (Android SDK version 30)
    • Android SDK at /Users/dhs/Library/Android/sdk
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Users/dhs/Library/Android/sdk
    • Java binary at: /Users/dhs/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/202.7486908/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.    

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.1)
    • Android Studio at /Users/dhs/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/202.7486908/Android
      Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6915495)        

[✓] VS Code (version 1.57.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.21.0

[✓] Connected device (4 available)
    • iPhone 12 Pro Max (mobile)                     •
      A5473606-0213-4FD8-BA16-553433949729 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • iPad Pro (12.9-inch) (4th generation) (mobile) •
      AD9F1B85-B622-485E-97E8-E4AC866D5770 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)                                • macos
      • darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)                                   • chrome
      • web-javascript • Google Chrome 92.0.4515.159


• No issues found!

[✓] Flutter (Channel master, 2.6.0-1.0.pre.193, on Mac OS X 10.15.4 19E2269
    darwin-x64, locale en-GB)
    • Flutter version 2.6.0-1.0.pre.193 at
      /Users/dhs/documents/fluttersdk/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 0c5431d99c (4 hours ago), 2021-09-05 22:31:02 -0400
    • Engine revision b9c633900e
    • Dart version 2.15.0 (build 2.15.0-82.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30)
    • Android SDK at /Users/dhs/Library/Android/sdk
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Users/dhs/Library/Android/sdk
    • Java binary at: /Users/dhs/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/202.7486908/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.    

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.5.1, Build version 12E507
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.1)
    • Android Studio at /Users/dhs/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/202.7486908/Android
      Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6915495)        

[✓] VS Code (version 1.57.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.21.0

[✓] Connected device (4 available)
    • iPhone 12 Pro Max (mobile)                     •
      A5473606-0213-4FD8-BA16-553433949729 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • iPad Pro (12.9-inch) (4th generation) (mobile) •
      AD9F1B85-B622-485E-97E8-E4AC866D5770 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)                                • macos
      • darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)                                   • chrome
      • web-javascript • Google Chrome 92.0.4515.159


• No issues found!

ditman · 2021-09-09T23:46:30Z

Looking, I'm fixing something else in maps, and I may be able to sneak this in!

github-actions · 2021-09-27T06:00:46Z

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

darshankawar added the in triage Presently being triaged by the triage team label Sep 3, 2021

darshankawar added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Sep 3, 2021

github-actions bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Sep 6, 2021

darshankawar added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Sep 6, 2021

github-actions bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Sep 6, 2021

darshankawar added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Sep 7, 2021

github-actions bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Sep 7, 2021

stuartmorgan assigned ditman Sep 9, 2021

stuartmorgan added the P2 Important issues not at the top of the work list label Sep 9, 2021

ditman mentioned this issue Sep 10, 2021

[google_maps_flutter_web] Fix getScreenCoordinate, Circle zIndex flutter/plugins#4298

Merged

11 tasks

ditman closed this as completed in flutter/plugins#4298 Sep 11, 2021

darshankawar added the r: fixed Issue is closed as already fixed in a newer version label Sep 13, 2021

github-actions bot locked as resolved and limited conversation to collaborators Sep 27, 2021

flutter-triage-bot bot added the package flutter/packages repository. See also p: labels. label Jul 5, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[google_maps_flutter_web] Missing zIndex in convert.dart/_circleOptionsFromCircle #89374

[google_maps_flutter_web] Missing zIndex in convert.dart/_circleOptionsFromCircle #89374

amezzacapo commented Sep 2, 2021 •

edited by darshankawar

darshankawar commented Sep 3, 2021

amezzacapo commented Sep 6, 2021 •

edited

darshankawar commented Sep 6, 2021

amezzacapo commented Sep 6, 2021 •

edited

darshankawar commented Sep 7, 2021

amezzacapo commented Sep 7, 2021

darshankawar commented Sep 7, 2021

ditman commented Sep 9, 2021

github-actions bot commented Sep 27, 2021

[google_maps_flutter_web] Missing zIndex in convert.dart/_circleOptionsFromCircle #89374

[google_maps_flutter_web] Missing zIndex in convert.dart/_circleOptionsFromCircle #89374

Comments

amezzacapo commented Sep 2, 2021 • edited by darshankawar

darshankawar commented Sep 3, 2021

amezzacapo commented Sep 6, 2021 • edited

darshankawar commented Sep 6, 2021

amezzacapo commented Sep 6, 2021 • edited

darshankawar commented Sep 7, 2021

amezzacapo commented Sep 7, 2021

darshankawar commented Sep 7, 2021

ditman commented Sep 9, 2021

github-actions bot commented Sep 27, 2021

amezzacapo commented Sep 2, 2021 •

edited by darshankawar

amezzacapo commented Sep 6, 2021 •

edited

amezzacapo commented Sep 6, 2021 •

edited