Cannot find Mapbox Vector Tile URL for my Mapbox Style map - leaflet

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
});

Related

GeoTiff style layers shows up with black borders in Android

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.

MBtiles and mapbox js

Currently I am doing graphical information system(GIS) web application that allow user to upload their tileset eg mbtiles format to the system and view tileset using mapbox on browser. Now, I'am just use mapbox studio to upload tileset and take the sytle then copy to the code. My question is, how I want to upload mbtiles files to database and view in mapbox on browser without use mapbox studio
mapboxgl.accessToken = 'accesstoken';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox style', // stylesheet mapbox style
center: [100.2192660726069, 6.523753293936409], // starting position [lng, lat]
// pitch: 60, // pitch in degrees
// bearing: -60,
zoom: 16 // starting zoom]
});
If your question is how to view your map in the browser outside of Mapbox Studio, you can use the code snippet you have included above and create a container div <div id="map"></div> within the HTML of your page to display the map.
If you are asking how to programmatically upload your MBTiles file and add the tileset to an existing style without the use of Mapbox Studio, you will want to look into the Uploads or Tilesets API and Styles API.
For uploading the MBTiles file, you can work with the Create an upload endpoint or the Tilesets API.
To then add the uploaded tileset to a style, you can use the Update a style endpoint or add it at runtime to the map using the addLayer GL JS method.

Open Street Map Web Wizard Usage

Why does a pink screen appear when OSM Web Wizard is invoked from SUMO?
I have attached the image below.
OSM WEB view page
There seems to be a problem with loading the OpenStreetMap tiles. We recently had a proposed fix for using https instead of http when loading the tiles. You could try to apply this patch https://github.com/eclipse/sumo/commit/3da7939ea19b246fb845267aa60f0d23ce66908a or simply replace manually in tools/webWizard/script.js
the line
map.addLayer(new OpenLayers.Layer.OSM);
with
var maplayer = new OpenLayers.Layer.OSM("OpenStreetMap",
// Official OSM tileset as protocol-independent URLs
[
'https://a.tile.openstreetmap.org/${z}/${x}/${y}.png',
'https://b.tile.openstreetmap.org/${z}/${x}/${y}.png',
'https://c.tile.openstreetmap.org/${z}/${x}/${y}.png'
], null);
map.addLayer(maplayer);

mapbox mapID not working?

I've just started looking at mapbox, and I've run into an issue straight away.
I've copied the sample here;
https://www.mapbox.com/mapbox.js/example/v1.0.0/
Please note this part;
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoibWF1cmljZXdhbG1zbGV5IiwiYSI6ImNpbmxiZjc4djB5cjJ0dG0zejZjZHZxdjEifQ.CJHrqKevqria7ZbVMOMD5Q';
var map = L.mapbox.map('map', 'mapbox.streets')
.setView([40, -74.50], 9);
</script>
Un-editted it works in my webpage.
If I change the accessToken to my one, it works.
If I then change the mapID, though, from "mapbox.streets" to "myusername.mapID" (I've double checked these, they are correct) all I get is an empty map.
Any idea what I'm doing wrong?
This is probably what you are looking for — Add styles made with Mapbox Studio using styleLayer
Also, Check your Browsers console. In Firefox, I got the following error in the console
Error: Styles created with Mapbox Studio need to be
used with L.mapbox.styleLayer, not L.mapbox.tileLayer

how to load text layer in mapbox-gl style / tileset

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!