mapbox / mapbox/geojson.io

Percent-encoded # characters (%23) in #data= URLs cause parsing failures

Open
#1,016 0 comments 1 reaction 0 assignees View on GitHub
Dominant language
TypeScript
Stars
2.3k
Forks
640
PR merge metrics
No merged PRs in 30d

Description

GeoJSON URLs using the `#data=data:application/json,...` format fail to load when a property value contains a percent-encoded # character (%23). The same URLs were decoded and loaded correctly before the switch to Next GeoJSON.

**Examples include:**

`{ "marker-color": "#000000" }` and `{ "tag": "#foo" }`

Opening such URLs in geojson.io results in:

`JSON.parse: unterminated string literal at line x column y of the JSON data`.

**Steps to reproduce**

Open this [URL](https://geojson.io/#data=data:application/json,%7B%0A%20%20%22type%22%3A%20%22FeatureCollection%22%2C%0A%20%20%22features%22%3A%20%5B%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%22type%22%3A%20%22Feature%22%2C%0A%20%20%20%20%20%20%22geometry%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22type%22%3A%20%22Point%22%2C%0A%20%20%20%20%20%20%20%20%22coordinates%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%200%2C%0A%20%20%20%20%20%20%20%20%20%200%0A%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%22properties%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22marker-color%22%3A%20%22%23000000%22%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%5D%0A%7D) which decodes to
```
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
0,
0
]
},
"properties": {
"marker-color": "#000000"
}
}
]
}
```

**Expected behavior**

The percent-encoded GeoJSON should be decoded and parsed successfully, preserving property values such as:

```
{
"marker-color": "#000000",
"tag": "#foo"
}
```

**Actual behavior**

The GeoJSON is not loaded and a JSON parsing error is displayed:

`JSON.parse: unterminated string literal at line x column y of the JSON data`

**Workaround**

As a temporary workaround (for colors, not for e.g. hashtags) is to avoid using hex color strings in properties and migrate to the CSS RGB(a) functional syntax instead. For example, replace hex colors like `#000000` with RGB values like `rgb(0, 0, 0)` notation. This avoids introducing percent-encoded # characters (%23) into the URL payload, which appears to trigger the parsing issue.

Contributor guide

Open the contributing guide

Research direction

Start by opening the provided geojson.io URL and tracing the Next GeoJSON URL-decoding and parsing path. Reproduce the failure with the encoded `%23` values, then verify that the GeoJSON loads successfully while preserving property values such as `#000000` and `#foo`.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.