Comments (2)
What you're trying here is definitely possible. However, you might want to start small and then make bigger changes to make debugging easier. Questions that arise include:
- are the layer
minZoom
andmaxZoom
valid? - is
layer.layerInfo.opacity
greater than0
? - is the default tilegrid of the
VectorTile
source correct? Maybe you wanted to applyminZoom
andmaxZoom
there, and not on the layer? - Does the style make sense for the data, e.g. is there a
source-layer: 'test_hidro'
, are there polygon geometries in thetest_hidro
layer?
from ol-mapbox-style.
Does the style make sense for the data, e.g. is there a source-layer: 'test_hidro', are there polygon geometries in the test_hidro layer?
This was the issue, I was trying to adjust source
property to match name of layer from tegola, while all I had to do was adjust source-layer
property to that of layer name coming from tegola. I don't know if there is a way to change source-layer name in mapbox since I made a naming mistake when uploading my data initially therefore .json response always contained wrong source-layer name. In the end I decided to download style and put it into my .../public/
folder and load style from there.
Your help is much appreciated!
I'am closing this issue but here is the way I did it if it helps someone in the future:
JS:
const vectorTileSource = new VectorTileSource({
format: new MVT({ featureClass: Feature }),
url: `${import.meta.env.VITE_TEGOLA_URL}${layer.layerInfo.url}`,
});
const vectorTileLayer = new VectorTileLayer({
source: vectorTileSource,
//style: layerStyle,
zIndex: 99999,
maxZoom: 99,
minZoom: 0,
properties: {
name: layer.label,
slice: slice ?? "",
hasZoomConstraint: !!minZoom || !!maxZoom,
id: layer.id,
layerType: layer.layerInfo.type,
},
declutter: true,
opacity: 1,
});
applyStyle(vectorTileLayer, "/style.json", {
accessToken: "pk.ey...", // Not sure if needed since I'm loading style locally (.../public/style.json)
updateSource: false,
});
map.addLayer(vectorTileLayer);
style.json
{
...
"layers": [
{
"id": "test",
"type": "fill",
"source": "composite",
"source-layer": "test-hidro", // Layer name from tegola capabilities
"layout": {},
"paint": {
"fill-color": [
"interpolate",
["linear"],
["zoom"],
0,
"hsl(308, 100%, 60%)",
22,
"hsl(308, 100%, 60%)"
],
"fill-outline-color": "hsl(265, 100%, 22%)"
}
}
],
...
}
Tegola capabilities:
{
"version": "v0.16.0",
"maps": [
{
"name": "my_dataset",
"attribution": "",
"bounds": [
-180,
-85.0511,
180,
85.0511
],
"center": [
16.5166646,
43.7333304,
12
],
"tiles": [
".../tegola/maps/my_dataset/{z}/{x}/{y}.pbf"
],
"capabilities": ".../tegola/capabilities/my_dataset.json",
"layers": [
{
"name": "test_hidro",
"tiles": [
".../tegola/maps/data/my_dataset/{z}/{x}/{y}.pbf"
],
"minzoom": 1,
"maxzoom": 20
}
]
}
]
}
from ol-mapbox-style.
Related Issues (20)
- Mapbox streets-v12 style trys to load invalid fonts HOT 1
- Make source available in transformRequest HOT 2
- Guessing of access token parameter may lead to bad requests HOT 1
- Requests to third-party server for fonts HOT 8
- issue with standalone example using recent versions of olms (METERS_PER_UNIT error) HOT 1
- applyBackground issue HOT 3
- line-pattern webgl HOT 3
- Provide a default URL template for fonts when 'ol:webfonts' not available HOT 1
- Issue rendering fill layers above symbol layers HOT 2
- 加载mapboxgl的样式时文本标签显示错乱 HOT 1
- Maybe a bug in stylefunction HOT 2
- Vector tile layer with MVT format clip circle style HOT 6
- color2 is null loading outdoor-v2 HOT 1
- Example of using a styled Esri vector tiles basemap (but not as the whole map) HOT 1
- Text-Allow-Overlap and Declutter issues. HOT 6
- Incorrect Tiles being requested for projections other than Web Mercator (EPSG:3857) HOT 2
- render vector tiles offline, or render vector tiles to raster for later offline use? HOT 3
- VectorTile layers with source `minZoom` 0 not visible when view is zoomed out HOT 1
- Rendering very slow when there are many text labels HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ol-mapbox-style.