universe 0.0.4-nullsafety

The easy & flexible way to use interactive maps in Flutter. Inspired by Leaflet.js.

Universe

The easy & flexible way to use interactive maps in Flutter. Inspired by Leaflet.js.

Getting Started

Add dependency to your flutter project:

dependencies:
  universe: ^0.0.4-nullsafety

dependencies:
  universe:
    git: 
      url: git://github.com/salkuadrat/universe.git

Then run flutter pub get.

Add internet & location permissions to your AndroidManifest.xml.

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

Example Project

There is a complete example project in the example folder.
Check it out to learn the many use cases of using Universe library.

You can also try a working example with universe.apk.

Usage

Inspired by the simplicity of Leaflet.js, we can add maps functionality to our flutter project with as simple as adding this lines of code:

import 'package:universe/universe.dart';

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

Maps Provider

Universe comes with built-in support for 3 maps provider: OpenStreetMap, Google Maps and MapBox.

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(
  accessToken: yourAccessTokenHere,
  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: © OpenStreetMap contributors, SRTM | Map style: © 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: © OpenStreetMap contributors | Style: © SafeCast',
      maxZoom: 16,
    ),
    // add map layer from OpenRailwayMap
    U.TileLayer(
      'https://{s}.tiles.openrailwaymap.org/standard/{z}/{x}/{y}.png', 
      attribution: 'Data: © OpenStreetMap contributors | Style: © OpenRailwayMap',
      maxZoom: 19,
    ),
  ],
)

Multi TileLayer Maps example

Markers

Here is a simple example of adding a 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
Marker Icon
Marker Image
Marker SVG
Marker Widget
Tap to Add Marker

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 will always move the center of the maps to user's current location.

If we 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, we 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

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

Other Examples

Complex Map

Map with Initial Rotation
Map with Disabled Rotation
Map with MaxBounds
Map with FitBounds

MapController
MapController: Move Map
MapController: Zoom Map
MapController: Rotate Map
MapController: Find Location

Circle
Custom Circle
Multiple Circles
Multiple Circles with Different Styles
Circle with Data
Multiple Circles with Data

Polyline
Custom Polyline
Multiple Polylines
Multiple Polylines with Different Styles

Polygon
Multiple Polygons
Multiple Polygons with Diffrent Styles
Polygon with Data
Multiple Polygons with Data

Rectangle
Custom Rectangle
Multiple Rectangles
Multiple Rectangles with Different Styles
Rectangle with Data
Multiple Rectangles with Data

Image Overlay
Widget Overlay
Video Overlay

TileProvider: NetworkTileProvider
TileProvider: NetworkRetryTileProvider
TileProvider: CachedNetworkTileProvider
TileProvider: Offline AssetTileProvider

Map with Custom Compass
Map with Custom Locator
Map with Custom Scale Indicator
Map with Custom Location Indicator

Map Geolocator: Center by Address
Map Geolocator: Find LatLng by Address
Map Geolocator: Move by Address