I have uploaded a Mapbox tileset using MTS with the following recipe:
{
"version": 1,
"layers": {
"layer-name": {
"source": "mapbox://tileset-source/...",
"minzoom": 13,
"maxzoom": 14,
"tiles": {
"layer_size": 2050,
"limit": [
["highest_where", true, 40000, "attribute"],
],
"order": "attribute"
}
}
}
}
The uploaded layer has polygon features. The tiles make its way to Mapbox studio, no errors or warnings upon publish, but when styling the data I noticed that the polygons disappear at zoom levels above 14 in spite of the zoom extent being set to 13-22.
This is unexpected because I assumed overzooming would apply here and I would see the polygons in all high zoom levels, albeit possibly simplified as processed for zoom 14.
Trying other things, I added another layer with points, also capped at zoom 14, but the point features happily appear at zooms over 14.
How do I enable overzooming for polygon features for zooms above the tileset's maxzoom level?
Related
I'd like to render a layer from geoserver with using WMTS.
I'm using mapbox-gl to render a map and layers.
The website I'm referring to is https://docs.geoserver.org/stable/en/user/styling/mbstyle/source.html.
This shows how to create a layer on geoserver and render it on a mapbox map.
However, I'm getting an error TileOutOfRange when I request tiles.
For example, when I request tiles with this url,
http://<my_server>:8080/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=myspace:japan&STYLE=&TILEMATRIX=EPSG:4326:8&TILEMATRIXSET=EPSG:4326&FORMAT=application/vnd.mapbox-vector-tile&TILECOL=221&TILEROW=102.
I get this error message.
Column 221 is out of range, min: 440 max:462.
Here below is my code to fetch a layer that I created on geoserver.
map.on("load", () => {
map.addSource("test", {
type: "vector",
tiles: ["http://<my_server>:8080/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=myspace:japan&STYLE=&TILEMATRIX=EPSG:4326:{z}&TILEMATRIXSET=EPSG:4326&FORMAT=application/vnd.mapbox-vector-tile&TILECOL={x}&TILEROW={y}"],
generateId: true,
minZoom: 0,
maxZoom: 14,
});
map.addLayer({
"id": "test",
"type": "fill",
"source": "test",
"source-layer": "japan",
"layout": { "visibility": "visible" },
"paint": {}
});
});
It would be much appreciated if anyone gave me a way to solve this.
Thank you.
I made sure that I checked this box application/vnd.mapbox-vector-tile in the tile caching settings.
I left out 900913 from the default gridset settings, since my data is EPSG:4326.
When creating a layer, I made sure that I clicked Compute from data and Compute from native bounds to set bounding boxes.
I am producing a vector tileset using a GeoJSON of Multipolygons, but when I create the tileset using the Mapbox Tiling Service API endpoints, most of my features are not getting rendered at low zoom levels. If I process the same GeoJSON into an .mbtiles file using tippecanoe, it looks fine at low zoom levels (correctly shows all the features).
Here is my tileset config that I am feeding to the tileset creation API:
{
"recipe": {
"version": 1,
"layers": {
"my-tileset-id": {
"source": "mapbox://tileset-source/myusername/my-source-id",
"minzoom": 0,
"maxzoom": 16
}
}
},
"name": "Layer name herey",
"description": "An incomplete dataset of things.",
"attribution": [
{ "text": "Not my organization", "link": "https://theonion.com" }
]
}
And here's my tippecanoe command:
tippecanoe -zg -o my-tileset-id.mbtiles -l my-tileset-id -n "Layer name herey" ~/Downloads/my-input.geojson
When I upload and publish the tileset with the API, I get a histogram of how many features are in each tile. The number of features trails off from many in z11, fewer in z10, almost none in z9 and 0 below z9. When I upload via an .mbtiles, there's no histogram, and it just says the Zoom Extent is from z0 – z12.
I have a mapbox map with custom coffee mug icons (not maki icons). I want to give the icons a halo conditionally based on a data field of each point. This works, but since the icon is uploaded as a png, it gets treated as a rectangle, even though the image is of a coffee mug which is mostly round. So when you add a halo, it gets added around the perimeter of the bounding rectangle of the icon. Here's a picture of two of these icons, one that has a halo because it meets the "CONDITION" and one that doesn't.
How can I make this halo wrap around the border of the coffee mug icons, like it does for maki icons? Here is the relevant part of my style definition:
layout: {
'icon-image': 'cafe-icon'
},
paint: {
"icon-color": "#1a7a08",
"icon-halo-color": "#e4be8b",
"icon-halo-width": ['case', ['==', ['get', 'CONDITION'], true], 4, 0]
}
Also, here are the mapbox dependencies in my package.json file:
"#mapbox/mapbox-sdk": "^0.12.1",
"mapbox-gl": "^2.1.1",
"#mapbox/mapbox-gl-geocoder": "^4.7.0"
And here is the coffee mug icon I'm using for now:
According to Mapbox-gl-js documentation couple of style properties can only be applied to SDF Enabled Images and one of them is "icon-halo-width" also.
READ HERE
Which says:
Four style specification properties can only be used with SDF-enabled images: icon-color, icon-halo-color, icon-halo-width, and icon-halo-blur.
I downloaded a demo png of "shop-15.png" from this link and applied the icon-halo-width to 10 and style get applied.
Code:
//downloaded
var accessible = "http://localhost:3000/shop-15.png";
map.loadImage(accessible, function (error, image) {
if (error) throw error;
map.addImage('accessible', image, { sdf: true });
map.addLayer({
"id": "iconLayer",
"type": "symbol",
"source": 'maine',
"layout": {
'icon-allow-overlap': true,
"icon-image": "accessible",
"icon-size": 3,
},
"paint": {
"icon-color": "white",
"icon-halo-color": "red",
"icon-halo-width": 10
}
});
});
Screenshot:
How To Create SDF Images?
HERE is the link where I combined few of my research.
Thanks!
I want to change the style of my layer on a certain zoom (circle to symbol). When I cross zoom 5, what I thought I could do was to remove my previous layer, then create a new one with the old source. Actually, it gives me an error.
If I create a new source with the same data everything works fine, the error is about the source. What I don't understand is that the source is still present as I can interact with it.
Please find my fiddle, open the console to see :
the zoom (wait for zoom 5)
the data contained by the source
the error
glMap.addSource('yacht', {
type: 'geojson',
data: data,
buffer: 256
});
glMap.addLayer({
"id": "yachtL",
"type": "circle",
"interactive": true,
//'style': '/bright-v8.json',
"source": "yacht",
'layout': {},
'paint': {
'circle-color': '#262626',
'circle-opacity': 0.8
}
}/*, "cargoL"*/);
removeSpinner();
Give the new layer a new id, then it will work. Currently they both have the id of 'yachtL'.
Edit: I reformatted the question as it was pointed out to me that the problem is not in the Mapbox API.
As of a few days ago an application using mapbox matching API coupled with leaflet.js started drawing polylines on the other side of the planet.
While the path it self looks as it should be, leaflet drew it on another continent.
The Mapbox Matching API returns the response following GEOJson standard as:
{
"code": "Ok",
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": "e`s`YmyazuAg`#y]uo#ej#eQcOkFkEyCeCaYmUuFoMkWgOo[_ReGqDoGyDmVaPaU|RoDlDsa#z`#sTdSXJf#j#??Jr#Mp#ML[Z}#ZiAHgAK]MaJzJsUbWkSxRyHpHuLhLuFzFqDrDq[`\\oPrPyK|KmU|TuLzKyClCr#ZZf#Fj#Ij#e#b#zn#fZ}Zf]gCdKmHxQErC[jV",
"properties": {
"confidence": 0.45413768894813844,
"distance": 1366.4,
"duration": 243.3,
"matchedPoints": [
[13.658131, 45.532583],
[13.659851, 45.534127],
[13.661445, 45.535438],
[13.662397, 45.535398],
[13.663582, 45.534237],
[13.666378, 45.531441],
[13.666457, 45.529215]
],
"indices": [0, 1, 2, 3, 4, 5, 6]
}
}]
}
Using the code below to draw the layer with leaflet.js results in a polyline drawn on a wrong position.
L.mapbox.mapmatching(geojson, options, function (error, layer) {
layer.addTo(map);
layer.setStyle({
color: '#3c8dbc',
weight: 4,
opacity: 0.8
});
//fit bounds to added layer
map.fitBounds(layer.getBounds());
The result being:
While the polyline it self is as it should be, the position is not.
I speculate the problem is that leaflet expect the coordinates to be in format [latitude, longitude] while the Mapbox matching API returns GEOJson format namely [longitude, latitude].
Should I manually switch the coordinates of the response before drawing it or am I just doing it wrong?
Thanks.
Edit 2 : It appears the problem is in fact in different formats. More about it can be found in this post
Changing the order of the coordinates in the returned object is very tedious hence an elegant solution to this would be greatly appropriated.