Пакет flutter_map | OpenStreetMap - бесплатные карты для Flutter

21.04.2019
This article was written for an older Flutter version and is being updated. Some code may not compile on the current version.

Если вам нужны карты, бесплатно, быстро и сейчас. То стоит обратить свое внимание на проект OpenStreetMap.!

OpenStreetMap является картой мира, созданной такими же людьми, как и вы, и может свободно использоваться под открытой лицензией.

Для отображения тайловых карт удобен пакет flutter_map , вместе с этим пакетом нужно подключить еще пакет latlong Подключение в файле зависимостей pubspec.yaml: 

dependencies:
  flutter_map: any #последния версия пакета
  latlong: 0.6.1 #этот пакет нужно подключить для вызова объекта LatLng

Подключение в файле .dart: 

import 'package:flutter_map/flutter_map.dart';
import 'package:latlong/latlong.dart';

Пример вставки виджета с картой

Widget build(BuildContext context) {
  return new FlutterMap(
    options: new MapOptions(
      center: new LatLng(51.5, -0.09),
      zoom: 13.0,
    ),
    layers: [
      new TileLayerOptions(
        urlTemplate: "https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}@2x.png?access_token={accessToken}",
        additionalOptions: {
          'accessToken': '<PUT_ACCESS_TOKEN_HERE>',
          'id': 'mapbox.streets',
        },
      ),
      new MarkerLayerOptions(
        markers: [
        new Marker(
          width: 80.0,
          height: 80.0,
          point: new LatLng(51.5, -0.09),
          builder: (ctx) => new Container(child: new FlutterLogo()))
        ])]);
}

Для использования карт, вам нужен сервер карт работающий с OpenStreetMap. Такой сервер можно создать самим или зарегистрироваться и получить доступ на существующих картографических сервисах. Но есть и открытые проекты, к примеру http://maps.sputnik.ru

Условия использования АПИ Карт Спутник смотрите на официальном сайте http://api.sputnik.ru/maps/ 

FlutterMap(
options: MapOptions(
  center: LatLng(59.939095, 30.315868),
  zoom: 10.0,
  minZoom: 8,
  maxZoom: 16),
  layers: [
    TileLayerOptions(
      urlTemplate: "http://tiles.maps.sputnik.ru/{z}/{x}/{y}.png",
    )])