Display the Whole World in Flutter

This tutorial shows how to display a zoomed-out view of the entire world — perfect for global dashboards, flight maps, or selecting a region.

Prerequisites

Before you begin, ensure you have:

• Completed the Flutter Setup Guide
• A MapMetrics API key and style URL from the MapMetrics Portal

Basic World View

Show the entire world with a low zoom level:

import 'package:flutter/material.dart';
import 'package:mapmetrics/mapmetrics.dart';

class WholeWorldScreen extends StatefulWidget {
  @override
  _WholeWorldScreenState createState() => _WholeWorldScreenState();
}

class _WholeWorldScreenState extends State<WholeWorldScreen> {
  MapMetricsController? mapController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('World View')),
      body: MapMetrics(
        styleUrl:
            'https://gateway.mapmetrics.org/styles/YOUR_STYLE_ID?token=YOUR_API_KEY',
        onMapCreated: (MapMetricsController controller) {
          mapController = controller;
        },
        initialCameraPosition: CameraPosition(
          target: LatLng(20.0, 0.0), // Center on equator
          zoom: 1.0,                  // Zoomed out to see the whole world
        ),
      ),
    );
  }
}

World Map with Global Markers

Display markers for major world cities on a global view:

import 'package:flutter/material.dart';
import 'package:mapmetrics/mapmetrics.dart';

class GlobalMarkersScreen extends StatefulWidget {
  @override
  _GlobalMarkersScreenState createState() => _GlobalMarkersScreenState();
}

class _GlobalMarkersScreenState extends State<GlobalMarkersScreen> {
  MapMetricsController? mapController;

  final List<Map<String, dynamic>> worldCities = [
    {'name': 'New York', 'lat': 40.7128, 'lng': -74.006, 'continent': 'NA'},
    {'name': 'Los Angeles', 'lat': 34.0522, 'lng': -118.2437, 'continent': 'NA'},
    {'name': 'London', 'lat': 51.5074, 'lng': -0.1276, 'continent': 'EU'},
    {'name': 'Paris', 'lat': 48.8566, 'lng': 2.3522, 'continent': 'EU'},
    {'name': 'Tokyo', 'lat': 35.6762, 'lng': 139.6503, 'continent': 'AS'},
    {'name': 'Shanghai', 'lat': 31.2304, 'lng': 121.4737, 'continent': 'AS'},
    {'name': 'Dubai', 'lat': 25.2048, 'lng': 55.2708, 'continent': 'AS'},
    {'name': 'Mumbai', 'lat': 19.076, 'lng': 72.8777, 'continent': 'AS'},
    {'name': 'Sydney', 'lat': -33.8688, 'lng': 151.2093, 'continent': 'OC'},
    {'name': 'Sao Paulo', 'lat': -23.5505, 'lng': -46.6333, 'continent': 'SA'},
    {'name': 'Cairo', 'lat': 30.0444, 'lng': 31.2357, 'continent': 'AF'},
    {'name': 'Lagos', 'lat': 6.5244, 'lng': 3.3792, 'continent': 'AF'},
    {'name': 'Singapore', 'lat': 1.3521, 'lng': 103.8198, 'continent': 'AS'},
    {'name': 'Moscow', 'lat': 55.7558, 'lng': 37.6173, 'continent': 'EU'},
    {'name': 'Mexico City', 'lat': 19.4326, 'lng': -99.1332, 'continent': 'NA'},
  ];

  final Map<String, double> continentHues = {
    'NA': BitmapDescriptor.hueBlue,
    'SA': BitmapDescriptor.hueGreen,
    'EU': BitmapDescriptor.hueRed,
    'AF': BitmapDescriptor.hueOrange,
    'AS': BitmapDescriptor.hueViolet,
    'OC': BitmapDescriptor.hueCyan,
  };

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Global Cities')),
      body: Stack(
        children: [
          MapMetrics(
            styleUrl:
                'https://gateway.mapmetrics.org/styles/YOUR_STYLE_ID?token=YOUR_API_KEY',
            onMapCreated: (MapMetricsController controller) {
              mapController = controller;
            },
            initialCameraPosition: CameraPosition(
              target: LatLng(20.0, 0.0),
              zoom: 1.5,
            ),
            markers: worldCities.map((city) {
              return Marker(
                markerId: MarkerId(city['name']),
                position: LatLng(city['lat'], city['lng']),
                icon: BitmapDescriptor.defaultMarkerWithHue(
                  continentHues[city['continent']]!,
                ),
                infoWindow: InfoWindow(title: city['name']),
                onTap: () {
                  mapController?.animateCamera(
                    CameraUpdate.newLatLngZoom(
                      LatLng(city['lat'], city['lng']),
                      10.0,
                    ),
                  );
                },
              );
            }).toSet(),
          ),
          // Legend
          Positioned(
            bottom: 16,
            left: 16,
            child: Card(
              child: Padding(
                padding: EdgeInsets.all(10),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    _legendRow(Colors.blue, 'North America'),
                    _legendRow(Colors.green, 'South America'),
                    _legendRow(Colors.red, 'Europe'),
                    _legendRow(Colors.orange, 'Africa'),
                    _legendRow(Colors.purple, 'Asia'),
                    _legendRow(Colors.cyan, 'Oceania'),
                  ],
                ),
              ),
            ),
          ),
          // Zoom out button
          Positioned(
            top: 16,
            right: 16,
            child: FloatingActionButton.small(
              onPressed: () {
                mapController?.animateCamera(
                  CameraUpdate.newLatLngZoom(LatLng(20.0, 0.0), 1.5),
                );
              },
              child: Icon(Icons.public),
              tooltip: 'Show World',
            ),
          ),
        ],
      ),
    );
  }

  Widget _legendRow(Color color, String label) {
    return Padding(
      padding: EdgeInsets.symmetric(vertical: 1),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(Icons.circle, color: color, size: 10),
          SizedBox(width: 4),
          Text(label, style: TextStyle(fontSize: 11)),
        ],
      ),
    );
  }
}

Region Selector

Let users tap a continent to zoom in:

import 'package:flutter/material.dart';
import 'package:mapmetrics/mapmetrics.dart';

class RegionSelectorScreen extends StatefulWidget {
  @override
  _RegionSelectorScreenState createState() => _RegionSelectorScreenState();
}

class _RegionSelectorScreenState extends State<RegionSelectorScreen> {
  MapMetricsController? mapController;

  final List<Map<String, dynamic>> regions = [
    {'name': 'Europe', 'lat': 50.0, 'lng': 10.0, 'zoom': 4.0},
    {'name': 'Asia', 'lat': 35.0, 'lng': 100.0, 'zoom': 3.0},
    {'name': 'N. America', 'lat': 40.0, 'lng': -100.0, 'zoom': 3.0},
    {'name': 'S. America', 'lat': -15.0, 'lng': -60.0, 'zoom': 3.0},
    {'name': 'Africa', 'lat': 5.0, 'lng': 20.0, 'zoom': 3.0},
    {'name': 'Oceania', 'lat': -25.0, 'lng': 140.0, 'zoom': 3.5},
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Region Selector')),
      body: Column(
        children: [
          Container(
            padding: EdgeInsets.all(8),
            child: Wrap(
              spacing: 6,
              runSpacing: 6,
              children: [
                ActionChip(
                  avatar: Icon(Icons.public, size: 16),
                  label: Text('World'),
                  onPressed: () {
                    mapController?.animateCamera(
                      CameraUpdate.newLatLngZoom(LatLng(20.0, 0.0), 1.0),
                    );
                  },
                ),
                ...regions.map((r) => ActionChip(
                      label: Text(r['name']),
                      onPressed: () {
                        mapController?.animateCamera(
                          CameraUpdate.newLatLngZoom(
                            LatLng(r['lat'], r['lng']),
                            r['zoom'],
                          ),
                        );
                      },
                    )),
              ],
            ),
          ),
          Expanded(
            child: MapMetrics(
              styleUrl:
                  'https://gateway.mapmetrics.org/styles/YOUR_STYLE_ID?token=YOUR_API_KEY',
              onMapCreated: (MapMetricsController controller) {
                mapController = controller;
              },
              initialCameraPosition: CameraPosition(
                target: LatLng(20.0, 0.0),
                zoom: 1.0,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

World View Zoom Levels

Zoom	View
0 - 1	Full globe / world
2 - 3	Continent
4 - 6	Country
7 - 10	Region / State
11 - 14	City
15 - 18	Street / Building

Next Steps

• Restrict Map Panning — Lock to a specific region
• Jump to Locations — Navigate between locations
• Arc Layer — Draw flight routes across the globe

---

Tip: At zoom level 1, the map shows the whole world. Use LatLng(20.0, 0.0) as the center for a balanced view that shows all continents. For global dashboards, disable tilt and rotation to keep the view clean.