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'.
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'm trying to plot a supplied vector tile layer onto a map using MapBox GL JS. I've followed the documentation here but nothing apart from the basic map is being output and there are no console errors. In the browser's Network tab I can see lots of .pbf requests being returned with data so it would seem that the endpoint is passing data back, but I don't know how to determine what the problem is in plotting that data onto the map.
The code is as follows:
mapboxgl.accessToken = '[my access token]';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
zoom: 6,
center: [-0.118092, 51.509865]
});
map.once("load", () => {
map.addSource("ncn", {
type: "vector",
tiles: [
"https://tiles.arcgis.com/tiles/1ZHcUS1lwPTg4ms0/arcgis/rest/services/NCN_Vector_Tile_Package/VectorTileServer/tile/{z}/{y}/{x}.pbf"
]
});
map.addLayer({
id: "ncn-lines",
type: "line",
source: "ncn",
"source-layer": "NCN_Vector_Tile_Package",
"layout": {
"visibility": "visible"
},
'paint': {
'line-color': 'rgb(255, 0, 0)'
}
});
});
I am fairly sure that the type should be line (rather than fill) as the data is supposed to contain route lines rather than vector shapes.
I don't have access to the Arcgis server so can't see how anything is configured at that side. Can anyone suggest what might be wrong here and/or how to debug?
It looks like the value for source-layer is not correct - it should be NCN_2020. Here's a demo showing it working: https://jsbin.com/xunuhibuki/1/edit?html,output
How do you get that value? I'm not quite sure the best way, but the way I found: add ?f=html to your vector tile layer like this: https://tiles.arcgis.com/tiles/1ZHcUS1lwPTg4ms0/arcgis/rest/services/NCN_Vector_Tile_Package/VectorTileServer/?f=html then click "Styles" link at the bottom which gives you an example of how to construct your map.addLayer() commands in your mapboxgl code.
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 am using mapbox to try and query all features of the mapbox tileset and return them as geojson. From what I understand, to query features that are no visible on the screen, you must use querysourcefeatures. My tileset only shows up at zoom 14 so I am having trouble querying all the features in the dataset at once and then applying a filter. Is this possible? It stills like querySourceFeatures returns an empty array.
function addLayers() {
map.addSource('plutonew-c03oxi', {
'type': 'vector',
'url': 'mapbox://samtpr.4ehwzn0r'
});
map.addLayer({
"id": "parcels_fill",
"type": "fill",
"source": "plutonew-c03oxi",
"source-layer": "plutonew-c03oxi",
'layout': {
'visibility': 'visible'
},
paint: {
'fill-color': 'blue',
'fill-outline-color': 'gray',
"fill-opacity": ["case",
["boolean", ["feature-state", "hover"], false],
0.5,
0
]
}
});
var features = map.querySourceFeatures('plutonew-c03oxi', {filter: ["==", ['get','ZIPCODE'], zipcode_val]});
From what I understand, to query features that are no visible on the screen, you must use querysourcefeatures
You may have misunderstood. querySourceFeatures allows you to query features that are present within the vector tiles currently loaded and displayable within the current viewport and zoom level. Unlike queryRenderedFeatures they don't have to actually be rendered through a visible layer, however.
In this case it sounds like you're hoping to gain access to features that are not available at the current zoom level, which is not possible.
TLDR; How do I add a popup to a mapbox "line" type layer?
I have a function loading a mapbox map and adding a layer of lines to it.
My goal is to add a popup on clicking on that line.
I followed the examples and added an on click event. But this gives me an error. Any pointers on what I am doing wrong?
function renderLineLayer(layerName,data) {
map.on('load', function() {
map.addLayer({
"id": layerName,
"type": "line",
"source": {
"type": "geojson",
"data": data
},
"layout": {
"line-join": "round",
"line-cap": "round",
"visibility":"visible"
},
"paint": {
"line-color": "blue",
"line-width": 8
}
});
console.log(map.getLayer(layerName));
map.on('click', layerName, function (e) {
console.log('click');
new mapboxgl.Popup()
.setLngLat(e.lngLat)
.setHTML(e.features[0].properties.name)
.addTo(map);
});
});
}
The error I get is.
TypeError: listeners[i].call is not a function[Learn More] mapbox-gl-dev.js:29779:13
This is a bit of a guess, but the on('click') event API changed recently. Previously it didn't have the layer argument (IIRC). If you're using an older version of the Mapbox-GL-JS library, it would be trying to call your second argument (the layer name) as if it were a function and it would give that error message.
Solution: update to the latest Mapbox-GL-JS library version (0.36).
(I don't think the process for responding to mouse clicks on line features is any different than for points or polygons.)