jieter / Leaflet-semicircle

Extend Leaflet's circle class to display semicircles.
http://jieter.github.io/Leaflet-semicircle/examples/semicircle.html
MIT License
121 stars 52 forks source link

When drawing a full circle, a single line is drawn #1

Closed verganis closed 11 years ago

verganis commented 11 years ago

I am using this library to add pie charts on a map, so I have a percentage value which I convert to start / stop angle for two semi-circles.

When the percentage I am showing reaches 100% I need to draw a single complete circle. So if I use the following code:

L.circle([44.746000, 11.439200], 2000,
                            {
                                fill: true,
                                fillColor:'#a1ba03',
                                fillOpacity: 0.5,
                                color: '#a1ba03',
                                opacity: 0.5,
                                startAngle: 0,
                                stopAngle:360
                            }
                    ).addTo(map);

What appears on the map is a single line.

So I found out that if I choose startAngle:0 and stopAngle:359 the semi-circle appears (it could be a raw workaround) but then if I zoom out a bit the semi-circle becomes a single line.

I attach two pictures showing the behaviour for the second scenario (which I think is related to the issue when drawing a full circle)

map2 map1

verganis commented 11 years ago

I quickly solved the issue inserting the following code at line 42 of Semicircle.js

            if(this.options.startAngle == 0 && this.options.stopAngle>359){
                var e = this._point, t = this._radius;
                return "M" + e.x + "," + (e.y - t) + "A" + t + "," + t + ",0,1,1," + (e.x - .1) + "," + (e.y - t) + " z";
            }

But I am sure there is a better and cleaner way to fix the bug.

verganis commented 11 years ago

Hello, sorry to say but I tried the library with the integration you just made and it still doesn't work.

jieter commented 11 years ago

You are right, I was pushing it to fast. Looks like it's working now...

jieter commented 11 years ago

btw: Nice use of the plugin!

If you have something of a concise pie chart class, feel free to send a pull request to include it with Leaflet-Semicircle

verganis commented 11 years ago

Thanks! At the moment I am just painting two complementary semi-circles to draw simple pie graphs but I don't exclude I will turn this into a class.