A feature with point is shown as a circle

[aloxe]

The feature in the example https://pigeon-maps.js.org/docs/geo-json

  features: [
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [2.0, 48.5] },
      properties: { prop0: "value0" },
    },
  ],

renders as

<svg width="667" height="300" viewBox="0 0 667 300" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g clip-rule="evenodd" style="pointer-events: auto;">
    <circle cx="67.27860400017107" cy="178.1113652196019" fill="#d4e6ec99" stroke-width="1" stroke="white" r="20"></circle>
  </g>
</svg>

This may be useful for some cases but I would not use it as the default behaviour to display a point. When a trace is shown by joining points, this gives an ugly line of circles.

[aloxe]

@mariusandra I don't know what you had in mind in this case but I think that a point should not trace anything but a dot. This may be used with "properties" added to the feature but I would keep this outside of pigeon.

[aloxe]

I tried the same trace with leaflet and there is also an issue with points because leaflet marks them with a marker.

Nevertheless, I think this could be good if we could choose how we want the points to appear on the map.

[mariusandra]

Hey, seems like a bug. Any chance you'd be up for submitting a PR to fix it in some way? I'm not actively using this library myself, so never stumbled upon it, and need to find time to work on a fix. Happy to quickly merge a fix though.

[baldulin]

1. If you want to render a line segment change the geometry from type Point to LineString. Cause I'm not sure why you don't like leaflet either

2. If you want to change the look of the points: You should be able to change the radius of the circle using styleCallback and some other features.

3. If you want to pass a custom component, pass it into here using props. Requires a pr obviously:
   

   pigeon-maps/src/overlays/GeoJson.tsx

   Lines 115 to 122 in 43a5fb0

   	const renderer = {
   	Point: PointComponent,
   	MultiPoint,
   	LineString,
   	MultiLineString,
   	Polygon,
   	MultiPolygon,
   	}

   
   And the correct one will be selected here:
   

   pigeon-maps/src/overlays/GeoJson.tsx

   Line 136 in 43a5fb0

   const Component = renderer[type]

[aloxe]

Ahoj @baldulin I finally figured out this is not a bug. A Point feature can be represented in any manner on a map as it is a single point. A circle is not a bad idea even if I prefer the idea of a Marker.

1. If you want to render a line segment change the geometry from type Point to LineString. Cause I'm not sure why you don't like leaflet either

If you mean that I should edit my geojson this is actually what I did. But about any anyone that simply want to use pigeon-map to display a kml file that contains many points like my example

2. If you want to change the look of the points: You should be able to change the radius of the circle using styleCallback and some other features.

This is indeed the detail I took time to figure out, I think the doc could gain in saying that the r:30 is the radius of the circle.

3. If you want to pass a custom component, pass it into here using props. Requires a pr obviously:
   

   pigeon-maps/src/overlays/GeoJson.tsx

   Lines 115 to 122 in 43a5fb0

   	const renderer = {
   	Point: PointComponent,
   	MultiPoint,
   	LineString,
   	MultiLineString,
   	Polygon,
   	MultiPolygon,
   	}

Well this is not that trivial because the features don't accept the same props and a Point isn't a LineString. I am thinking about using the styleCallback to send an alternate svg to display instead of the circle. That could make it more flexible without making pigeon heavier.

[baldulin]

This is indeed the detail I took time to figure out, I think the doc could gain in saying that the r:30 is the radius of the circle.

Hmm, yeah the documentation is very basic. I mean there is this example here doing exactly that. But maybe it needs some improvement.

Well this is not that trivial because the features don't accept the same props and a Point isn't a LineString. I am thinking about using the styleCallback to send an alternate svg to display instead of the circle. That could make it more flexible without making pigeon heavier.

I guess I'll just have a go at this then. Cause the style callback is a bit of a messy way of changing the styling, and I think that that pattern won't work for changing the component.

[aloxe]

I guess I'll just have a go at this then. Cause the style callback is a bit of a messy way of changing the styling, and I think that that pattern won't work for changing the component.

You are right, you can't change the component since it is nested into the geoJson. What you can do is draw something else that a circle in some cases. This is what I did in the PR #211 . You may want to have a look and comment.