[google_maps_flutter] Add heatmap support #5274
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,6 @@ | ||
| ## 2.2.0 | ||
|
|
||
| * Adds support for heatmap layers. | ||
|
|
||
| ## 2.1.12 | ||
|
|
||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,30 @@ | ||
| # This file tracks properties of this Flutter project. | ||
| # Used by Flutter tool to assess capabilities and perform upgrades etc. | ||
| # | ||
| # This file should be version controlled. | ||
|
|
||
| version: | ||
| revision: fb57da5f945d02ef4f98dfd9409a72b7cce74268 | ||
| channel: stable | ||
|
|
||
| project_type: app | ||
|
|
||
| # Tracks metadata for the flutter migrate command | ||
| migration: | ||
| platforms: | ||
| - platform: root | ||
| create_revision: fb57da5f945d02ef4f98dfd9409a72b7cce74268 | ||
| base_revision: fb57da5f945d02ef4f98dfd9409a72b7cce74268 | ||
| - platform: web | ||
| create_revision: fb57da5f945d02ef4f98dfd9409a72b7cce74268 | ||
| base_revision: fb57da5f945d02ef4f98dfd9409a72b7cce74268 | ||
|
|
||
| # User provided section | ||
|
|
||
| # List of Local paths (relative to this file) that should be | ||
| # ignored by the migrate tool. | ||
| # | ||
| # Files that are not part of the templates will be ignored by default. | ||
| unmanaged_files: | ||
| - 'lib/main.dart' | ||
| - 'ios/Runner.xcodeproj/project.pbxproj' | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,150 @@ | ||
| // Copyright 2013 The Flutter Authors. All rights reserved. | ||
| // Use of this source code is governed by a BSD-style license that can be | ||
| // found in the LICENSE file. | ||
|
|
||
| // ignore_for_file: public_member_api_docs | ||
|
|
||
| import 'package:flutter/foundation.dart'; | ||
| import 'package:flutter/material.dart'; | ||
| import 'package:google_maps_flutter/google_maps_flutter.dart'; | ||
| import 'package:google_maps_flutter_example/page.dart'; | ||
|
|
||
| class HeatmapPage extends GoogleMapExampleAppPage { | ||
| const HeatmapPage({Key? key}) | ||
| : super(const Icon(Icons.map), 'Heatmaps', key: key); | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| return const HeatmapBody(); | ||
| } | ||
| } | ||
|
|
||
| class HeatmapBody extends StatefulWidget { | ||
| const HeatmapBody({Key? key}) : super(key: key); | ||
|
|
||
| @override | ||
| State<StatefulWidget> createState() => HeatmapBodyState(); | ||
| } | ||
|
|
||
| class HeatmapBodyState extends State<HeatmapBody> { | ||
| static const LatLng sanFrancisco = LatLng(37.774546, -122.433523); | ||
|
|
||
| List<WeightedLatLng> enabledPoints = <WeightedLatLng>[ | ||
| const WeightedLatLng(37.782, -122.447), | ||
| const WeightedLatLng(37.782, -122.445), | ||
| const WeightedLatLng(37.782, -122.443), | ||
| const WeightedLatLng(37.782, -122.441), | ||
| const WeightedLatLng(37.782, -122.439), | ||
| const WeightedLatLng(37.782, -122.437), | ||
| const WeightedLatLng(37.782, -122.435), | ||
| const WeightedLatLng(37.785, -122.447), | ||
| const WeightedLatLng(37.785, -122.445), | ||
| const WeightedLatLng(37.785, -122.443), | ||
| const WeightedLatLng(37.785, -122.441), | ||
| const WeightedLatLng(37.785, -122.439), | ||
| const WeightedLatLng(37.785, -122.437), | ||
| const WeightedLatLng(37.785, -122.435) | ||
| ]; | ||
|
|
||
| List<WeightedLatLng> disabledPoints = <WeightedLatLng>[]; | ||
|
|
||
| void _addPoint() { | ||
| if (disabledPoints.isEmpty) { | ||
| return; | ||
| } | ||
|
|
||
| final WeightedLatLng point = disabledPoints.first; | ||
| disabledPoints.removeAt(0); | ||
|
|
||
| setState(() => enabledPoints.add(point)); | ||
| } | ||
|
|
||
| void _removePoint() { | ||
| if (enabledPoints.isEmpty) { | ||
| return; | ||
| } | ||
|
|
||
| final WeightedLatLng point = enabledPoints.first; | ||
| enabledPoints.removeAt(0); | ||
|
|
||
| setState(() => disabledPoints.add(point)); | ||
| } | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| return Column( | ||
| mainAxisAlignment: MainAxisAlignment.spaceEvenly, | ||
| crossAxisAlignment: CrossAxisAlignment.stretch, | ||
| children: <Widget>[ | ||
| Center( | ||
| child: SizedBox( | ||
| width: 350.0, | ||
| height: 300.0, | ||
| child: GoogleMap( | ||
| initialCameraPosition: const CameraPosition( | ||
| target: sanFrancisco, | ||
| zoom: 13, | ||
| ), | ||
| heatmaps: <Heatmap>{ | ||
| Heatmap( | ||
| heatmapId: const HeatmapId('test'), | ||
| data: enabledPoints, | ||
| gradient: HeatmapGradient( | ||
| colors: <Color>[ | ||
| // Web and Android need a first color with 0 alpha. | ||
| // On iOS, this causes rendering issues. | ||
|
||
| if (!(defaultTargetPlatform == TargetPlatform.iOS)) | ||
| const Color.fromARGB(0, 0, 255, 255), | ||
| const Color.fromARGB(255, 0, 255, 255), | ||
| const Color.fromARGB(255, 0, 63, 255), | ||
| const Color.fromARGB(255, 0, 0, 191), | ||
| const Color.fromARGB(255, 63, 0, 91), | ||
| const Color.fromARGB(255, 255, 0, 0), | ||
| ], | ||
| startPoints: <double>[ | ||
| if (!(defaultTargetPlatform == TargetPlatform.iOS)) 0, | ||
Rexios80 marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| 0.2, | ||
| 0.4, | ||
| 0.6, | ||
| 0.8, | ||
| 1.0, | ||
| ], | ||
| ), | ||
| maxIntensity: 1, | ||
| // Radius behaves differently on web and Android/iOS. | ||
|
Contributor
There was a problem hiding this comment. Is this a Flutter vs native unit issue? If so, we should be handling it internally.
Member
Author
There was a problem hiding this comment. Almost everything in this plugin relating to the size of something behaves completely differently on web vs android/ios. I'm not sure what the best solution here is.
Contributor
There was a problem hiding this comment. Can you elaborate on "completely differently"? We'll need to understand what exactly the differences are to figure out how to accommodate them in the API.
Member
Author
There was a problem hiding this comment. With the most recent merge even Android/iOS behave differently from each other:
Member
Author
There was a problem hiding this comment. The fact that this behavior has changed makes me hesitant to create a built in workaround for this issue. I'm not sure we can trust the platform SDKs to keep consistent behavior.
Member
Author
There was a problem hiding this comment. I thought maybe this had something to do with device pixel ratio, but accounting for that seems to have just made things worse
The code to get the radius: int get radius => (prescaledRadius * window.devicePixelRatio).floor();
Contributor
There was a problem hiding this comment. Do the native SDKs document what the units of the radius are supposed to be?
Member
Author
There was a problem hiding this comment. https://developers.google.com/maps/documentation/javascript/heatmaplayer https://developers.google.com/maps/documentation/ios-sdk/utility/heatmap https://developers.google.com/maps/documentation/android-sdk/utility/heatmap They all say the unit is "pixels" which seems like a lie unless something funky is going on |
||
| radius: kIsWeb ? 10 : 20, | ||
| ) | ||
| }), | ||
| ), | ||
| ), | ||
| Expanded( | ||
| child: SingleChildScrollView( | ||
| child: Row( | ||
| mainAxisAlignment: MainAxisAlignment.spaceEvenly, | ||
| children: <Widget>[ | ||
| Row( | ||
| children: <Widget>[ | ||
| Column( | ||
| children: <Widget>[ | ||
| TextButton( | ||
| onPressed: | ||
| disabledPoints.isNotEmpty ? _addPoint : null, | ||
| child: const Text('Add point'), | ||
| ), | ||
| TextButton( | ||
| onPressed: | ||
| enabledPoints.isNotEmpty ? _removePoint : null, | ||
| child: const Text('Remove point'), | ||
| ), | ||
| ], | ||
| ) | ||
| ], | ||
| ) | ||
| ], | ||
| ), | ||
| ), | ||
| ), | ||
| ], | ||
| ); | ||
| } | ||
| } | ||
Uh oh!
There was an error while loading. Please reload this page.