Add a GeoJSON Line in Flutter

This tutorial shows how to add a GeoJSON LineString to your MapMetrics Flutter map using a source and layer approach — ideal for routes, borders, or paths.

Prerequisites

Before you begin, ensure you have:

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

Basic GeoJSON Line

Add a GeoJSON line source and render it as a styled line layer:

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

class GeoJsonLineScreen extends StatefulWidget {
  @override
  _GeoJsonLineScreenState createState() => _GeoJsonLineScreenState();
}

class _GeoJsonLineScreenState extends State<GeoJsonLineScreen> {
  MapMetricsController? mapController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('GeoJSON Line')),
      body: MapMetrics(
        styleUrl:
            'https://gateway.mapmetrics.org/styles/YOUR_STYLE_ID?token=YOUR_API_KEY',
        onMapCreated: (MapMetricsController controller) {
          mapController = controller;
        },
        initialCameraPosition: CameraPosition(
          target: LatLng(50.0, 10.0),
          zoom: 4.0,
        ),
        onStyleLoaded: () {
          _addGeoJsonLine();
        },
      ),
    );
  }

  void _addGeoJsonLine() {
    // Define the GeoJSON data
    final geoJson = {
      'type': 'Feature',
      'properties': {},
      'geometry': {
        'type': 'LineString',
        'coordinates': [
          [2.349902, 48.852966],   // Paris
          [-0.1276, 51.5074],      // London
          [13.405, 52.52],         // Berlin
          [16.3738, 48.2082],      // Vienna
          [12.4964, 41.9028],      // Rome
        ],
      },
    };

    // Add the GeoJSON source
    mapController?.addGeoJsonSource('route-source', geoJson);

    // Add a line layer using the source
    mapController?.addLineLayer(
      'route-layer',
      'route-source',
      lineColor: '#3b82f6',
      lineWidth: 4.0,
      lineJoin: 'round',
      lineCap: 'round',
    );
  }
}

Styled GeoJSON Line

Customize the line with dashes, opacity, and width:

void _addStyledLine() {
  final geoJson = {
    'type': 'Feature',
    'properties': {},
    'geometry': {
      'type': 'LineString',
      'coordinates': [
        [-3.7038, 40.4168],  // Madrid
        [2.349902, 48.853],  // Paris
        [13.405, 52.52],     // Berlin
      ],
    },
  };

  mapController?.addGeoJsonSource('styled-route', geoJson);

  mapController?.addLineLayer(
    'styled-route-layer',
    'styled-route',
    lineColor: '#ef4444',
    lineWidth: 5.0,
    lineOpacity: 0.8,
    lineDashArray: [2.0, 1.0], // dashed pattern
    lineJoin: 'round',
    lineCap: 'round',
  );
}

Multiple GeoJSON Lines

Display several routes with different styles:

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

class MultipleGeoJsonLinesScreen extends StatefulWidget {
  @override
  _MultipleGeoJsonLinesScreenState createState() =>
      _MultipleGeoJsonLinesScreenState();
}

class _MultipleGeoJsonLinesScreenState
    extends State<MultipleGeoJsonLinesScreen> {
  MapMetricsController? mapController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Multiple GeoJSON Lines')),
      body: MapMetrics(
        styleUrl:
            'https://gateway.mapmetrics.org/styles/YOUR_STYLE_ID?token=YOUR_API_KEY',
        onMapCreated: (MapMetricsController controller) {
          mapController = controller;
        },
        initialCameraPosition: CameraPosition(
          target: LatLng(48.0, 8.0),
          zoom: 4.0,
        ),
        onStyleLoaded: () {
          _addMultipleLines();
        },
      ),
    );
  }

  void _addMultipleLines() {
    // Route 1: Northern Europe
    final northRoute = {
      'type': 'Feature',
      'properties': {},
      'geometry': {
        'type': 'LineString',
        'coordinates': [
          [-0.1276, 51.5074],  // London
          [4.9041, 52.3676],   // Amsterdam
          [13.405, 52.52],     // Berlin
          [21.0122, 52.2297],  // Warsaw
        ],
      },
    };

    // Route 2: Southern Europe
    final southRoute = {
      'type': 'Feature',
      'properties': {},
      'geometry': {
        'type': 'LineString',
        'coordinates': [
          [-9.1393, 38.7223],  // Lisbon
          [-3.7038, 40.4168],  // Madrid
          [2.1734, 41.3851],   // Barcelona
          [12.4964, 41.9028],  // Rome
          [23.7275, 37.9838],  // Athens
        ],
      },
    };

    mapController?.addGeoJsonSource('north-route', northRoute);
    mapController?.addLineLayer(
      'north-route-layer',
      'north-route',
      lineColor: '#3b82f6',
      lineWidth: 4.0,
      lineJoin: 'round',
      lineCap: 'round',
    );

    mapController?.addGeoJsonSource('south-route', southRoute);
    mapController?.addLineLayer(
      'south-route-layer',
      'south-route',
      lineColor: '#ef4444',
      lineWidth: 4.0,
      lineDashArray: [3.0, 2.0],
      lineJoin: 'round',
      lineCap: 'round',
    );
  }
}

GeoJSON Line Properties

Property	Type	Description
lineColor	String	Line color as hex string
lineWidth	double	Width of the line in pixels
lineOpacity	double	Opacity from 0.0 to 1.0
lineDashArray	List<double>	Dash and gap lengths
lineJoin	String	How line segments join: round, bevel, miter
lineCap	String	Shape at line ends: round, butt, square

Next Steps

• Add a GeoJSON Polygon — Draw filled areas from GeoJSON
• Draw GeoJSON Points — Render point data on the map
• Animate a Line — Animate a line being drawn

---

Tip: GeoJSON sources are powerful for displaying dynamic data. You can update the source data at runtime using mapController?.setGeoJsonSource('source-id', newData) to reflect real-time changes.