Fabio/tileserver-gl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Static images: Allow styling each path differently (#972)

Browse source 
* fix: allow to style each individual path for static images

Signed-off-by: Samuel Leihkamm <s.leihkamm@gmx.com>

* chore: cleanup drawPath render function

Signed-off-by: Samuel Leihkamm <s.leihkamm@gmx.com>

---------

Signed-off-by: Samuel Leihkamm <s.leihkamm@gmx.com>
This commit is contained in:
Samuel 2023-09-22 04:55:54 +02:00 committed by GitHub
parent ad185479f2
commit 02ee629f30
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 86 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/serve_rendered.js
View file

@ -442,10 +442,12 @@ const drawMarkers = async (ctx, markers, z) => {
* @param {object} ctx Canvas context object. * @param {object} ctx Canvas context object.
* @param {List[Number]} path List of coordinates. * @param {List[Number]} path List of coordinates.
* @param {object} query Request query parameters. * @param {object} query Request query parameters.
* @param {string} pathQuery Path query parameter.
* @param {number} z Map zoom level. * @param {number} z Map zoom level.
*/ */
const drawPath = (ctx, path, query, z) => { const drawPath = (ctx, path, query, pathQuery, z) => {
const renderPath = (splitPaths) => { const splitPaths = decodeURIComponent(pathQuery).split('|');
if (!path || path.length < 2) { if (!path || path.length < 2) {
return null; return null;
} }
@ -467,8 +469,7 @@ const drawPath = (ctx, path, query, z) => {
} }
// Optionally fill drawn shape with a rgba color from query // Optionally fill drawn shape with a rgba color from query
const pathHasFill = const pathHasFill = splitPaths.filter((x) => x.startsWith('fill')).length > 0;
splitPaths.filter((x) => x.startsWith('fill')).length > 0;
if (query.fill !== undefined || pathHasFill) { if (query.fill !== undefined || pathHasFill) {
if ('fill' in query) { if ('fill' in query) {
ctx.fillStyle = query.fill || 'rgba(255,255,255,0.4)'; ctx.fillStyle = query.fill || 'rgba(255,255,255,0.4)';
@ -541,16 +542,6 @@ const drawPath = (ctx, path, query, z) => {
ctx.stroke(); ctx.stroke();
}; };
// Check if path in query is valid
if (Array.isArray(query.path)) {
for (let i = 0; i < query.path.length; i += 1) {
renderPath(decodeURIComponent(query.path.at(i)).split('|'));
}
} else {
renderPath(decodeURIComponent(query.path).split('|'));
}
};
const renderOverlay = async ( const renderOverlay = async (
z, z,
x, x,
@ -592,9 +583,10 @@ const renderOverlay = async (
} }
// Draw provided paths if any // Draw provided paths if any
for (const path of paths) { paths.forEach((path, i) => {
drawPath(ctx, path, query, z); const pathQuery = Array.isArray(query.path) ? query.path.at(i) : query.path;
} drawPath(ctx, path, query, pathQuery, z);
});
// Await drawing of markers before rendering the canvas // Await drawing of markers before rendering the canvas
await drawMarkers(ctx, markers, z); await drawMarkers(ctx, markers, z);