Adding circles to start and end of polyline?

[chanmathew]

Hi there, thanks so much for your work on this lib!

Had a question and was quite stumped even after digging through docs. I have a bunch of coordinates on a map where I have drawing a line using the GeoJSON component:

{#each $routes as line, i}
    <GeoJSON id={line?.id} data={line?.polyline}>
        <LineLayer
            layout={{ 'line-cap': 'round', 'line-join': 'round' }}
            paint={{
                'line-width': 6,
                'line-color': '#316B72',
                'line-opacity': 0.8
            }}
        />
    </GeoJSON>
{/each}

What I'm trying to do is to add a circle at the start and end of each polyline, and I can't figure out how to go about doing that? I tried adding a Circle component but it would just render a circle at every coordinate in the data of the polyline.

Any help would be much appreciated.

[dabreegster]

Hi, I happened to have puzzled through this a few months ago. There doesn't seem to be a way with maplibre style expressions to pick the first/last coordinate in a linestring, so you have to generate another GeoJSON source and manually add the endpoints yourself.

Code (not using svelte-maplibre yet): https://github.com/acteng/atip/blob/62dccace32227e4cf03de8478bdec455fb7bcac3/src/lib/draw/InterventionLayer.svelte#L25 Demo: draw a route at https://acteng.github.io/atip/scheme.html?authority=Adur Discussion: https://osmus.slack.com/archives/C01G3D28DAB/p1681218199384179

[chanmathew]

Thanks so much! Will give this a try.

[dimfeld]

Moving this one over to Discussions