I am trying to create polyline map using mapbox, which I am able to create properly.
User can come back and can see see polyline maps in his profile.
Doubt - Is there any way I can convert my list of lat long into some format and store in db and later on we fetch it from db and render map?
I checked geojson format also but if we use geoJson with mapbox it generates static maps.
I am using flutter_map to generate maps.
Updated -
var geoJson = {
"type": "polyline",
"coordinates": [
[
76.61219358444214,
27.555764420824236
],
[
76.6120433807373,
27.55395717009122
],
[
76.61094903945923,
27.55285378133631
],
[
76.61021947860718,
27.55138892051556
],
[
76.61000490188599,
27.550285505956428
],
[
76.6101336479187,
27.549372326903264
],
[
76.6107988357544,
27.548287916916344
],
[
76.61150693893433,
27.547831320034653
],
[
76.61109924316406,
27.54568148421033
],
[
76.61097049713135,
27.54391211873852
]
]
}
Currently I am using flutter_map package and using below code to render map.
var points = [LatLng(latitude:27.591585, longitude:76.61139), LatLng(latitude:27.591548, longitude:76.611397), LatLng(latitude:27.591473, longitude:76.611407), LatLng(latitude:27.591437, longitude:76.611413), LatLng(latitude:27.591362, longitude:76.611425), LatLng(latitude:27.591325, longitude:76.61143), LatLng(latitude:27.59125, longitude:76.611442), LatLng(latitude:27.591177, longitude:76.611452), LatLng(latitude:27.59114, longitude:76.611458), LatLng(latitude:27.591065, longitude:76.61147), LatLng(latitude:27.591028, longitude:76.611475), LatLng(latitude:27.591007, longitude:76.611587), LatLng(latitude:27.591013, longitude:76.611693), LatLng(latitude:27.590777, longitude:76.611805), LatLng(latitude:27.590657, longitude:76.611822), LatLng(latitude:27.590535, longitude:76.61184), LatLng(latitude:27.590413, longitude:76.611857), LatLng(latitude:27.590293, longitude:76.611875), LatLng(latitude:27.590172, longitude:76.611892)]
return new Scaffold(
appBar: new AppBar(title: new Text('Leaflet Maps')),
body: new FlutterMap(
options: new MapOptions(
center: new LatLng(27.563896, 76.600460), minZoom: 10.0),
layers: [
new TileLayerOptions(
urlTemplate:
"https://api.mapbox.com/styles/v1/jainaman8/ckd5v8bs00zm01ir3w3bjrrb3/tiles/256/{z}/{x}/{y}#2x?access_token=ACCESS_TOKEN",
additionalOptions: {
'accessToken': '',
'id': 'mapbox.mapbox-streets-v8'
}
),
new PolylineLayerOptions(
polylines: [
new Polyline(
points: points,
strokeWidth: 2.0,
color: Colors.red
)
]
)
I want to store geoJson object into firebase and then pull this data from there and render map using mapbox.
I read on google that firebase does not support arrays so another doubt is that how can I store this data on firebase ?
You can do the desired by making a collection of field of type geopoint and then get those fields in your flutter project.
Related
Im using this package https://pub.dev/packages/pluto_menu_bar . I want to know do we have any easy way to add dynamic data and select them on tap,
when I had passed static data and its working fine but when larger data coming from the Database its not working
PlutoMenuItem(
title: 'Province',
children: [
PlutoMenuItem.checkbox(
title: 'Sindh',
initialCheckValue: false,
onChanged: (flag) {
flag == true
? provinceSelectedList.add("Sindh")
: provinceSelectedList.remove("Sindh");
},
),]
I am trying to set images coming from my database as icons for every point in the map. So far it kind of works , but it is to slow to load images and I believe this would not be scalable in the future. Futhermore, the app, at least in debug mode, crashes with out of memory issues.
Currently, I am using flutter_maps package to display my map:
return FlutterMap(
options:
MapOptions(
//center: tomtomCenter,
zoom: 1.0),
layers: [
TileLayerOptions(
minNativeZoom: 1.0,
backgroundColor: Colors.transparent,
urlTemplate:
"https://api.tomtom.com/map/1/tile/basic/main/"
"{z}/{x}/{y}.png?key={apiKey}",
attributionBuilder: (_) {
return const Text("© OpenStreetMap contributors");
},
additionalOptions: {"apiKey": TOMTOM_APIKEY},
),
MarkerLayerOptions(
markers: [
//_buildMarker( tomtomCenter, 'tomtomCenter'),
for (var mark in snapshot.data)
//{
_buildMarker(LatLng(mark['latitude'], mark['longitude']), 'Others', mark['DogImg'].url.toString())
//}
],
),
],
);
}
every point is defined in this function:
Marker _buildMarker(LatLng latLng, String currentLocation, String dogimg) {
return Marker(
point: latLng,
width: 10.0,
height: 10.0,
//anchorPos: AnchorPos.exactly(Anchor(2, 2)),
builder: (BuildContext context) =>
ClipRRect(child: Image.network(dogimg),)
);
}
I do not think that loading that amount of images through http request is the best idea, right?
I saw in other packages like google maps that load images (in that case from assets but there should be also for network requests) which look lighter
BitmapDescriptor markerbitmap = await BitmapDescriptor.fromAssetImage(
ImageConfiguration(),
"assets/images/bike.png",
);
I'm using syncfusion_flutter_maps to draw an arc on the map between two locations i want to get the center (latitude,longitude) of this arc.
SfMaps(
layers: [
MapShapeLayer(
source: dataSource,
sublayers: [
MapArcLayer(
arcs: List<MapArc>.generate(
data.length,
(int index) {
return MapArc(
from: data[index].from,
to: data[index].to,
width: 4,
);
},
).toSet(),
),
],
zoomPanBehavior: zoomPanBehavior,
)
The result will be something like this
or this
I am trying to put an arcgis WMTS tile layer on top of openstreetmaps WMTS layer in flutter using the flutter_map plugin.
Here is my code :
Widget build(BuildContext context) {
return MaterialApp(
home: FlutterMap(
options: new MapOptions(
center: LatLng(33.8, 9.5),
zoom: 6.0,
pinchZoomWinGestures: MultiFingerGesture.pinchZoom,
),
layers: [
//layer 1 - leaflet tiles
TileLayerOptions(
urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
subdomains: ['a', 'b', 'c'],
tileProvider: NonCachingNetworkTileProvider(),
backgroundColor: Colors.black,
),
//Layer 2 - leaflet tiles
TileLayerOptions(
urlTemplate:
"https://tiles.arcgis.com/tiles/C8EMgrsFcRFL6LrL/arcgis/rest/services/GEBCO_contours/MapServer/tile/{z}/{x}/{y}",
subdomains: ['a', 'b', 'c'],
tileProvider: NonCachingNetworkTileProvider(),
backgroundColor: Colors.transparent,
),
],
),
);
but the arcgis map does not align correctly with the openstreetmap.
as shown in the scrrenshot
I hope you can help me rectify my code and have a great day
I've faced something like this before. I was putting ArcGIS tile on top of Mapbox, and the result was like you described.
Probably the axes differ a little if the layers are made by Esri products.
And for this case, I only have 2 solutions for you :
1 - Use ArcGIS Pro or any ArcGIS tool and try shifting the layers till they fit the OpenStreetMap.
2 - Instead of using OpenStreetMap, use ArcGIS APIs, but you have to add some native code for iOS and Android, and check pub.dev for ArcGIS libraries.
I also have faced the similar issue with the ArcGIS map - it is not aligning correctly in the screen. The below pattern ({z}/{y}/{x}) renders the esri tiles correctly on the screen.
https://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}
I've successfully displayed a hardcoded JSON with a DataTable, like this:
final List<Map<String, String>> listOfPetrol = [
{"logo": "assets/images/shell.jpg", "location": "Johnson Road 1235", "distance": "0.2 KM", "price":"\$12.45", "facilities":"ATM, Restaurant"},
{"logo": "assets/images/sinopec.jpg", "location": "Hennessy Road", "distance": "0.5 KM", "price":"\$10.00", "facilities":"Toilet"},
{"logo": "assets/images/shell.jpg", "location": "Lockhart Rd", "distance": "0.9 KM", "price":"\$11.20", "facilities":"ATM"}
];
DataTable(
columns: [
DataColumn(label: Text('Logo')),
DataColumn(label: Text('Location')),
DataColumn(label: Text('Distance')),
DataColumn(label: Text('Price')),
DataColumn(label: Text('Facilities')),
],
rows:
listOfPetrol
.map(
((element) => DataRow(
cells: <DataCell>[
DataCell(Image.asset(element["logo"])),
DataCell(Text(element["location"])),
DataCell(Text(element["distance"])),
DataCell(Text(element["price"])),
DataCell(Text(element["facilities"])),
],
)),
)
.toList(),
),
Now, I want fetch the JSON from HTTP API, instead. I already figured out this part. Well... kinda:
FetchPetrolList() async {
var data = await http.get("http://157.230.131.4/gda-api-dev/petrol.php");
var jsonData = json.decode(data.body);
List<PetrolItem> petrolList = [];
for (var u in jsonData) {
PetrolItem petrol = PetrolItem(u["logo"], u["location"], u["distance"], u["price"], u["facilities"]);
petrolList.add(petrol);
print(petrol.logo+" "+petrol.location+" "+petrol.distance+" "+petrol.price+" "+petrol.facilities);
}
}
Then how I pass the JSON to the DataTable?
Full code: https://gist.github.com/anta40/5b172d885795c71417f2ed2dccffe50c
You can parse JSON data into a model. There are two ways I use to parse JSON data automatically.
On-line Generation
Install Flutter JsonBeanFactory plug-in generation
Android studio installs the Flutter JsonBeanFactory plug-in in a simple way, which I won't say here.
Right-click the package directory after installation, and select new
Then select dart bean class File from JSON
Then paste the JSON data into the input box, enter the class name, and click make.
So the entity class is generated.