universe 0.0.5-nullsafety.3 
universe: ^0.0.5-nullsafety.3 copied to clipboard
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.5-nullsafety.3
dependencies:
universe:
git:
url: git://github.com/salkuadrat/universe.git
Then run flutter pub get.
Android Permissions #
Add Internet & Location permissions to your AndroidManifest.xml.
<manifest xmlns:android...>
...
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<application ...
</manifest>
Example Project #
There is a complete examples in the example folder.
Check it out to learn the many use cases of using Universe library.
You can also try a working example by installing 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,
)
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
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
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,
),
)
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,
),
],
)
Other Map Providers #
Safecast Map
Cycl OSM Map
Freemap SK Map
MtbMap
NLS Map
Wikimedia Map
Open Maps
Stadia Map
Thunderforest Map (Need API Key)
Hydda Map
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
OneMapSG
NASA GIBS Map
USGS Map
Waymarked Trails Map
Geoportail France Map (Need API Key)
HERE Map (Need App ID & Credentials Code)
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,
)
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 the 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);
});
MapController
Move Map example
Zoom Map example
Rotate Map example
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:
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
],
)
],
)
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]
],
),
],
)
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 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
Map with Custom Compass
Map with Custom Locator
Map with Custom Scale Indicator
Map with Custom Location Indicator
Custom TileProvider #
NetworkTileProvider
NetworkRetryTileProvider
CachedNetworkTileProvider
Offline AssetTileProvider
Geolocator #
We can use geolocator to find position latlng from address string.
Map Geolocator: Center by Address
Map Geolocator: Find LatLng by Address
Map Geolocator: Move by Address
Other Examples #
Map with Initial Rotation
Map with Disabled Rotation
Map with MaxBounds
Map with FitBounds
Metadata
Publisher
unverified uploader
Metadata
The easy & flexible way to use interactive maps in Flutter. Inspired by Leaflet.js.
Homepage
Repository (GitHub)
View/report issues
License
unknown (LICENSE)
Dependencies
curved_animation_controller, extended_image, flutter, flutter_geocoder, flutter_svg, html_unescape, intl, location, logging, path_provider, proj4dart, provider, tuple, vector_math, video_player
