jieter / Leaflet-semicircle

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

CircleMarker compatibility ? #8

Closed buchanan-fh closed 8 years ago

buchanan-fh commented 8 years ago

When loading Semicircle.js on a map that already exists and uses CircleMarkers I get the following error : Semicircle.js:147 Uncaught TypeError: layer.startAngle is not a function

It seems that the Circle.extend part of the code doesn't apply to CircleMarkers

jieter commented 8 years ago

hmm, the order of inheritance changed in leaflet 1.0.0, which I assume you are using?

Should be fixed, you're welcome to make a patch and open a PR.

buchanan-fh commented 8 years ago

Yes I do use Leaflet 1.0.0 latest RC. Unfortunately I don't have sufficient knowledges and a good enough understanding of Leaflet code structure to submit a PR, but would be happy to do some tests.

jieter commented 8 years ago

Can you post a minimal example of the problem occurring?

buchanan-fh commented 8 years ago

I modified the fullcircle.html example located in your release this way, with a circleMarker that is supposed to be located just next to the circle :

<script>
    var latlng = [50.6, -0.0];
    var map = L.map('map').setView(latlng, 11);

    var radius = 500;

    L.circleMarker([50.61, -0.0]).addTo(map);

    L.circle(latlng, radius, {
        fill: true,
        fillColor:'#a1ba03',
        fillOpacity: 0.5,
        color: '#a1ba03',
        opacity: 0.5,
        startAngle: 0,
        stopAngle: 360
    }).addTo(map);

    L.circle(latlng, radius, {
        fill: true,
        fillColor:'#fff',
        fillOpacity: 0.5,
        color: '#fff',
        opacity: 0.5,
        startAngle: 20,
        stopAngle: 340
    }).addTo(map);

    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
        maxZoom: 18
    }).addTo(map);
</script>
jieter commented 8 years ago

This is the quick fix:

L.CircleMarker = L.CircleMarker.extend({
    isSemicircle: function () { return false; }
});
jieter commented 8 years ago

Released v1.0.5

buchanan-fh commented 8 years ago

Thank you very much for your fast answer !