Map features get double serialized

[chanmathew]

Hi @dimfeld - Pardon me if I'm being annoying here, but on a streak to document some things :)

I've noticed that when you pass nested arrays or objects to a GeoJSON source as a feature:

<GeoJSON
        id="places"
        promoteId="id"
        data={{
            type: 'FeatureCollection',
            features: filteredMapData?.map((place: SelectPlaceModel) => ({
                type: 'Feature',
                geometry: {
                    type: 'Point',
                    coordinates: [place?.coordinates?.x, place?.coordinates?.y] as [number, number]
                },
                id: place.id,
                properties: place
            }))
        }}
        cluster={{
            radius: clusterRadius,
            maxZoom: 11
        }}
    >

And then you access the features in a MarkerLayer, either via an event, or the feature attribute:

<MarkerLayer
    applyToClusters
    asButton
    class="rounded-full border-8 border-white/60 ring-4 ring-white/30 ring-offset-4 ring-offset-white/10"
    draggable={false}
    on:click={(e) => console.log(e)} // e.properties would be double stringified
    let:feature
>
{console.log(feature.properties)} // feature.properties would be double stringified

Then the objects would be double stringified, here's an example:

{
    "id": "abc-123",
    "coordinates": "{\"x\":-115.17214,\"y\":36.1087863}",
    "google_place_name": "Taco Bell Cantina",
    "name": "Taco Bell Cantina",
    "description": "",
    "rating": 4.4,
    "user_ratings_total": 5482,
    "category": "{\"id\":8,\"icon\":\"ph:map-pin-fill\",\"name\":\"Other\",\"sort_order\":7}",
    "subcategory": "{\"id\":61,\"icon\":\"ph:map-pin-fill\",\"name\":\"Other\",\"sort_order\":60}",
    "photo": "817968ba-2193-42b9-8b94-fc2a02c3a142_0.jpg_1728874009077_undefined.jpg",
    "city": "Las Vegas",
    "country": "US",
    "formatted_address": "3717 S Las Vegas Blvd Suite 140-A, Las Vegas, NV 89109, USA",
    "website": "https://locations.tacobell.com/nv/las-vegas/3717-south-las-vegas-blvd.html?utm_source=yext&utm_campaign=googlelistings&utm_medium=referral&utm_term=032366&utm_content=website&y_source=1_NjE0MzkxNi03MTUtbG9jYXRpb24ud2Vic2l0ZQ%3D%3D",
    "opening_hours": "{\"periods\":[{\"open\":{\"day\":0,\"time\":\"0000\",\"hours\":0,\"minutes\":0}}],\"open_now\":true,\"weekday_text\":[\"Monday: Open 24 hours\",\"Tuesday: Open 24 hours\",\"Wednesday: Open 24 hours\",\"Thursday: Open 24 hours\",\"Friday: Open 24 hours\",\"Saturday: Open 24 hours\",\"Sunday: Open 24 hours\"]}",
    "formatted_phone_number": "(702) 272-2422",
    "sort_order": 7
}

Is there a way to make sure it's not double stringified? Right now my workaround is to have a helper function that parses it all before I do anything with it.

[dimfeld]

I’m on my phone right now so can’t easily look it up, but IIRC someone else mentioned this before and it turned out to be an internal thing with how maplibre represents data internally. I think the best solution here is to look up those entries in the original source data where it looks like it should.

[dimfeld]

Here was the previous discussion: https://github.com/dimfeld/svelte-maplibre/discussions/162

[dimfeld]

Pardon me if I'm being annoying here, but on a streak to document some things

Not annoying at all, these are good questions :)

[chanmathew]

Ah doh! Seems like both issues are blocked then, thanks for the quick clarifications! 😀