Map selection¶
Setup¶
Prerequisites¶
Build and run¶
Go to the map_selection
directory,
within the flutter examples directory - that is the name of this example project.
Note - the gem_kit
directory containing the Maps SDK for Flutter
should be in the plugins
directory of the example, e.g.
example_pathname/plugins/gem_kit
- see the environment setup guide above.
Replace example_pathname
with the actual example path name,
such as address_search
Download project dependencies:
flutter upgrade
run the following terminal commands in the project directory,
where the pubspec.yaml
file is located:
flutter clean
flutter pub get
Run the example:
First, verify that the ANDROID_SDK_ROOT
environment variable
is set to the root path of your android SDK.
In android/build.gradle
add the maven {}
block as shown,
within the allprojects {} block
, for both debug and release builds,
without the line numbers, those are for reference:
1allprojects {
2 repositories {
3 google()
4 mavenCentral()
5 maven {
6 url "${rootDir}/../plugins/gem_kit/android/build"
7 }
8 }
9}
in android/app/build.gradle
within the android {}
block, in the defaultConfig {}
block,
the android SDK version minSdk
must be set as shown below.
Additionally, for release builds, in android/app/build.gradle
,
within the android {}
block, add the buildTypes {}
block as shown:
Replace example_pathname
with the actual example pathname, such as center_coordinates
1android {
2 defaultConfig {
3 applicationId "com.magiclane.gem_kit.examples.example_pathname"
4 minSdk 21
5 targetSdk flutter.targetSdk
6 versionCode flutterVersionCode.toInteger()
7 versionName flutterVersionName
8 }
9 buildTypes {
10 release {
11 minifyEnabled false
12 shrinkResources false
13
14 // TODO: Add your own signing config for the release build.
15 // Signing with the debug keys for now, so `flutter run --release` works.
16 signingConfig signingConfigs.debug
17 }
18 }
19}
Then run the project:
flutter run --debug
flutter run --release
In the ios/Podfile
configuration text file, at the top, set the minimum ios
platform to 13 like this:
platform :ios, '13.0'
Then run the project:
flutter run --debug
flutter run --release
How it works¶
1import 'package:gem_kit/core.dart';
2import 'package:gem_kit/map.dart';
3import 'landmark_panel.dart';
4import 'package:flutter/material.dart';
5
6Future<void> main() async {
7 const projectApiToken = String.fromEnvironment('GEM_TOKEN');
8
9 await GemKit.initialize(appAuthorization: projectApiToken);
10
11 runApp(const MyApp());
12}
13
14class MyApp extends StatelessWidget {
15 const MyApp({super.key});
16
17 @override
18 Widget build(BuildContext context) {
19 return const MaterialApp(
20 debugShowCheckedModeBanner: false,
21 title: 'Map Selection',
22 home: MyHomePage(),
23 );
24 }
25}
26
27class MyHomePage extends StatefulWidget {
28 const MyHomePage({super.key});
29
30 @override
31 State<MyHomePage> createState() => _MyHomePageState();
32}
33
34class _MyHomePageState extends State<MyHomePage> {
35 late GemMapController _mapController;
36
37 Landmark? _focusedLandmark;
38
39 @override
40 void dispose() {
41 GemKit.release();
42 super.dispose();
43 }
44
45 @override
46 Widget build(BuildContext context) {
47 return Scaffold(
48 appBar: AppBar(
49 backgroundColor: Colors.deepPurple[900],
50 title: const Text('Map Selection', style: TextStyle(color: Colors.white)),
51 ),
52 body: Stack(children: [
53 GemMap(
54 onMapCreated: _onMapCreated,
55 ),
56 if (_focusedLandmark != null)
57 Align(
58 alignment: Alignment.bottomCenter,
59 child: LandmarkPanel(
60 onCancelTap: _onCancelLandmarkPanelTap,
61 landmark: _focusedLandmark!,
62 ))
63 ]),
64 resizeToAvoidBottomInset: false,
65 );
66 }
67
68 // The callback for when map is ready to use.
69 void _onMapCreated(GemMapController controller) {
70 // Save controller for further usage.
71 _mapController = controller;
72
73 // Listen for map landmark selection events.
74 _registerLandmarkTapCallback();
75 }
76
77 void _registerLandmarkTapCallback() {
78 _mapController.registerTouchCallback((pos) async {
79 // Select the object at the tap position.
80 _mapController.setCursorScreenPosition(pos);
81
82 // Get the selected landmarks.
83 final landmarks = _mapController.cursorSelectionLandmarks();
84
85 // Check if there is a selected Landmark.
86 if (landmarks.isNotEmpty) {
87 // Highlight the selected landmark.
88 _mapController.activateHighlight(landmarks);
89
90 setState(() {
91 _focusedLandmark = landmarks[0];
92 });
93
94 // Use the map controller to center on coordinates.
95 _mapController.centerOnCoordinates(landmarks[0].coordinates);
96 }
97 });
98 }
99
100 void _onCancelLandmarkPanelTap() {
101 // Remove landmark highlights from the map.
102 _mapController.deactivateAllHighlights();
103
104 setState(() {
105 _focusedLandmark = null;
106 });
107 }
108}
The dart
material package is imported, along with the
required gem_kit
packages.
The selection is highlighted when it is tapped. The taps are listened to by _registerLandmarkTapCallback
, which is called in the _onMapCreated()
callback, executed when the
interactive map is initialized and ready for use.