fix: incorrect polyline decoding (#993)

* fix: incorrect polyline decoding
Don't split static image encoded path on pipe or comma

Signed-off-by: boldtrn <boldtrn@gmail.com>

* fix: still allow other parameters other than enc:
That way we can still style individual paths

Signed-off-by: boldtrn <boldtrn@gmail.com>

* chore: lint

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* chore: lint + comment

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* docs: try to clarify path information

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* fix: stroke color not working unless path is specified

i found this issue testing encoded paths. If width is not specifed, stroke color does not work

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* docs: show different options

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

---------

Signed-off-by: boldtrn <boldtrn@gmail.com>
Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>
Co-authored-by: Andrew Calcutt <acalcutt@techidiots.net>
This commit is contained in:
Robin 2023-09-27 05:53:16 +02:00 committed by GitHub
parent c13e5e6821
commit d759dd2952
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 28 additions and 24 deletions

View File

@ -35,13 +35,14 @@ Static images
* All the static image endpoints additionally support following query parameters:
* ``path`` - comma-separated ``lng,lat``, pipe-separated pairs
* e.g. ``5.9,45.8|5.9,47.8|10.5,47.8|10.5,45.8|5.9,45.8``
* can be provided multiple times
* or pass the path as per `Maptiler Cloud API <https://docs.maptiler.com/cloud/api/static-maps/>`_
* Match pattern: ((fill|stroke|width)\:[^\|]+\|)*((enc:.+)|((-?\d+\.?\d*,-?\d+\.?\d*\|)+(-?\d+\.?\d*,-?\d+\.?\d*)))
* ``path``
* can be provided multiple times
* syntax
* comma-separated ``lng,lat``, pipe-separated pairs
* e.g. ``path=5.9,45.8|5.9,47.8|10.5,47.8|10.5,45.8|5.9,45.8``
* Match pattern with options ``((fill|stroke|width)\:[^\|]+\|)*((enc:.+)|((-?\d+\.?\d*,-?\d+\.?\d*\|)+(-?\d+\.?\d*,-?\d+\.?\d*)))``
* e.g. ``path=stroke:yellow|width:2|fill:green|5.9,45.8|5.9,47.8|10.5,47.8|10.5,45.8|5.9,45.8`` or ``stroke:blue|enc:_p~iF~ps|U_ulLnnqC_mqNvxq`@``
* 'enc:' is specified in `Google Encoded Polyline Format <https://developers.google.com/maps/documentation/utilities/polylinealgorithm>`. If used, the rest of the path parameter is considered to be part of the encoded polyline string -- do not specify the coordinate pairs.
* ``latlng`` - indicates coordinates are in ``lat,lng`` order rather than the usual ``lng,lat``
* ``fill`` - color to use as the fill (e.g. ``red``, ``rgba(255,255,255,0.5)``, ``#0000ff``)
* ``stroke`` - color of the path stroke

View File

@ -162,21 +162,12 @@ const extractPathsFromQuery = (query, transformer) => {
providedPath.includes('enc:') &&
PATH_PATTERN.test(decodeURIComponent(providedPath))
) {
const encodedPaths = providedPath.split(',');
for (const path of encodedPaths) {
const line = path
.split('|')
.filter(
(x) =>
!x.startsWith('fill') &&
!x.startsWith('stroke') &&
!x.startsWith('width'),
)
.join('')
.replace('enc:', '');
const coords = polyline.decode(line).map(([lat, lng]) => [lng, lat]);
paths.push(coords);
}
// +4 because 'enc:' is 4 characters, everything after 'enc:' is considered to be part of the polyline
const encIndex = providedPath.indexOf('enc:') + 4;
const coords = polyline
.decode(providedPath.substring(encIndex))
.map(([lat, lng]) => [lng, lat]);
paths.push(coords);
} else {
// Iterate through paths, parse and validate them
const currentPath = [];
@ -520,8 +511,8 @@ const drawPath = (ctx, path, query, pathQuery, z) => {
if ('stroke' in query) {
ctx.strokeStyle = query.stroke;
}
// Path Width gets higher priority
if (pathHasWidth) {
// Path Stroke gets higher priority
if (pathHasStroke) {
ctx.strokeStyle = splitPaths
.find((x) => x.startsWith('stroke:'))
.replace('stroke:', '');

View File

@ -171,6 +171,18 @@ describe('Static endpoints', function () {
'?path=-10,-10|-20,-20',
);
});
describe('encoded path', function () {
testStatic(
prefix,
'auto/20x20',
'png',
200,
2,
/image\/png/,
'?path=' + decodeURIComponent('enc:{{biGwvyGoUi@s_A|{@'),
);
});
});
describe('invalid requests return 4xx', function () {