Percent-encoded # characters (%23) in #data= URLs cause parsing failures
- 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
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