static_map 0.2.0

Quickly generate customizable static maps with support for markers and paths.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:latlong2/latlong.dart';
import 'package:static_map/static_map.dart';
import 'dart:math' as math;

void main() {
  StaticMap.initialize(apiKey: 'your_api_key_here');

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Journey Static Map Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Journey Static Map Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    int cappedDevicePixelRatio =
        math.min(3, MediaQuery.of(context).devicePixelRatio).ceil();

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: LayoutBuilder(builder: (context, constraints) {
        return Center(
          child: StaticMapImage(
            options: StaticMapOptions(
              width: 400,
              height: 400,
              padding: 50,
              scale: cappedDevicePixelRatio,
              overlays: [
                const StaticMapPath(
                  polyline:
                      'w}seFdghjVrDe@xAS~AQfAMJAZElAO~@KXC~AQWcEGw@IqAS_DEu@OgB?IAOASAQc@qGi@gI_@wFIqAg@gIzAS|ASvDc@l@Gx@Kt@I^G?YHu@DSBGBIJQBE^c@d@o@Pc@FWBKBS?m@g@yHC_@C]c@}GIiASaDKyAAWMeBEk@IoAIkAO{BOaCKqAGcAEk@Eu@IeAIyAMiBEw@SeDE?',
                  opacity: 0.9,
                  outlineSize: 0,
                ),
                const StaticMapMarker(
                  point: LatLng(37.79052, -122.43587),
                  color: Color(0xffC21DB3),
                  size: 8,
                ),
                const StaticMapMarker(
                  point: LatLng(37.78603, -122.41134),
                  color: Color(0xffC21DB3),
                  size: 8,
                ),
              ],
            ),
          ),
        );
      }),
    );
  }
}