• Optimization
  • Navigation
  • Tracking
  • Maps
  • Places

Mapview Circle Annotation


This example shows how to add Circle annotations in MapView

  • Add Circle annotations from a set of Latlng
  • Set Circle annotation opacity, color, radius
  • Set Circle annotation stroke width, stroke color
Android snapshotiOS snapshot

For all code examples, refer to Flutter Maps SDK Code Examples

PlaceCirclePage view source

1import 'dart:async';
2import 'dart:math';
4import 'package:flutter/material.dart';
5import 'package:nb_maps_flutter/nb_maps_flutter.dart';
7import 'page.dart';
9class PlaceCirclePage extends ExamplePage {
10 PlaceCirclePage() : super(const Icon(Icons.check_circle), 'Place circle');
13 Widget build(BuildContext context) {
14 return const PlaceCircleBody();
15 }
18class PlaceCircleBody extends StatefulWidget {

Code summary

The above code snippet displays nbMap with various functionalities related to circles. The user can interact with the map, add and remove circles, change circle properties (such as opacity, radius, color, blur, and stroke), move circles, and toggle the circle's draggable state. It utilizes the nb_maps_flutter package for map-related functionalities.

PlaceCirclePage Class: extends the ExamplePage class and represents a page in the app that demonstrates circle-related functionalities. The page is associated with an icon (check_circle icon) and a title ('Place circle'). The build method returns a PlaceCircleBody widget.

PlaceCircleBody Class: is a StatefulWidget class representing the main body of the PlaceCirclePage. It manages the state of the PlaceCirclePage and contains the map and various buttons for interacting with circles.

PlaceCircleBodyState Class: is the state class for the PlaceCircleBody widget. It handles the interactions with the map, such as adding circles, updating circle properties, and removing circles. Some key methods include:

  • _onMapCreated: A callback method called when the map is created. It sets the map controller and adds a listener for circle taps.
  • _onCircleTapped: A method called when a circle on the map is tapped. It changes the properties of the selected circle, making it larger and updates its appearance. The previously selected circle, if any, is reverted to its original size and appearance.
  • _updateSelectedCircle: A method to update the properties of the selected circle.
  • _add: A method to add a new circle to the map. It calculates the position of the circle based on the current _circleCount and the center of the map.
  • _remove: A method to remove the selected circle from the map.
  • _changePosition: A method to change the position of the selected circle on the map.
  • _changeDraggable: A method to toggle the draggable property of the selected circle.
  • _getLatLng: A method to retrieve the latitude and longitude of the selected circle and display it using a SnackBar. Methods to change various circle properties like opacity, radius, color, blur, stroke width, and stroke color.

build Method: The build method returns a Column widget containing a map (NBMap) and a set of buttons for interacting with the circles. The buttons include 'add', 'remove', 'change circle-opacity', 'change circle-radius', 'change circle-color', 'change circle-blur', 'change circle-stroke-width', 'change circle-stroke-color', 'change circle-stroke-opacity', 'change position', 'toggle draggable', and 'get current LatLng'. The map displays circles, and when a circle is tapped, it becomes selected, and its properties can be modified using the buttons.

Have Questions ?