I am developing a flutter application in which I am using Mapbox to add turn-by-turn navigation. I have been looking at some tutorials to add markers to the map. However, I also want to give the user awareness of these specific points through voice output.
Is it possible to achieve this objective? Any resources or advice that you could provide, please?
Edit: How can I integrate the text to speech with the custom mapbox on my flutter app? For the Mapbox, we simply run the following code to enable voice instructions.
voiceInstructionsEnabled: true,
So how can I add the text conversion with it?
Truly appreciate any help
You can do it separately.
You can show markers on map with Mapbox
and prepare a string with all marker labels and use flutter_tts package to convert to speech as follows:
Future _speak() async {
await flutterTts.setVolume(volume);
await flutterTts.setSpeechRate(rate);
await flutterTts.setPitch(pitch);
if (_newVoiceText != null) {
if (_newVoiceText!.isNotEmpty) {
await flutterTts.speak(_newVoiceText!);
}
}
}
This snippet is taken from the example given in documentation:
https://pub.dev/packages/flutter_tts/example
Related
I'm using the Flutter barcode scanner. What I'm able to achieve is like
But what I need is like this.
Same question was asked here. How to make a customised QR Code Scanner using Flutter?. But I want to customize using the same Flutter barcode scanner package. Can anyone help me with this.
My code is
String barcodeScanRes = await FlutterBarcodeScanner.scanBarcode(
'#00FFB6',
'Exit',
true,
ScanMode.QR,
);
You can use qr_code_scanner 1.0.1 which give you ability to customize your scanner as shown below
I am using google maps in my flutter app, I have done drawn paths from one point to another using flutter_polyline_points, Now I want to get turn by turn navigation as mentioned in this attached picture, is this possible in flutter, or how I will achieve this
This is Google Map Turn by Turn Navigation View. You can launch it using Android Intent Plus lib
AndroidIntent mapIntent = AndroidIntent(
action:'action_view',
package: 'com.google.android.apps.maps',
data: 'google.navigation:q=$yourDestinationLat,$yourDestinationLng'
);
mapIntent.launch();
Read more at this link
We uploaded a set of "floor plans" to Mapbox in GeoTiff format. While layers show up fine in Mapbox Studio, the layers appear to have a huge black background surrounding it's rendered area.
This is how it looks in Studio
And this is how it appears in out app
We tried following the guide on documentation yet we don't understand it quite clearly:
This is the current code in charge of the map loading
mapView.onCreate(savedInstanceState);
mapView.getMapAsync(new OnMapReadyCallback() {
#Override
public void onMapReady(#NonNull MapboxMap mapboxMap) {
mapboxMap.setStyle(new Style.Builder().fromUri("mapbox://styles/gustavjohannson/ckpzb9eop05mq18qviptlbm5d"), new Style.OnStyleLoaded() {
#Override
public void onStyleLoaded(#NonNull Style style) {
I just resolved this same exact issue. Check out this link.
https://docs.mapbox.com/help/troubleshooting/raster-transparency-issues/
It gives a useful example for android.
Basically you have to use a standard style like SATELLITE_STREETS or STREETS or whatever you choose. But do NOT embed your map overlay into the style. You want to add your overlay as a Raster Source tileset directly in your android code.
Here's what my code looks like:
mapboxMap.setStyle(Style.Builder().fromUri(Style.SATELLITE_STREETS)) {
loadedMapStyle.addSource(RasterSource("source-id",
TileSet( "tileset-id", "https://api.mapbox.com/v4/HERE I PUT MY TILESET ID/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoidG9tbXlib21iIiwiYSI6ImNqZXg5NHZlcjB6czEyd3J5MnAxZDdieGYifQ.GUqv9fHb__o5Xq8DLdNnnA"), 256))
loadedMapStyle.addLayer(RasterLayer("raster-layer", "source-id"))
}
Remember...In Mapbox Studio... Instead of creating a custom style with your map embedded, create a custom Tileset with your map and use that tileset id in your android code.
I am trying to open Google Maps with a place selected. Can the below url be used with dynamic data? The one that I am using selects the first place I searched for on Google Maps. What else do I need to change or is this the right way to open Google Maps from Flutter?
I am using Url Launcher:
import 'package:url_launcher/url_launcher.dart';
Code:
name = Uri.encodeComponent(name);
name = name.replaceAll('%20', '+');
String googleUrl =
'https://www.google.com/maps/place/$name/#$latitude,$longitude,3z/data=!4m8!1m2!2m1!1s$name!3m4!1s0x89c259ae9485299b:0x8b3fcf671f63ac6b!8m2!3d$latitude!4d$longitude';
print(googleUrl);
if (await canLaunch(googleUrl)) {
await launch(googleUrl);
} else {
throw 'Could not open the map.';
}
I noticed that each place has a place_id. Can that be used to target specific place?
--- Solution thanks to comment below ---
https://developers.google.com/maps/documentation/urls/get-started
I suggest reading this doc for Google Maps. You can define the center area with a lat/long and the place's name on the URL. This should center the place on the configured coordinates. The URL that you can use should be similar to:
comgooglemaps://?q=$name¢er=$lat,$long
I'd like to do exactly what https://api.mapbox.com/styles/v1/zugaldia/cimteac7b00mrb8m7okkkol8d.html?title=true&access_token=pk.eyJ1IjoienVnYWxkaWEiLCJhIjoiY2ltNnI0YXM0MDA0YXR5bHgxOTU0N2h5YyJ9.kBUkyDqT5S1gJOsMIAdJSw#11/38.8993/-77.0146 is doing.
It seems to use the MapBox GL tileset and style to place text on the map. It even shows more text at a zoomed in level.
How do we do that?
Can you point to a detailed example or video that shows the steps for loading the tileset (maybe from a GeoJSON file, etc)
Thanks.
It is really nice that we can do so much without javascript at all :)
This makes it easier for Android and iOS etc.
Notice the text for the School names:
Then when you zoom in, you see the text for the crime:
That is indeed a very nice map, he created it using Mapbox Studio uploading crime and school data as layer sources. You can learn more about creating your own map style by following along with the "design a map" guides. Once you've created a map you'll need to get the style ID by doing this:
(source: mapbox.com)
and then...
(source: mapbox.com)
Now you also mentioned using these maps within your Android or iOS app which is similar to using the api (link you gave above). Follow this example about including Mapbox studio style in your Android app. The example places the style url within XML like so:
<com.mapbox.mapboxsdk.maps.MapView
...
mapbox:style_url="mapbox://styles/<your-account-name>/<your-style-ID>"
/>
Hope this helps!