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.
Related
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
I want to show a composed SVG image in flutter and I am currently using the flutter_svg library.
My picture consists of different layers that can be put together using the app's GUI (creating an avatar).
In principle it works very well with a stack of SVGPictures, but when loading, the problem arises that some of the SVGs are displayed a little later than others and the graphics look broken in this short time - for example, the upper body of an avatar is not loaded but the rest of the body -> the avatar has a hole in the middle ...
Is there a way to display a composition from SVGPictures only when all parts are loaded and can be displayed? Ideally, a dummy should also be displayed for this long.
SVGs with a lot of layers will definitely cause a bit of lag while loading, hence if you want to load them all smoothly, you can try preloading SVGs.
final svg = SvgPicture.asset('assets/vector.svg');
final svgAnother = SvgPicture.asset('assets/vector.svg');
#override
Widget build(BuildContext context) {
return Stack(
children:[
svg, // Load preloaded svg smoothly
svgAnother,
],
);
}
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!
I use an OSM map in an android application using the osmdroid package and it works fine. The only thing I want to change is the visual appearance of the map to a typ, which is called "outdoor" style. I tried all the possibilities given in the setTileSource()-Function, but no map displays the map like in the piicture below. Is there a simple way to set a parameter somewhere to get the desired appearance of the map? I have seen some app's using this appearance. Thanks!
mv.setTileSource(TileSourceFactory.MAPNIK);
this is what I want to display
Does anyone know how to get the URL for a Mapbox vector tile map (aka a "style")? I can only get a style address that looks like this: mapbox://styles/myusername/r3411y10ngh4sh3tc3tc, but I am using a plugin that requires a URL to integrate Mapbox's Vector Tiles with Leaflet: https://github.com/SpatialServer/Leaflet.MapboxVectorTile/blob/master/docs/configuration.md
I tried substituting the style address provided by Mapbox for the URL
var config = {
url: "mapbox://styles/myusername/fwaoij32wlfij23slkfj3",
...etc
};
var mvtSource = new L.TileLayer.MVTSource(config);
map.addLayer(mvtSource);
but I get an error where it can't read the style address as a URL. Any suggestions? Should I be using a different plugin?
Update
In short, the URL for a Mapbox style is not yet available. Here is a response I received from Mapbox:
Leaflet is not yet compatible with styles made in Mapbox Studio since these styles require a GL-based renderer. We're currently working on a new API to allow you to use your Studio style with Leaflet, we expect it to launch in a few weeks.
At this time, you can use Mapbox GL JS to load your Mapbox Studio style. You can still access raster map IDs (maps made with Mapbox Editor, Mapbox Studio Classic) to load with Leaflet - these are found under the "Classic" tab in the Studio dashboard.
The Leaflet.MapboxVectorTile plugin uses a different approach to styles than, for example, the Mapbox GL JS library does.
Styles you create in Mapbox Studio can be downloaded as JSON, but for Leaflet.MapboxVectorTile you have to create them programmatically as you can see in the documentation. You can still use their vector tile URL https://b.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/{z}/{x}/{y}.vector.pbf?access_token=<public api token>, but styles would probably have to be rewritten/done from scratch again.
You can use the Mapbox Gl Javascript to create a map with the style you created, but I don't know how extensive your current project is and if it would conflict with other (Leaflet) plugins:
mapboxgl.accessToken = '<public API token>';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/<your name>/<style id>',
center: [-74.50, 40],
zoom: 9
});