MapMetrics Flutter SDK
Overview
The MapMetrics Flutter SDK provides a cross-platform solution for integrating MapMetrics Atlas maps into your Flutter applications, supporting both iOS and Android platforms.
Features
- Cross-platform support (iOS & Android)
- Interactive map rendering
- Marker and annotation support
- Custom styling and themes
- Gesture controls and camera animations
- GeoJSON layer support
- Real-time data visualization
Quick Start
Add the dependency to your pubspec.yaml:
yaml
dependencies:
mapmetrics: ^0.1.0dart
import 'package:flutter/material.dart';
import 'package:mapmetrics/mapmetrics.dart';
class MapScreen extends StatefulWidget {
@override
_MapScreenState createState() => _MapScreenState();
}
class _MapScreenState extends State<MapScreen> {
MapMetricsController? mapController;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('MapMetrics Map')),
body: MapMetrics(
styleUrl: 'https://gateway.mapmetrics.org/styles/YOUR_STYLE_ID?token=YOUR_API_KEY',
onMapCreated: (MapMetricsController controller) {
mapController = controller;
},
initialCameraPosition: CameraPosition(
target: LatLng(40.7128, -74.0060),
zoom: 10.0,
),
),
);
}
}Tutorials
Get started with our step-by-step guides:
- Flutter MapMetrics Introduction - Overview and prerequisites
- Setup Guide - Project creation, dependencies, and platform configuration
- Basic Map - Interactive map with zoom, location tracking, and camera controls
- Markers & Annotations - Adding markers to your map
- Custom Styling - Customize your map appearance
- Map Interactions - Handle taps, gestures, and events
- Add a Popup - Display popups and info windows on markers
- Add a Polyline - Draw lines and routes on the map
- Add a Polygon - Draw filled shapes and zones
- Draw a Circle - Draw circular areas and radius zones
- Draggable Marker - Let users drag markers to pick locations
- Fly to a Location - Smooth camera animations to any place
- Jump to Locations - Navigate through a series of locations
- Locate the User - Show the user's GPS location on the map
- Fullscreen Map - Immersive fullscreen map experience
- Set Pitch and Bearing - 3D perspective and rotation controls
- Add Image Marker - Custom image icons for markers
- Navigation Controls - Zoom, compass, and location buttons
- Disable Scroll Zoom - Control zoom gestures for embedded maps
- Fit to Bounding Box - Zoom to fit markers or regions
- Animate Camera Around Point - Orbiting camera animation
- Restrict Map Panning - Limit map to a specific area
- Multiple Geometries - Markers, lines, polygons, and circles together
- Animate a Marker - Move markers along a route
- Measure Distances - Tap-to-measure with Haversine formula
- Toggle Interactions - Enable/disable individual gestures
- Add Clusters - Group markers into clusters for large datasets
- Add a Heatmap - Visualize data density with color gradients
- Popup on Click - Show detail cards when tapping markers
- Animate a Line - Animate a route being drawn on the map
- Filter Markers - Filter by category or search text
- Sync Multiple Maps - Side-by-side synced map comparison
- Slowly Fly to Location - Cinematic slow camera flights
- Show Polygon Info on Click - Tap polygons to see zone info
- Game-Style Controls - D-pad and button navigation
- Migrate from Google Maps - Switch from google_maps_flutter
Other SDKs
- iOS SDK - For native iOS applications
- Android SDK - For native Android applications
- Web SDK - For web and hybrid applications
Questions?
If you have specific requirements or questions about Flutter support, please reach out to our team.