Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

MapBox VectorTile: bug fixes using an official MapBox stream #2469

Open
wants to merge 19 commits into
base: master
Choose a base branch
from
+273 −110
Open

MapBox VectorTile: bug fixes using an official MapBox stream #2469

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
06804f1
feat(VectorTile): add support for relative url in style
ftoromanoff Oct 29, 2024
5c62908
fix(VectorTile): fix {z}/{y}/{x}
ftoromanoff Oct 29, 2024
f903a1a
fix(MVTStyle): icon properties -> fix return of function when id incl…
ftoromanoff Nov 25, 2024
328cc2c
feat(Source): add propertie 'warn' for avoiding multiple console.warn
ftoromanoff Oct 29, 2024
a96f21b
test(VectorTileSource): fix test
ftoromanoff Oct 29, 2024
d756acb
refactor(VectorTileParser): cleanup
ftoromanoff Nov 4, 2024
a881fac
fix(MVTLayers): add MVTLayer where MVTStyle.layer has 'ref' properties
ftoromanoff Nov 22, 2024
b77965b
fix(Style): take style.zoom into account for LabelLayer and Feature2T…
ftoromanoff Nov 6, 2024
7f27ef8
fix(examples): fix linked with zoom properties well used
ftoromanoff Nov 21, 2024
c7a1c32
fix(MVTParser): supp use of layer.style.zoom in parser
ftoromanoff Nov 25, 2024
6d568fa
fix(Style): Don't draw Polygon when fill.color is undefined
ftoromanoff Nov 22, 2024
5f63ee2
fix(Style): Don't draw stroke when width is 0
ftoromanoff Nov 26, 2024
af2e0f1
fix(LabelLayer): gestion simplified of line and polygon Label
ftoromanoff Nov 25, 2024
049dd6a
fix(MVTStyle): Doing recoloring only with sdf icons.
ftoromanoff Nov 21, 2024
efa1777
fix(Label): Multiple labels with same textContent
ftoromanoff Nov 26, 2024
36bcd33
refactor(MVTParser): 1 feature per vtfeature
ftoromanoff Nov 26, 2024
151e9af
fix(VectorTile): supp order in Style as it's only a Label properties …
ftoromanoff Nov 14, 2024
bb8f57d
example(MVT): add example with official MapBox style file
ftoromanoff Nov 26, 2024
18b1d2c
fix(Style): dont draw icon when size is 0
ftoromanoff Nov 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 51 additions & 12 deletions src/Core/Style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,14 +87,18 @@ async function loadImage(source) {
return (await promise).image;
}

function cropImage(img, cropValues = { width: img.naturalWidth, height: img.naturalHeight }) {
canvas.width = cropValues.width;
canvas.height = cropValues.height;
function cropImage(img, cropValues) {
const x = cropValues.x || 0;
const y = cropValues.y || 0;
const width = cropValues.width || img.naturalWidth;
const height = cropValues.height || img.naturalHeight;
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d', { willReadFrequently: true });
ctx.drawImage(img,
cropValues.x || 0, cropValues.y || 0, cropValues.width, cropValues.height,
0, 0, cropValues.width, cropValues.height);
return ctx.getImageData(0, 0, cropValues.width, cropValues.height);
x, y, width, height,
0, 0, width, height);
return ctx.getImageData(0, 0, width, height);
}

function replaceWhitePxl(imgd, color, id) {
Expand Down Expand Up @@ -765,10 +769,11 @@ class Style {
* @param {Object} sprites vector tile layer.
* @param {Number} [order=0]
* @param {Boolean} [symbolToCircle=false]
* @param {Set} warn Set storing all warnings encountered by the source.
*
* @returns {StyleOptions} containing all properties for itowns.Style
*/
static setFromVectorTileLayer(layer, sprites, order = 0, symbolToCircle = false) {
static setFromVectorTileLayer(layer, sprites, order = 0, symbolToCircle = false, warn) {
const style = {
fill: {},
stroke: {},
Expand Down Expand Up @@ -861,6 +866,12 @@ class Style {
// additional icon
const iconImg = readVectorProperty(layer.layout['icon-image']);
if (iconImg) {
const cropValueDefault = {
x: 0,
y: 0,
width: 1,
height: 1,
};
try {
style.icon.id = iconImg;
if (iconImg.stops) {
Expand All @@ -871,22 +882,50 @@ class Style {
if (stop[1].includes('{')) {
cropValues = function _(p) {
const id = stop[1].replace(/\{(.+?)\}/g, (a, b) => (p[b] || '')).trim();
cropValues = sprites[id];
if (cropValues === undefined) {
const warning = `WARNING: "${id}" not found in sprite file`;
if (!warn.has(warning)) {
warn.add(warning);
console.warn(warning);
}
sprites[id] = cropValueDefault;// or return cropValueDefault;
}
return sprites[id];
};
} else if (cropValues === undefined) {
const warning = `WARNING: "${stop[1]}" not found in sprite file`;
if (!warn.has(warning)) {
warn.add(warning);
console.warn(warning);
}
cropValues = cropValueDefault;
}
return [stop[0], cropValues];
}),
};
style.icon.cropValues = iconCropValue;
} else {
style.icon.cropValues = sprites[iconImg];
if (iconImg[0].includes('{')) {
if (iconImg.includes('{')) {
style.icon.cropValues = function _(p) {
const id = iconImg.replace(/\{(.+?)\}/g, (a, b) => (p[b] || '')).trim();
style.icon.cropValues = sprites[id];
if (sprites[id] === undefined) {
const warning = `WARNING: "${id}" not found in sprite file`;
if (!warn.has(warning)) {
warn.add(warning);
console.warn(warning);
}
sprites[id] = cropValueDefault;// or return cropValueDefault;
}
return sprites[id];
};
} else if (sprites[iconImg] === undefined) {
const warning = `WARNING: "${iconImg}" not found in sprite file`;
if (!warn.has(warning)) {
warn.add(warning);
console.warn(warning);
}
style.icon.cropValues = cropValueDefault;
}
}
style.icon.source = sprites.source;
Expand Down Expand Up @@ -957,7 +996,7 @@ class Style {
// need doc for the txtrCtx.fillStyle.src that seems to always be undefined
if (this.fill.pattern) {
let img = this.fill.pattern;
const cropValues = this.fill.pattern.cropValues;
const cropValues = { ...this.fill.pattern.cropValues };
if (this.fill.pattern.source) {
img = await loadImage(this.fill.pattern.source);
}
Expand Down Expand Up @@ -1032,7 +1071,7 @@ class Style {
if (!this.icon.cropValues && !this.icon.color) {
icon.src = this.icon.source;
} else {
const cropValues = this.icon.cropValues;
const cropValues = { ...this.icon.cropValues };
const color = this.icon.color;
const id = this.icon.id || this.icon.source;
const img = await loadImage(this.icon.source);
Expand Down
5 changes: 5 additions & 0 deletions src/Layer/LabelLayer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -250,6 +250,11 @@ class LabelLayer extends GeometryLayer {
data.features.forEach((f) => {
// TODO: add support for LINE and POLYGON
if (f.type !== FEATURE_TYPES.POINT) {
const warn = `Type label ${Object.keys(FEATURE_TYPES).filter(ft => FEATURE_TYPES[ft] === f.type)} not supported`;
if (!this.source.warn.has(warn)) {
this.source.warn.add(warn);
console.warn(warn);
}
return;
}
context.setFeature(f);
Expand Down
1 change: 1 addition & 0 deletions src/Source/Source.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,7 @@ class Source extends InformationsData {
constructor(source) {
super(source);
this.isSource = true;
this.warn = new Set();

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Aggregating logs is a good idea and needed in itowns. I think we should not store aggregated logs in objects and pass them around as function parameters. An alternative implementation would be to implement a LogAggregator that stores logs, aggregates them and can log info, warn and errors. A global instance could be used by all itowns components then. If we do so, we need to be careful with memory usage and empty the log cache frequently. And if we don't want to implement it ourselves, I'm sure there are libraries available. However I think that's out of scope of this PR, so I'd be for removing this log aggregation for now and implement it differently later. @Desplandis what is your opinion on this?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, we could have some kind of heap with a max size to aggregate those warnings. I think there should be some kind of library to do it. However, I agree that this is out of scope of this PR.

if (!source.url) {
throw new Error('New Source: url is required');
Expand Down
12 changes: 8 additions & 4 deletions src/Source/VectorTilesSource.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,9 +71,10 @@ class VectorTilesSource extends TMSSource {

this.accessToken = source.accessToken;

let styleUrl;
if (source.style) {
if (typeof source.style == 'string') {
const styleUrl = urlParser.normalizeStyleURL(source.style, this.accessToken);
styleUrl = urlParser.normalizeStyleURL(source.style, this.accessToken);
promise = Fetcher.json(styleUrl, this.networkOptions);
} else {
promise = Promise.resolve(source.style);
Expand All @@ -84,8 +85,9 @@ class VectorTilesSource extends TMSSource {

this.whenReady = promise.then((style) => {
this.jsonStyle = style;
const baseurl = source.sprite || style.sprite;
let baseurl = source.sprite || style.sprite;
if (baseurl) {
baseurl = new URL(baseurl, styleUrl).toString();
const spriteUrl = urlParser.normalizeSpriteURL(baseurl, '', '.json', this.accessToken);
return Fetcher.json(spriteUrl, this.networkOptions).then((sprites) => {
this.sprites = sprites;
Expand All @@ -102,7 +104,7 @@ class VectorTilesSource extends TMSSource {
if (layer.type === 'background') {
this.backgroundLayer = layer;
} else if (ffilter(layer)) {
const style = Style.setFromVectorTileLayer(layer, this.sprites, order, this.symbolToCircle);
const style = Style.setFromVectorTileLayer(layer, this.sprites, order, this.symbolToCircle, this.warn);
this.styles[layer.id] = style;

if (!this.layers[layer['source-layer']]) {
Expand All @@ -123,9 +125,11 @@ class VectorTilesSource extends TMSSource {
if (this.url == '.') {
const TMSUrlList = Object.values(style.sources).map((sourceVT) => {
if (sourceVT.url) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

these default values are not needed anymore ?

sourceVT.url = new URL(sourceVT.url, styleUrl).toString();
const urlSource = urlParser.normalizeSourceURL(sourceVT.url, this.accessToken);
return Fetcher.json(urlSource, this.networkOptions).then((tileJSON) => {
if (tileJSON.tiles[0]) {
tileJSON.tiles[0] = decodeURIComponent(new URL(tileJSON.tiles[0], urlSource).toString());
return toTMSUrl(tileJSON.tiles[0]);
}
});
Expand All @@ -136,7 +140,7 @@ class VectorTilesSource extends TMSSource {
});
return Promise.all(TMSUrlList);
}
return (Promise.resolve([this.url]));
return (Promise.resolve([toTMSUrl(this.url)]));
}).then((TMSUrlList) => {
this.urls = Array.from(new Set(TMSUrlList));
});
Expand Down