2

I'm currently working on an app that triggers a notification when someone is within a square. The following defines the square:

var zonebounds = [[30,35], [40,45]];
var zone = L.rectangle(zonebounds, {color: "#ff7800", weight: 1, oppacity: .5});

I've made the following statement to check if someone is within the square.

if (posY > zonebounds[0][0] && posY < zonebounds[1][0] && posX > zonebounds[0][1] && posX < zonebounds[1][1] && zoneTimer == 0) {
    ons.notification.toast('Test', { timeout: 5000 });
    zoneTimer = 1;
} else if (posY >! zonebounds[0][0] && posY <! zonebounds[1][0] && posX >! zonebounds[0][1] && posX <! zonebounds[1][1] && zoneTimer == 1) {
    zoneTimer = 0;
}

I think >! sadly doesn't behave as I would like it to.

I've made the zoneTimer variable so that the notification doesn't repeat itself. Maybe there is an even better way to do this.

Update

I fixed it by using a combination of the two answers I got, here is the final result:

if(zoneBoundslatLng.contains(latLng)){
    if (inZone == 0) {
    inZone = 1;
    ons.notification.toast('Zone 1, klik voor informatie.', { timeout: 5000 });
    }
} else {
    inZone = 0;
}
spelle
  • 41
  • 1
  • 4

2 Answers2

2

You could take the reverse of >, <= for checking.

For the second check, you need an OR condition.

if (
    posY > zonebounds[0][0] && posY < zonebounds[1][0] &&
    posX > zonebounds[0][1] && posX < zonebounds[1][1] &&
    zoneTimer === 0
) {
    ons.notification.toast('Test', { timeout: 5000 });
    zoneTimer = 1;
} else if (
    (posY <= zonebounds[0][0] || posY >= zonebounds[1][0] || 
    posX <= zonebounds[0][1] || posX >= zonebounds[1][1]) &&
    zoneTimer === 1
) {
    zoneTimer = 0;
}

A shorter check.

if (posY > zonebounds[0][0] && posY < zonebounds[1][0] && posX > zonebounds[0][1] && posX < zonebounds[1][1]) {
    if (zoneTimer === 0) {
        ons.notification.toast('Test', { timeout: 5000 });
        zoneTimer = 1;
    }
} else {
    if (zoneTimer === 1) {
        zoneTimer = 0;
    }
}
Nina Scholz
  • 376,160
  • 25
  • 347
  • 392
  • This was the first thing I tried, sadly this doesn't work since not all parameters are met. – spelle Mar 11 '20 at 10:41
  • I am not familiar with these terms, is there a website where I can learn more about that? – spelle Mar 11 '20 at 11:50
  • just have a look here: [logical OR `||`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR). does the second approach work? – Nina Scholz Mar 11 '20 at 11:55
  • I got it working by using the tip @Falke Design gave and your if statement within an if statement. I added the final result in my original post :) – spelle Mar 11 '20 at 12:08
2

You can check with leaflet if point is in the rectangle.

var bounds = L.latLngBounds(zonebounds);


if(bounds.contains(latlng) ){
    console.log("notify");
}else{
    console.log("nothing");
}

If your point (posX and posY) are pixels you can use this to convert:

var point = L.point(posX ,posY); // x=0,y=0
var latlng = map.layerPointToLatLng(point);

Update ...

var bounds = L.latLngBounds(zonebounds);

if(bounds.contains(latlng) && zoneTimer == 0){
    zoneTimer = 1;
    ons.notification.toast('Test', { timeout: 5000 });
    console.log("notify");
}else{
    zoneTimer = 0;
    console.log("nothing");
}
Falke Design
  • 10,635
  • 3
  • 15
  • 30
  • This is a really neat feature, thanks for mentioning. The only problem now is to only trigger the notification once when inside the square and triggering it again once someone has gone out and in. – spelle Mar 11 '20 at 10:59
  • you can add the same `zoneTimer` to the if like in your example – Falke Design Mar 11 '20 at 11:31
  • I tried that, but in that case the `zoneTimer` will switch between 0 and 1 while being within the square. – spelle Mar 11 '20 at 11:50
  • check it out now – Falke Design Mar 11 '20 at 11:56
  • 1
    That still doesn't work, I fixed it by making an if statement within an if statement like @Nina Scholz showed in her second example. – spelle Mar 11 '20 at 12:07