套件詳情v2.0.1

universe

在 Flutter 中使用互動地圖的簡單且彈性方式。受到 Leaflet.js 的啟發。

AndroidiOSmacOS

pub.dev API 文件原始碼

近 30 天下載: 182
喜歡數: 102
Pub 分數: 140

安裝套件

flutter pub add universe

套件介紹

根據套件公開資料產生的選型評估，僅供參考。

Universe 是一個 Flutter 套件，提供了一種簡單且彈性的方式，將互動式地圖整合到 Flutter 應用程式中，靈感來自 Leaflet.js。它支援動態地圖渲染、自訂標記以及跨多個平台的觸控互動。透過輕量級 API 和響應式設計，讓開發者能以最少設定建構豐富的地空間體驗。此套件非常適合需要地圖視覺化、定位追蹤或空間資料呈現的應用。

適用情境

互動式地圖顯示
基於位置的應用程式功能
地理空間數據可視化
地圖疊加層和註釋
即時追蹤介面

主要特色

跨平台相容性
可自定地圖圖層
觸控互動支援
輕量且直覺的 API
支援標記和彈出視窗

適合對象

行動應用開發者
地理位置功能實現者
數據可視化項目
原型設計互動式地圖

使用建議

需要互聯網存取以取得地圖瓦片
有限的離線地圖功能
依賴外部地圖提供者
可能需要對大型數據集進行效能調優

原始 README

以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。

Universe

The easy & flexible way to use interactive maps in Flutter.
Supports OpenStreetMap, Google Maps, MapBox and more.

Demo Universe.apk

Starting
Configuration
Complete Examples
Usage

Open Street Map
Google Maps
MapBox
Custom Map Provider
Multi TileLayer Maps
Other Map Providers
Marker
Live Maps
Live Stream Maps
Static Maps
MapController
MapController Move
MapController Zoom
MapController Rotate
MapController Find Location
Circle
Polyline
Polygon
Rectangle
Image Overlay
Video Overlay
Custom Widget Overlay
Clean Map Without Controls
Custom Compass
Custom Locator
Custom Scale Indicator
Custom Location Indicator
Custom Tile Provider
Geolocator: Center by Address
Geolocator: Find LatLng of Address
Geolocator: Move to Address
Others

Starting

$ flutter pub add universe

Configuration

Add permissions to your android AndroidManifest.xml.

<manifest xmlns:android...>
  ...
  <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
  <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
  <uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION"/>
  <uses-permission android:name="android.permission.INTERNET"/>
  <application ...
</manifest>

Complete Examples

Learn complete examples in this folder for many use cases of using Universe. Or install the example apk and try it on your device: universe.apk.

Usage

Inspired by the simplicity of Leaflet.js, we can integrate maps in our flutter project with as simple as adding these lines of code.

import 'package:universe/universe.dart';

U.OpenStreetMap(
  center: [-6.175329, 106.827253],
  type: OpenStreetMapType.HOT,
  zoom: 15,
)

OpenStreetMap

U.OpenStreetMap(
  center: [-6.175329, 106.827253],
  type: OpenStreetMapType.Mapnik,
  zoom: 15,
)

// List of available OpenStreetMapType

// OSM Mapnik
OpenStreetMapType.Mapnik 
// OSM Germany
OpenStreetMapType.DE
// OSM Switzerland
OpenStreetMapType.CH
// OSM France
OpenStreetMapType.France
// Humanitarian OSM
OpenStreetMapType.HOT
// OSM Breton
OpenStreetMapType.BZH

Complete OpenStreetMap example

Google Maps

U.GoogleMap(
  center: [-6.175329, 106.827253],
  type: GoogleMapType.Street,
  zoom: 15,
)

// List of available GoogleMapType

GoogleMapType.Street 
GoogleMapType.Satellite
GoogleMapType.Hybrid
GoogleMapType.Terrain

Complete Google Maps example

MapBox

U.MapBox(
  // get your access token from https://account.mapbox.com/access-tokens/
  accessToken: '',
  center: [-6.175329, 106.827253],
  type: MapBoxType.Street,
  zoom: 15,
)

You can get your own MapBox access token from here. Please always use your own access token in your projects.

// List of available MapBoxType

MapBoxType.Basic
MapBoxType.Street 
MapBoxType.Satellite
MapBoxType.Hybrid
MapBoxType.Outdoors
MapBoxType.Dark
MapBoxType.Light
MapBoxType.Bright

Complete MapBox example

Custom Map Provider

We can call U.Map directly to use maps with custom map providers. Here is an example of using custom map from OpenTopoMap.

U.Map(
  center: [51.555158, -0.108343],
  base: U.TileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
    attribution: 'Map data: &copy; OpenStreetMap contributors, SRTM | Map style: &copy; OpenTopoMap',
    maxZoom: 17,
  ),
)

Complete Custom Map example

Multi TileLayer Maps

We can create maps with multiple tile layers. Here is an example of using Humanitarian OpenStreetMap combined with map tiles from SafeCast and OpenRailwayMap.

U.OpenStreetMap(
  type: OpenStreetMapType.HOT,
  center: [48.858236, 2.294477],
  zoom: 12,
  tiles: [
    // add environmental measurements map layer from SafeCast (http://safecast.org/)
    U.TileLayer(
      'https://s3.amazonaws.com/te512.safecast.org/{z}/{x}/{y}.png', 
      attribution: 'Data: &copy; OpenStreetMap contributors | Style: &copy; SafeCast',
      maxZoom: 16,
    ),
    // add map layer from OpenRailwayMap
    U.TileLayer(
      'https://{s}.tiles.openrailwaymap.org/standard/{z}/{x}/{y}.png', 
      attribution: 'Data: &copy; OpenStreetMap contributors | Style: &copy; OpenRailwayMap',
      maxZoom: 19,
    ),
  ],
)

Multi TileLayer Maps example

Other Map Providers

Open Maps
Safecast Map
CyclOSM Map
Stadia Map (Need API Key)
Thunderforest Map (Need API Key)
Jawg Map (Need Access Token)
MapTiler Map (Need API Key)
Stamen Map
TomTom Map (Need API Key)
ESRI Map
CartoDB Map
BasemapAT Map
HikeBike Map
NLMaps
NLS Map
NASA GIBS Map
USGS Map
Waymarked Trails Map
Geoportail France Map (Need API Key)
Wikimedia Map
HERE Map (Need App ID & Credentials Code)

Markers

Here is a simple way of adding marker to universe maps.

U.OpenStreetMap(
  center: [51.555158, -0.108343],
  type: OpenStreetMapType.HOT,
  zoom: 15,
  markers: U.MarkerLayer([51.556669, -0.108123]),
)

Complete marker examples:

Simple Marker

Marker with Data

Multiple Marker

Multiple Marker with Different Styles

Multiple Marker with Data

Live Maps

U.OpenStreetMap(
  center: [51.555158, -0.108343],
  type: OpenStreetMapType.HOT,
  zoom: 15,
  live: true,
)

Complete live maps examples:

Default Live Map
Simple Live Map
Live Map with Location Marker

Live Maps Without AutoMoving

The default behavior of Live Map is always move the center of the maps to user's current location.

If you want to go live (always searching for user's current location and show location indicator to that location), but don't want to move the center of the maps, you can set parameter moveWhenLive to false.

U.GoogleMap(
  type: GoogleMapType.Street,
  center: [-6.169976, 106.830979],
  zoom: 16,
  live: true,
  // moveWhenLive: false will make the map live (constantly search for user location),
  // set the location indicator to current user location, but does not 
  // move the center of the maps automatically to that location.

  // moveWhenLive has default value set to true
  moveWhenLive: false,
)

Live Map without Auto Moving

Live Stream Maps

We can let the map live while also listening to current user's location by subscribing to liveStream of MapController.

_liveSubs = _mapController.liveStream?.listen((latlng) { 
  print('Current location: $latlng');
});

See the complete example at Live Stream Map

Static Maps

U.OpenStreetMap(
  center: [51.555158, -0.108343],
  type: OpenStreetMapType.Mapnik,
  zoom: 15,
  interactive: false,
)

Complete static maps examples:

Simple Static Map
Static Map with Marker
Static Map with Rotation

MapController

We can use custom controller in our universe maps.

final _mapController = MapController();

U.OpenStreetMap(
  controller: _mapController,
  center: [51.555158, -0.108343],
  zoom: 15,
)

And use that controller to listen the positionStream to get current position and current zoom of our map. We can also programmatically move, zoom, rotate or find location using the map controller.

// listen everytime the map data changes (move or zoom)
_mapController.positionStream?.listen((data) {
  // current center of the map
  // print(data.center); 
  // current zoom level of the map
  // print(data.zoom);
});

Find Location example

Circle

Here is a simple example of painting a circle to universe maps.

U.OpenStreetMap(
  center: [-6.170039, 106.8241],
  zoom: 15,
  // by default, CircleLayer will use style from theme primaryColor
  circles: U.CircleLayer(
    [-6.170039, 106.8241],
    radius: 160,
  ),
)

Complete circle examples:

Simple Circle

Custom Circle

Multiple Circles

Multiple Circles with Different Styles

Circle with Data

Multiple Circles with Data

Polyline

Here is a simple example of painting a polyline to universe maps.

U.OpenStreetMap(
  center: [51.555015, -0.108331],
  zoom: 16,
  // by default, PolylineLayer will use style from theme primaryColor
  polylines: U.PolylineLayer(
    [
      [51.556650, -0.108170],
      [51.554508, -0.109983],
      [51.553968, -0.109650],
      [51.554081, -0.107097],
      [51.556203, -0.107762],
    ],
  ),
)

Complete polyline examples:

Polyline

Custom Polyline

Multiple Polylines

Multiple Polylines with Different Styles

Polygon

Here is a simple example of painting a polygon to universe maps.

U.OpenStreetMap(
  center: [51.555158, -0.108343],
  zoom: 15,
  // by default, PolygonLayer will use style from theme primaryColor
  polygons: U.PolygonLayer(
    [
      [51.556550, -0.108717],
      [51.555936, -0.109532],
      [51.555796, -0.109715],
      [51.555469, -0.110004],
      [51.555422, -0.109961],
      [51.555162, -0.110251],
      [51.555135, -0.110219],
      [51.554909, -0.110444],
      [51.554855, -0.110380],
      [51.554688, -0.110509],
      [51.554635, -0.110326],
      [51.554582, -0.110326],
      [51.554235, -0.109801],
      [51.554101, -0.110026],
      [51.553968, -0.109833],
      [51.553908, -0.109919],
      [51.553888, -0.109897],
      [51.553781, -0.109886],
      [51.553748, -0.108234],
      [51.553981, -0.107011],
      [51.553895, -0.106807],
      [51.553834, -0.106754],
      [51.553968, -0.106593],
      [51.554048, -0.106732],
      [51.554375, -0.106861],
      [51.555015, -0.106850],
      [51.555369, -0.106936],
      [51.555616, -0.107033],
      [51.555782, -0.107140],
      [51.555996, -0.107333],
      [51.556236, -0.107494],
      [51.556543, -0.107666],
      [51.556603, -0.107698],
    ],
  ),
)

Complete polygon examples:

Polygon

Custom Polygon

Multiple Polygons

Multiple Polygons with Diffrent Styles

Polygon with Data

Multiple Polygons with Data

Rectangle

Here is a simple example of painting a rectangle to universe maps.

U.OpenStreetMap(
  center: [51.555015, -0.108331],
  zoom: 16,
  // by default, RectangleLayer will use style from theme primaryColor
  rectangles: U.RectangleLayer(
    [
      [51.554488, -0.108964], // latlng of bottom left corner
      [51.555682, -0.107580], // latlng of top right corner
    ],
  ),
)

Complete rectangle examples:

Rectangle

Custom Rectangle

Multiple Rectangles

Multiple Rectangles with Different Styles

Rectangle with Data

Multiple Rectangles with Data

Image Overlay

Here is an example of painting an image overlay to universe maps.

U.OpenStreetMap(
  center: [-6.175329, 106.827253],
  zoom: 15,
  images: [
    U.ImageOverlay(
      // from url
      'http://img.freeflagicons.com/thumb/background_with_square_parts/indonesia/indonesia_640.png',
      // can use bounds from all 4 corners
      bounds: [
        [-6.180143, 106.823504],
        [-6.180344, 106.828948],
        [-6.17162, 106.82938],
        [-6.171958, 106.823674],
      ],
      fit: BoxFit.cover,
    ),
    U.ImageOverlay(
      // from assets
      'assets/startrek.png', 
      // can use bounds from only 2 corners 
      bounds: [
        [-6.17098, 106.825514], // latlng of bottom left corner
        [-6.167775, 106.822867], // latlng of top right corner
      ],
    )
  ],
)

Image Overlay example

Video Overlay

Here is an example of painting a video overlay to universe maps.

U.GoogleMap(
  type: GoogleMapType.Satellite,
  center: [23.358295, -114.351456],
  zoom: 4,
  videos: [
    U.VideoOverlay(
      'https://www.mapbox.com/bites/00188/patricia_nasa.mp4',
      bounds: [
        [32, -130],
        [13, -100]
      ],
    ),
  ],
)

Video Overlay example

Custom Widget Overlay

Here is an example of painting a custom widget overlay to universe maps.

U.OpenStreetMap(
  center: [-6.170039, 106.8241],
  zoom: 16,
  layers: [
    U.WidgetOverlay(
      bounds: [
        [-6.17098, 106.825514], // latlng of bottom left corner
        [-6.167775, 106.822867], // latlng of top right corner
      ],
      // custom widget, we can be creative and use any widget we want
      child: Container(
        padding: EdgeInsets.symmetric(vertical: 10, horizontal: 8),
        decoration: BoxDecoration(
          color: Colors.white.withOpacity(0.75),
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(8),
            topRight: Radius.circular(4),
            bottomLeft: Radius.circular(4),
            bottomRight: Radius.circular(8),
          ),
        ),
        child: Center(
          child: Text(
            'Wanna bicycle?',
            style: TextStyle(color: Colors.lightBlue),
          ),
        ),
      ),
    )
  ],
)

Custom Widget Overlay example

Custom Controls

Universe maps come with default controls: compass, locator, scale and location indicator. But we can override this controls with our own controls to make it align with our app theme.

Clean Map without Controls