CODEWITHSUNDEEP
leaflet
marwan zoubi
marwan zoubi

Reputation: 1

Semi Circle marker in leaflet

Dears,

I created a semi circle in leaflet and I have three semi circles on the same latitude and longitue each one with different angel. I just want to add a min circle or icon or marker or whatever inside each semi circle (in the center of semi circle).

does anyone have any idea how to do that please ?

    var $html = $(L.HTMLUtils.buildTable(record));

    var circle =  L.semiCircle(latLng, L.extend({
        radius: 70,
        renderer: canvas,
        weight: 1
    }, options)).bindTooltip(metaData).bindPopup($html.wrap('<div/>').parent().html(), {
        minWidth: 400,
        maxWidth: 400
    });

    circle.addTo(mymap);
    debugger;

    var circleBounds = circle.getBounds();

    var center = circleBounds.getCenter(),
        neCoord = circleBounds.getNorthEast(),
        northCenterCoord = new L.LatLng(center.lat, neCoord.lng, true);

    //debugger;

    var icon = L.divIcon({
        html: '<div class="txt">' + 'tessst' + '</div>',
        className: 'circle-with-txt',
        iconSize: [40, 40]
    });
    //var circle = L.circleMarker(latLng, options);
    var marker = L.marker(northCenterCoord, {
        icon: icon
    });
    var group = L.layerGroup([circle, marker]);
    group.addTo(mymap);

Regards,

Upvotes: 0

Views: 376

Answers (1)

Falke Design
Falke Design

Reputation: 11338

You can get the center of the semi circle with circle.getLatLng()

To add a small circlemarker call L.circleMarker(circle.getLatLng(), {radius: 10}).addTo(map)

Upvotes: 0

Related Questions