Leaflet detect when marker goes into and out of a circle

I am trying out geofencing with leaflet and I have a marker that can be moved and a circle on a map.

Here is the full code:

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

</head>
<body>

<head>
    <link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.43.0/css/font-awesome.min.css' rel='stylesheet' />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" />

    <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
  </head>
<body>
<div id="mapid" style="height: 600px"></div>
<script>

  var mymap = L.map('mapid', {
    center: [50.897819, -1.150189],
    zoom: 16
  });

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoic3RldmVuc2F0Y2giLCJhIjoiY2p5eDR6MWgzMHRvbjNocnJkN2d2MjRwaSJ9.wd0OtBUQQfUtNxdduQA3lg', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
            '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        id: 'mapbox.streets'
    }).addTo(mymap);

var marker = new L.marker([50.898422, -1.148444],{
    draggable: true,
    autoPan: true
}).addTo(mymap);


 var circle = L.circle([50.895763, -1.150556], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 200
}).addTo(mymap);


</script>
</body>

</body>
</html>

I need to detect when the marker going into and out of the circle.

How can I do this?

Solution

You can listen to the drag event to act when the marker is dragged
and you can then determine if the marker is inside your circle, for example by calculating the distance to the center.

Something like

marker.on('drag', function(e) {
    // distance between the current position of the marker and the center of the circle
    var d = mymap.distance(e.latlng, circle.getLatLng());

    // the marker is inside the circle when the distance is inferior to the radius
    var isInside = d < circle.getRadius();

   // let's manifest this by toggling the color
    circle.setStyle({
        fillColor: isInside ? 'green' : '#f03'
    })
});

And a demo

var mymap = L.map('mapid', {
    center: [50.895763, -1.150556],
    zoom: 16
});

var marker = new L.marker([50.896422, -1.148444],{
    draggable: true
}).addTo(mymap);

var circle = L.circle([50.895763, -1.150556], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 100
}).addTo(mymap);

marker.on('drag', function(e) {
    var d = mymap.distance(e.latlng, circle.getLatLng());
    var isInside = d < circle.getRadius();
    circle.setStyle({
        fillColor: isInside ? 'green' : '#f03'
    })
});

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
<div id="mapid" style="height: 180px"></div>