Closed MarcelGeo closed 1 month ago
Hard to say without seeing more of your code, and the style.json.
Hard to say without seeing more of your code, and the style.json.
Style: https://tiles.dev.merginmaps.com/styles/default.json
Definition of layer:
const layer = new VectorTileLayer({
source: new VectorTileSource({
format: new MVT(),
url: `${tileUrl}/data/default/{z}/{x}/{y}.pbf`,
tileGrid: tileGrid
}),
zIndex: 0,
declutter: false,
visible: true
})
Is it enough?
Unfortunately no. The resources referenced in the style do not point to a public url, and the context of the layer is not clear. Is that the only layer of the map?
Hi @ahocevar ...
const tileUrl = "https://tiles.dev.merginmaps.com"
const tileGrid = createXYZ({
extent: getProjection('EPSG:3857').getExtent(),
tileSize: 512,
maxZoom: 14
})
const layer = new VectorTileLayer({
source: new VectorTileSource({
format: new MVT(),
url: `${tileUrl}/data/default/{z}/{x}/{y}.pbf`,
tileGrid: tileGrid
}),
zIndex: 0,
declutter: false,
visible: true
})
const mousePositionControl = new MousePosition({
coordinateFormat: createStringXY(4),
projection: 'EPSG:4326'
})
const map = new Map({
layers: [layer],
view: new View({
center: [0, 0],
zoom: 0,
projection: this.proj,
extent: [-20026376.39, -20048966.1, 20026376.39, 20048966.1],
maxZoom: 25,
constrainResolution: true
}),
controls: defaultControls().extend([mousePositionControl])
})
map.getView().fit([-20026376.39, -20048966.1, 20026376.39, 20048966.1], {
maxZoom: 16,
nearest: false
})
// Then apply style from defaul.json
const baseUrl = "https://tiles.dev.merginmaps.com"
const api = axios.create({ withCredentials: false })
const response = await api.get(`${baseUrl}/styles/default.json`)
const { data } = response
await applyBackground(map, data)
stylefunction(
layer,
data,
data.layers?.filter((l) => Boolean(l.source))?.map((l) => l.id)
)
Other layers are added after some business logic is done ... thats are ordinary WMTS layers in different grid
const wmtsLayer = new TileLayer({
visible: false,
properties: {
title: l.name,
projectsLayer: true
},
zIndex: 1,
source: new WMTS({
url: `SOME URL`,
layer: 'Some name',
matrixSet: 'EPSG:3857',
format: 'image/png',
style: 'default',
wrapX: true,
tileGrid
})
})
I'm currently not able to resolve issue with resources in style.json ... Map is having one background map (vector tiles from defined source) and others are custom WMTS layers.
There are still unaccessible resources referenced from the style, and the server does not send CORS headers.
I'm wondering why you chose to use the lowest level API, instead of applyStyle
for the VectorTile layer. See https://github.com/openlayers/ol-mapbox-style/blob/main/examples/apply-layergroup.js.
As I mentioned before ... I am not able to update resources now. Tiles base url is the same as for styles.
I can try to use applyStyle / apply . Let me try it. But I think the backend for stylefunction and apply style should be the same? The same style would be applied in both functions.
Yes, I'm just trying to reproduce your problem, and I'd be surprised if this is a bug in ol-mapbox-style, because we're doing the exact same thing over and over, and it works. Just take a look at the examples, e.g. https://openlayers.org/ol-mapbox-style/examples/tilejson-vectortile.html.
Definitely ... I don't see any overlapping labels there ...
Is there any dependency on this attribute in openlayers and decluttering: text-allow-overlap false
Yes, it requires v9 of OpenLayers to work properly.
Yes, it requires v9 of OpenLayers to work properly.
I am using newest OL versions
Hi @ahocevar . I tried to use following higher level methods
apply
... there is problem with non-existent sources in style.json. applyStyle
... there is creepy issue with instanceof testing on the top of function!(layer instanceof VectorLayer || layer instanceof VectorTileLayer)
My example modified with applyStyle
import VectorTileLayer from 'ol/layer/VectorTile'
const tileUrl = "https://tiles.dev.merginmaps.com"
const tileGrid = createXYZ({
extent: getProjection('EPSG:3857').getExtent(),
tileSize: 512,
maxZoom: 14
})
const layer = new VectorTileLayer({
source: new VectorTileSource({
format: new MVT(),
url: `${tileUrl}/data/default/{z}/{x}/{y}.pbf`,
tileGrid: tileGrid
}),
zIndex: 0,
declutter: false,
visible: true
})
const mousePositionControl = new MousePosition({
coordinateFormat: createStringXY(4),
projection: 'EPSG:4326'
})
const map = new Map({
layers: [layer],
view: new View({
center: [0, 0],
zoom: 0,
projection: this.proj,
extent: [-20026376.39, -20048966.1, 20026376.39, 20048966.1],
maxZoom: 25,
constrainResolution: true
}),
controls: defaultControls().extend([mousePositionControl])
})
map.getView().fit([-20026376.39, -20048966.1, 20026376.39, 20048966.1], {
maxZoom: 16,
nearest: false
})
// Then apply style from defaul.json
const baseUrl = "https://tiles.dev.merginmaps.com"
const api = axios.create({ withCredentials: false })
const response = await api.get(`${baseUrl}/styles/default.json`)
const { data } = response
await applyBackground(map, data)
applyStyle(
layer,
data,
)
Exception:
Uncaught (in promise) Error: Can only apply to VectorLayer or VectorTileLayer
Either you're using an old version of ol-mapbox-style or OpenLayers, or you need to dedupe OpenLayers. What is the output of npm ls ol
?
mhh
ol-mapbox-style@12.3.4
│ └── ol@9.2.4 deduped
└── ol@9.2.4
yarn list snippet
ol-mapbox-style@12.3.4
│ ├─ @mapbox/mapbox-gl-style-spec@^13.23.1
│ └─ mapbox-to-css-font@^2.4.1
├─ ol@9.2.4
│ ├─ color-rgba@^3.0.0
│ ├─ color-space@^2.0.1
│ ├─ earcut@^2.2.3
│ ├─ geotiff@^2.0.7
│ ├─ pbf@3.2.1
│ └─ rbush@^3.0.1
Sorry, if you cannot provide runnable code that others can debug, I'm afraid we won't be able to solve this here.
Ok @ahocevar ... thank you for your help . It's very cool, that there is so fast response from ol-mapbox-style team :fire: :fire:
We have to fix issues in style.json and then try to use higher level apply function. applyStyle (with updateSource: false) is still not possible to use, because instanceof error in vite. I'm not sure why.
I'm not sure If it help us to use higher level functions to avoid labels overlaps. I'll be back If something will change.
@ahocevar ... example with openlayers and applyStyle function (overlapping labels). Let me know If it's running for you.
If I change declutter to true, then labels are not overlapping :+1: :+1: ... It's interesting, that stylefunction does the same job... I have to revisit our current implementation
https://codesandbox.io/p/devbox/mapbox-vector-tiles-forked-zc2c5v?welcome=true
Update: In our codebase was problem with imports, we imported Map and View directly
import { Map, View } from 'ol'
decluttering is running properly
import Map from 'ol/Map'
Glad you were able to make it work, the way you import Map
and View
should not make a difference though.
Can we close this?
We migrated from old openlayers versions. Definitely It was issue with import there (I don't understand why). in vite are any issues with using ol-mapbox-style. It's not possible to use some functions because instanceof issues in lib. instanceof tests are not running properly in ol-mapbox-style :)
Of course I'm closing this :)
If instanceof checks don't work properly, ol
might not be deduped properly in these setups. When you run npm ls ol
, all occurrences of ol
should be the same version. If that's the case, do you have an example for an instanceof
Check that still fails?
If instanceof checks don't work properly,
ol
might not be deduped properly in these setups. When you runnpm ls ol
, all occurrences ofol
should be the same version. If that's the case, do you have an example for aninstanceof
Check that still fails?
There is result of npm ls ol
https://github.com/openlayers/ol-mapbox-style/issues/1177#issuecomment-2249699388
I think these issues are based on vite dependencies handling. I tried also
optimizeDeps: { exclude: ['ol', 'ol-mapbox-style']}
There are also issues in vite directly:
But, I'm not sure what's the problem. In codesandbox I'm not able to simulate this situation.
Strange. I'm using vite in all my recent projects as well, and never had instanceof
check problems with ol
and ol-mapbox-style
.
I also cannot reproduce your problem with a repository created with
npx create-ol-app my-test-app
which uses vite.
Hi ol-mapbox-style team. We are prototyping vector tiles rendering in openlayers. There's problem in ol-mapbox-style, where labels are overlapping (countries labels).
If I use declutter: true in VectorTileLayer, there are no labels anymore :(
If I disable declutter, labels are overlapping and It is strange...the same style.json in QGIS and everything is ok.
We are fetching style from url and then using stylefunction: