Sygic Maps in Flutter

You may have noticed that there is no native widget for displaying a map. However, with help of flutter_map package you can use Sygic Maps!

Usage

First of all, you have to include the flutter_map package to your pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter

  flutter_map: ^0.0.10

You will also most probably want to import the basic types:

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

Then you can include Sygic Maps inside simple Flutter widget that you can place anywhere in your widget hierarchy.

class SimpleMap extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new FlutterMap(
      options: new MapOptions(
        center: new LatLng(51.506292, -0.114374),
        zoom: 13.0,
      ),
      layers: [
        new TileLayerOptions(
          urlTemplate: "https://maps.api.sygic.com/tile/{apiKey}/{z}/{x}/{y}",
          additionalOptions: {
            'apiKey': 'ffDgde5rCn6jjR35GJWD82hUC',
          },
        ),
      ],
    );
  }
} 

This API key can be tried for limited number of requests with OSM maps for free. If you wish to test Sygic Maps integration more seriously, you can request your own key.

Markers

To add markers to map, you can add another layer with MarkerLayerOptions.

class MapWithMarkers extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new FlutterMap(
      options: new MapOptions(
        center: new LatLng(51.506292, -0.114374),
        zoom: 13.0,
      ),
      layers: [
        new TileLayerOptions(
          urlTemplate: "https://maps.api.sygic.com/tile/{apiKey}/{z}/{x}/{y}",
          additionalOptions: {
            'apiKey': 'ffDgde5rCn6jjR35GJWD82hUC',
          },
        ),
        new MarkerLayerOptions(
          markers: [
            _buildMarker(new LatLng(51.504758, -0.113666)),
            _buildMarker(new LatLng(51.509496, -0.098540)),
          ],
        ),
      ],
    );
  }

  Marker _buildMarker(LatLng latLng) {
    return new Marker(
            point: latLng,
            width: 60.0,
            height: 55.0,
            anchor: AnchorPos.top,
            builder: (BuildContext context) => const Icon(
                  Icons.person_pin_circle,
                  size: 60.0,
                  color: Colors.red,
                ),
          );
  }
}

Reacting to tap

You can also react to taps and eg. add a marker at the tapped location.

class MapWithDynamicMarkers extends StatefulWidget {
  @override
  MapWithMarkersState createState() {
    return new MapWithMarkersState();
  }
}

class MapWithMarkersState extends State<MapWithDynamicMarkers> {
  final List<LatLng> _markers = [];

  @override
  Widget build(BuildContext context) {
    return new FlutterMap(
      options: new MapOptions(
        center: new LatLng(51.506292, -0.114374),
        zoom: 13.0,
        onTap: (LatLng point) {
          setState(() {
            if (5 <= _markers.length)
              _markers.clear();
            else
              _markers.add(point);
          });
        },
      ),
      layers: [
        new TileLayerOptions(
          urlTemplate: "https://maps.api.sygic.com/tile/{apiKey}/{z}/{x}/{y}",
          additionalOptions: {
            'apiKey': 'ffDgde5rCn6jjR35GJWD82hUC',
          },
        ),
        new MarkerLayerOptions(
          markers: _markers.map((point) => _buildMarker(point)).toList(),
        ),
      ],
    );
  }

  Marker _buildMarker(LatLng latLng) {
    return new Marker(
      point: latLng,
      width: 60.0,
      height: 55.0,
      anchor: AnchorPos.top,
      builder: (BuildContext context) => const Icon(
            Icons.person_pin_circle,
            size: 60.0,
            color: Colors.red,
          ),
    );
  }
}