• Optimization
  • Navigation
  • Tracking
  • Maps
  • Places

Mapview Polygon

This example shows how to add Polygons in MapView

  • Add Polygon from a set of Latlng
  • Set Polygon visibility
  • Set Polygon color
Android snapshotiOS snapshot

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

PlaceFillPage view source

1import 'dart:async';
2import 'dart:typed_data';
4import 'package:flutter/material.dart';
5import 'package:flutter/services.dart';
6import 'package:nb_maps_flutter/nb_maps_flutter.dart';
8import 'page.dart';
10class PlaceFillPage extends ExamplePage {
11 PlaceFillPage() : super(const Icon(Icons.check_circle), 'Place fill');
14 Widget build(BuildContext context) {
15 return const PlaceFillBody();
16 }

Code summary

The above code snippet displays a map with various functionalities related to polygons. The user can interact with the map, add and remove fills, change fill properties (such as color, opacity, outline color, and pattern), move fills, and toggle the fill's draggable state. It utilizes the nb_maps_flutter package for map-related functionalities.

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

PlaceFillBody Class: is a StatefulWidget class representing the main body of the PlaceFillPage. It manages the state of the PlaceFillPage and contains the map and various buttons for interacting with the fills.

PlaceFillBodyState Class: This is the state class for the PlaceFillBody widget. It handles the interactions with the map, such as adding fills, updating fill properties, and removing fills. Some key methods include:

  • _onMapCreated: A callback method called when the map is created. It sets the map controller and adds listeners for fill taps and feature drags (used for dragging the fill on the map).
  • _onFeatureDrag: A method called when a feature (fill) on the map is dragged. It currently handles the start, drag, and end events for dragging.
  • _onStyleLoaded: A callback method called when the map style is loaded. It adds an image from an asset to the style.

build Method: The build method returns a Column widget containing a map (NBMap) and a set of buttons for interacting with the fills. The buttons include 'add', 'remove', 'change fill-opacity', 'change fill-color', 'change fill-outline-color', 'change fill-pattern', 'change position', and 'toggle draggable'. The map displays fills, and when a fill is tapped, it becomes selected, and its properties can be modified using the buttons.

Have Questions ?