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

21.04.2019
Статья написана для старой версии Flutter и сейчас обновляется. Часть кода может не компилироваться на актуальной версии.

Если вам нужны карты, бесплатно, быстро и сейчас. То стоит обратить свое внимание на проект 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",
    )])