Draw Shapes on Map¶
|
|
|
Setup¶
Prerequisites¶
Build and Run¶
Navigate to the draw_shapes directory within the Flutter examples directory. This is the project folder for this example.
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.
Run: flutter pub get
Configure the native parts:
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:
1 allprojects {
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 project pathname
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 --debugorflutter run --release
How It Works¶
The example app demonstrates the following features:
Draw and display polylines, polygons, and points on the map.
Handle user interaction through app bar buttons.
|
|||
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.
Run: flutter pub get
Configure the native parts:
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:
1 allprojects {
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 project pathname
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 --debugorflutter run --release
Main Application Setup¶
1import 'package:gem_kit/core.dart';
2import 'package:gem_kit/map.dart';
3
4import 'package:flutter/material.dart' hide Animation;
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}
This imports necessary packages, initializes GemKit, and sets up the main entry point of the app.
UI and Map Interaction¶
1class MyApp extends StatelessWidget {
2 const MyApp({super.key});
3
4 @override
5 Widget build(BuildContext context) {
6 return const MaterialApp(
7 debugShowCheckedModeBanner: false,
8 title: 'Draw Shapes',
9 home: MyHomePage(),
10 );
11 }
12}
13
14class MyHomePage extends StatefulWidget {
15 const MyHomePage({super.key});
16
17 @override
18 State<MyHomePage> createState() => _MyHomePageState();
19}
20
21class _MyHomePageState extends State<MyHomePage> {
22 late GemMapController _mapController;
23
24 @override
25 void dispose() {
26 GemKit.release();
27 super.dispose();
28 }
29
30 @override
31 Widget build(BuildContext context) {
32 return Scaffold(
33 appBar: AppBar(
34 backgroundColor: Colors.deepPurple[900],
35 title: const Text('Draw Shapes', style: TextStyle(color: Colors.white)),
36 actions: [
37 IconButton(
38 onPressed: _onPolylineButtonPressed,
39 icon: const Icon(
40 Icons.adjust,
41 color: Colors.white,
42 )),
43 IconButton(
44 onPressed: _onPolygonButtonPressed,
45 icon: const Icon(
46 Icons.change_history,
47 color: Colors.white,
48 )),
49 IconButton(
50 onPressed: _onPointsButtonPressed,
51 icon: const Icon(
52 Icons.more_horiz,
53 color: Colors.white,
54 ))
55 ],
56 ),
57 body: GemMap(
58 onMapCreated: _onMapCreated,
59 ),
60 );
61 }
This code defines the main UI elements, including the map and an app bar with buttons to draw polylines, polygons, and points on the map.
Drawing and Displaying Shapes¶
1// The callback for when map is ready to use.
2void _onMapCreated(GemMapController controller) async {
3 // Save controller for further usage.
4 _mapController = controller;
5}
6
7// Method to draw and center on a polyline
8void _onPolylineButtonPressed() {
9 // Create a marker collection
10 final markerCollection = MarkerCollection(
11 markerType: MarkerType.polyline, name: 'Polyline marker collection');
12
13 // Set coordinates of marker
14 final marker = Marker();
15 marker.setCoordinates([
16 Coordinates(latitude: 52.360495, longitude: 4.936882),
17 Coordinates(latitude: 52.360495, longitude: 4.836882),
18 ]);
19 markerCollection.add(marker);
20
21 _showMarkerCollectionOnMap(markerCollection);
22}
23
24// Method to draw and center on a polygon
25void _onPolygonButtonPressed() {
26 // Create a marker collection
27 final markerCollection = MarkerCollection(
28 markerType: MarkerType.polygon, name: 'Polygon marker collection');
29
30 // Set coordinates of marker
31 final marker = Marker();
32 marker.setCoordinates([
33 Coordinates(latitude: 52.340234, longitude: 4.886882),
34 Coordinates(latitude: 52.300495, longitude: 4.936882),
35 Coordinates(latitude: 52.300495, longitude: 4.836882),
36 ]);
37 markerCollection.add(marker);
38
39 _showMarkerCollectionOnMap(markerCollection);
40}
41
42// Method to draw and center on points
43void _onPointsButtonPressed() {
44 // Create a marker collection
45 final markerCollection = MarkerCollection(
46 markerType: MarkerType.point, name: 'Points marker collection');
47
48 // Set coordinates of marker
49 final marker = Marker();
50 marker.setCoordinates([
51 Coordinates(latitude: 52.380495, longitude: 4.930882),
52 Coordinates(latitude: 52.380495, longitude: 4.900882),
53 Coordinates(latitude: 52.380495, longitude: 4.870882),
54 Coordinates(latitude: 52.380495, longitude: 4.840882),
55 ]);
56 markerCollection.add(marker);
57
58 _showMarkerCollectionOnMap(markerCollection);
59}
This code snippet defines the methods to draw and display different shapes (polyline, polygon, points) on the map. Each method creates a MarkerCollection, adds markers with specific coordinates, and displays them on the map.
Utility Functions¶
1void _showMarkerCollectionOnMap(MarkerCollection markerCollection) {
2 final settings = MarkerCollectionRenderSettings();
3
4 // Clear previous markers from the map
5 _mapController.preferences.markers.clear();
6
7 // Show the current marker on map and center on it
8 _mapController.preferences.markers
9 .add(markerCollection, settings: settings);
10 _mapController.centerOnArea(markerCollection.area);
11}
This utility method clears any previous markers on the map, then displays the new MarkerCollection and centers the map on the area containing the markers.