Missing Colors at Specific Zoom Levels When Using JSON Style
Yeseung0610 opened this issue · 2 comments
Yeseung0610 commented
Steps to reproduce
1. Read the JSON File
- Load the JSON style file in your Flutter app. This file contains the custom map styles you created using the Mapstyle with Google site.
Apply the JSON Style to GoogleMap Widget - Use the style parameter in the GoogleMap widget to apply the loaded JSON style to the map.
Zoom In and Zoom Out - Zoom in and out on the map to observe the issue where certain feature types change their color to black at specific zoom levels.
Expected results
Google Map with correct colors regardless of zoom level
Actual results
At specific zoom levels, some feature types change to colors different from the ones specified.
Code sample
[
{
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#5e5e5e"
}
]
},
{
"featureType": "administrative",
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative.locality",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#3d3d3d"
}
]
},
{
"featureType": "landscape",
"elementType": "geometry.fill",
"stylers": [
{
"lightness": 35
}
]
},
{
"featureType": "landscape.man_made",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#f8f4f1"
}
]
},
{
"featureType": "landscape.man_made",
"elementType": "labels.text",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "landscape.natural",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#f8f4f1"
}
]
},
{
"featureType": "landscape.natural",
"elementType": "labels.text",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "landscape.natural.landcover",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#f8f4f1"
}
]
},
{
"featureType": "poi",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#d6ecc7"
}
]
},
{
"featureType": "poi",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.business",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#d6ecc7"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#dcf2cd"
}
]
},
{
"featureType": "poi.school",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#f8f4f1"
}
]
},
{
"featureType": "poi.sports_complex",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#c4d8b6"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#d1d1d1"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#b0b0b0"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#ababab"
},
{
"visibility": "on"
},
{
"weight": 0.5
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.highway.controlled_access",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road.local",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road.local",
"elementType": "geometry.stroke",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit",
"elementType": "labels.icon",
"stylers": [
{
"color": "#b3b3b3"
}
]
},
{
"featureType": "transit",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#4a4a4a"
}
]
},
{
"featureType": "transit",
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit.line",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit.line",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit.station",
"elementType": "labels.icon",
"stylers": [
{
"color": "#4a4a4a"
}
]
},
{
"featureType": "transit.station.airport",
"elementType": "labels.text",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit.station.bus",
"elementType": "labels.icon",
"stylers": [
{
"color": "#4a4a4a"
}
]
},
{
"featureType": "transit.station.rail",
"elementType": "labels.icon",
"stylers": [
{
"color": "#4a4a4a"
}
]
},
{
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#b3e6f4"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#52808e"
}
]
}
]
Screenshots or Video
1000001837.mp4
Logs
I/ViewRootImpl@786aa0[MainActivity]( 2638): ViewPostIme pointer 0
I/ViewRootImpl@786aa0[MainActivity]( 2638): ViewPostIme pointer 1
D/SurfaceView@54016d4( 2638): 88086228 setAlpha: alpha=1.0
W/vulkan ( 2638): CreateSwapchainKHR(VkSwapchainCreateInfoKHR.imageColorSpace = 1000104013) failed: Unsupported color space, but assume as Success for ANGLE.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/ImageTextureRegistryEntry( 2638): Dropping PlatformView Frame
I/ViewRootImpl@786aa0[MainActivity]( 2638): ViewPostIme pointer 0
D/CompatibilityChangeReporter( 2638): Compat change id reported: 289878283; UID 10499; state: DISABLED
I/ViewRootImpl@786aa0[MainActivity]( 2638): ViewPostIme pointer 1
`E/FrameEvents(` 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/ImageTextureRegistryEntry( 2638): Dropping PlatformView Frame
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/ImageTextureRegistryEntry( 2638): Dropping PlatformView Frame
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
W/ProxyAndroidLoggerBackend( 2638): Too many Flogger logs received before configuration. Dropping old logs.
W/ProxyAndroidLoggerBackend( 2638): Too many Flogger logs received before configuration. Dropping old logs.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/ImageTextureRegistryEntry( 2638): Dropping PlatformView Frame
W/ProxyAndroidLoggerBackend( 2638): Too many Flogger logs received before configuration. Dropping old logs.
W/ProxyAndroidLoggerBackend( 2638): Too many Flogger logs received before configuration. Dropping old logs.
W/ProxyAndroidLoggerBackend( 2638): Too many Flogger logs received before configuration. Dropping old logs.
W/ProxyAndroidLoggerBackend( 2638): Too many Flogger logs received before configuration. Dropping old logs.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
W/ProxyAndroidLoggerBackend( 2638): Too many Flogger logs received before configuration. Dropping old logs.
W/ProxyAndroidLoggerBackend( 2638): Too many Flogger logs received before configuration. Dropping old logs.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
D/TrafficStats( 2638): tagSocket(188) with statsTag=0xffffffff, statsUid=-1
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
I/flutter ( 2638): *** Request ***
I/flutter ( 2638): uri: https://api.tourlive.co.kr/v1/places?point=41.89246123688633%2C12.4853247217834&dist=5000.0&search=&ordering=-distance
I/flutter ( 2638): method: GET
I/flutter ( 2638): responseType: ResponseType.json
I/flutter ( 2638): followRedirects: true
I/flutter ( 2638): persistentConnection: true
I/flutter ( 2638): connectTimeout: 0:00:30.000000
I/flutter ( 2638): sendTimeout: null
I/flutter ( 2638): receiveTimeout: 0:00:30.000000
I/flutter ( 2638): receiveDataWhenStatusError: true
I/flutter ( 2638): extra: {}
I/flutter ( 2638): headers:
I/flutter ( 2638): Content-Type: application/json; charset=UTF-8
I/flutter ( 2638): useAccessToken: false
I/flutter ( 2638): useOfflineSync: false
I/flutter ( 2638): useRetryCall: false
I/flutter ( 2638): data:
I/flutter ( 2638): null
I/flutter ( 2638):
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
W/ProxyAndroidLoggerBackend( 2638): Too many Flogger logs received before configuration. Dropping old logs.
W/ProxyAndroidLoggerBackend( 2638): Too many Flogger logs received before configuration. Dropping old logs.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
W/ProxyAndroidLoggerBackend( 2638): Too many Flogger logs received before configuration. Dropping old logs.
W/com.tourlive( 2638): Long monitor contention with owner androidmapsapi-TilePrep_6 (4054) at void m.era.run()(:com.google.android.gms.policy_maps_core_dynamite@241110203@241110201042.615149234.615149234:307) waiters=1 in void m.era.run() for 176ms
D/TrafficStats( 2638): tagSocket(90) with statsTag=0xffffffff, statsUid=-1
I/com.tourlive( 2638): Compiler allocated 4503KB to compile m.emx m.enb.k(m.bfe, m.hwz, m.emq, byte[], boolean, m.cic, m.dgo, java.lang.Iterable)
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
I/flutter ( 2638): *** Response ***
I/flutter ( 2638): uri: https://api.tourlive.co.kr/v1/places?point=41.89246123688633%2C12.4853247217834&dist=5000.0&search=&ordering=-distance
I/flutter ( 2638): statusCode: 200
I/flutter ( 2638): headers:
I/flutter ( 2638): connection: keep-alive
I/flutter ( 2638): date: Fri, 17 May 2024 09:41:55 GMT
I/flutter ( 2638): vary: Origin, Accept-Language, Cookie
I/flutter ( 2638): strict-transport-security: max-age=31536000; includeSubdomains; preload
I/flutter ( 2638): content-length: 240265
I/flutter ( 2638): etag: "8cf4414606854e769fe843cd222c9f6c"
I/flutter ( 2638): content-type: application/json
I/flutter ( 2638): x-frame-options: SAMEORIGIN
I/flutter ( 2638): content-language: en
I/flutter ( 2638): server: nginx
I/flutter ( 2638): Response Text:
I/flutter ( 2638): {"success":true,"data":[{"id":733,"title":"포로 로마노","local_title":"Foro Romano","sub_title":"고대 로마 시대 시민생활의 중심지","place_image":"https://static.tourlive.co.kr/static/place/2020/07/16/f00201dcc72b11ea9f9c02420a00002c/1594880211/resize_image/romaplace23-2_resize.jpg","place_location":[41.8924623,12.485325],"place_type":2},{"id":4496,"title":"라쿠스 쿠르티우스","local_title":"Lacus curtius","sub_title":"전설적인 영웅 쿠르티우스 부조가 있는 곳으로 갈바 황제 암살 장소와 관련된 곳","place_image":null,"place_location":[41.892312,12.485051],"place_type":2},{"id":1093,"title":"포카스 원주","local_title":"Colonna di Foca","sub_title":"포카스의 승전 기념비","place_image":"https://static.tourlive.co.kr/static/place/2020/07/17/8413792cc7f011eaa81002420a00002e/1594964641/resize_image/romaplace477-2_resize.jpg","place_location":[41.892678,12.48478],"place_type":2},{"id":1095,"title":"율리아 바실리카","local_title":"Basilica jul
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/ImageTextureRegistryEntry( 2638): Dropping PlatformView Frame
I/flutter ( 2638):
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/ImageTextureRegistryEntry( 2638): Dropping PlatformView Frame
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/ImageTextureRegistryEntry( 2638): Dropping PlatformView Frame
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/ImageTextureRegistryEntry( 2638): Dropping PlatformView Frame
W/ProxyAndroidLoggerBackend( 2638): Too many Flogger logs received before configuration. Dropping old logs.
W/ProxyAndroidLoggerBackend( 2638): Too many Flogger logs received before configuration. Dropping old logs.
W/ProxyAndroidLoggerBackend( 2638): Too many Flogger logs received before configuration. Dropping old logs.
W/ProxyAndroidLoggerBackend( 2638): Too many Flogger logs received before configuration. Dropping old logs.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
W/ProxyAndroidLoggerBackend( 2638): Too many Flogger logs received before configuration. Dropping old logs.
W/ProxyAndroidLoggerBackend( 2638): Too many Flogger logs received before configuration. Dropping old logs.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/ImageTextureRegistryEntry( 2638): Dropping PlatformView Frame
W/ProxyAndroidLoggerBackend( 2638): Too many Flogger logs received before configuration. Dropping old logs.
W/ProxyAndroidLoggerBackend( 2638): Too many Flogger logs received before configuration. Dropping old logs.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
W/ProxyAndroidLoggerBackend( 2638): Too many Flogger logs received before configuration. Dropping old logs.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
W/ProxyAndroidLoggerBackend( 2638): Too many Flogger logs received before configuration. Dropping old logs.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
I/com.tourlive( 2638): Compiler allocated 4538KB to compile void m.edg.b(m.dlx, m.ebz, m.eeb, m.elp, boolean)
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/ImageTextureRegistryEntry( 2638): Dropping PlatformView Frame
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/ImageTextureRegistryEntry( 2638): Dropping PlatformView Frame
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
I/ViewRootImpl@786aa0[MainActivity]( 2638): ViewPostIme pointer 1
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/ImageTextureRegistryEntry( 2638): Dropping PlatformView Frame
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/ImageTextureRegistryEntry( 2638): Dropping PlatformView Frame
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/ImageTextureRegistryEntry( 2638): Dropping PlatformView Frame
I/ViewRootImpl@786aa0[MainActivity]( 2638): ViewPostIme pointer 0
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/ImageTextureRegistryEntry( 2638): Dropping PlatformView Frame
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/ImageTextureRegistryEntry( 2638): Dropping PlatformView Frame
D/InputEventReceiver_DOT( 2638): IER.scheduleInputVsync
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
W/ProxyAndroidLoggerBackend( 2638): Too many Flogger logs received before configuration. Dropping old logs.
W/ProxyAndroidLoggerBackend( 2638): Too many Flogger logs received before configuration. Dropping old logs.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
W/ProxyAndroidLoggerBackend( 2638): Too many Flogger logs received before configuration. Dropping old logs.
W/ProxyAndroidLoggerBackend( 2638): Too many Flogger logs received before configuration. Dropping old logs.
E/ImageTextureRegistryEntry( 2638): Dropping PlatformView Frame
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
I/ViewRootImpl@786aa0[MainActivity]( 2638): ViewPostIme pointer 1
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/ImageTextureRegistryEntry( 2638): Dropping PlatformView Frame
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/ImageTextureRegistryEntry( 2638): Dropping PlatformView Frame
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/ImageTextureRegistryEntry( 2638): Dropping PlatformView Frame
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/ImageTextureRegistryEntry( 2638): Dropping PlatformView Frame
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/ImageTextureRegistryEntry( 2638): Dropping PlatformView Frame
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/ImageTextureRegistryEntry( 2638): Dropping PlatformView Frame
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
E/FrameEvents( 2638): updateAcquireFence: Did not find frame.
Flutter Doctor output
Doctor summary (to see all details, run flutter doctor -v):
[!] Flutter (Channel [user-branch], 3.19.0, on macOS 14.3 23D56 darwin-arm64, locale ko-KR)
! Flutter version 3.19.0 on channel [user-branch] at /Users/parkyeseung/development/flutter
Currently on an unknown channel. Run flutter channel to switch to an official channel.
If that doesn't fix the issue, reinstall Flutter by following instructions at https://flutter.dev/docs/get-started/install.
! Upstream repository unknown source is not a standard remote.
Set environment variable "FLUTTER_GIT_URL" to unknown source to dismiss this error.
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2023.1)
[✓] IntelliJ IDEA Ultimate Edition (version 2024.1)
[✓] VS Code (version 1.89.1)
[✓] Connected device (4 available)
[✓] Network resources
! Doctor found issues in 1 category.
danagbemava-nc commented
Hi @Yeseung0610, what version of google_maps_flutter are you using?
Is this specific to android? Please provide a complete minimal reproducible code sample so that we can properly investigate this issue.
Thank you
stuartmorgan commented
The google_maps_flutter plugin is just a wrapper around the native SDK; all of the drawing is done by the Google Maps SDK itself. Since the JSON style is showing up at all, that means the plugin did correctly pass it through to the SDK, and the plugin has no control over how the style is applied after that point.
Closing as this is not something that can be addressed at the plugin level; you'll need to file this against the Google Maps SDK itself.