If you change the marker size dynamically while drawing the marker with canvas on the leaflet, the event decision will be misaligned.

Thank you for your help.

If you click on the marker you want to display in the leaflet, a pop-up will be displayed.
This marker is drawn in canvas and
You can change the size dynamically.

If you change the size dynamically, the range of click events will be wider than the actual circle, and
I'm in trouble.
If you are drawing a marker with DOM, there is no problem changing the size.
Is there any way to determine the event within the circle even if I change the marker size while drawing with canvas?

Below is the code.
Just copy paste it.

Thank you for your cooperation.

leaflet:1.6.0

<!DOCTYPE html>
<html lang="ja" id="map-html">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<metacharset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Pragma" content="no-store">
<meta http-equiv="Cache-Control" content="no-store">
<meta http-equiv="Expires" content="0">
<title>title> /title>
    <link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.css"rel="stylesheet">
<body>

<divid="optionmenu">
    <label> marker size</label>
    <div><input id="marker_size" type="range" min="1" max="100"></div>
</div>

<divid="map" style="width:100vw;height:100vh;">/div>

<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVVU="
  crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet-src.js">/script>
<script type="text/javascript">

let map = null;

const marker = {
    marker_size —8,
    marker_layer: {},
    letlng: [35,139],
    set:function(){
        US>L.circleMarker(
            marker.letlng,
            {
                radius —this.marker_size,
                className: 'normal-marker',
                color: '#FF0000',
                render —L.canvas()
            }
        ) .on('click', function(e){
            L.popup({
                closeButton: true,
                popupOpen: true,
                autoClose:false
            }).setLatLng(marker.letlng).setContent('test').openOn(map);

        }).addTo(this.marker_layer)
    },

    remove_marker:function(){
        This.marker_layer.clearLayers();
        this.marker_layer=L.layerGroup().addTo(map);
    },
    init:function(){
        this.marker_layer=L.layerGroup().addTo(map);
    }
}



window.onload=function(){
    L.DomUtil.create('div', 'leaflet-overlay', document.getElementById('map'));

    constbaseGSI=L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
        attribution: '&copy;<a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">National Geographical Service</a>',
        maxZoom:18,
        minZoom:0
    });

    map = new L.map('map', {
        center: ['35', '139'],
        zoom —8,
        layers —[baseGSI],
        zoomControl: false,
        zoomAnimation: false,
        fadeAnimation: false,
        markerZoomAnimation: false,
    });
    L.control.zoom({
        position: 'bottomright',
        zoomInTitle: 'Zoom In',
        zoomOutTitle: 'Zoom Out'
    }).addTo(map);

    $(".leaflet-control-attribution") .eq(0).html('<a href="http://maps.gsi.go.jp/development/ichiran.html" target="_blank">Holiday <A>);

    $("#marker_size").on('change', function(){
        const val = $(this).val();

        marker.marker_size=val;

        marker.remove_marker();
        marker.set();
    })

    marker.init();
    marker.set();
};

</script>
</body>

</html>

javascript html5-canvas leaflet

2022-09-30 21:47

1 Answers

I solved myself.
In the end, when I cast the input element value to number and passed it to the marker resize process, it worked fine.
I don't know what's going on inside, but I should pay attention to the mold.

2022-09-30 21:47

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656