Remove graphics when popup visible is false ArcgIS API 4.X

[Anonymous User]

Hi all,

I want to clear graphics and close popup on the close() button of the popup. I am using the watch method and it works great.

The issue I have with this method is that when I click to start the event listener, I want the function to clear all popups in the map previously opened by other functions.

 $("#clicking").click(function () {
                view.popup.close();
});‍‍‍

Since the watch event removes layers when view.popup.visible === false

 // Watch view's stationary property for becoming true.
            watchUtils.whenFalse(view.popup, "visible", function (visible) {
                // Get the new center of the view only when view is stationary.
                console.log(visible)
                view.graphics.removeAll();
                layerbuffer.removeAll();
            });‍‍‍‍‍‍‍

I can only add the layers once the popup is opened.

onclickhandler = view.on("click", function (event) {
                        var visible1 = view.popup.visible;
                        $('#viewDiv').css('cursor', 'pointer');
                        view.graphics.removeAll();
                        layerbuffer.removeAll();
                        geombuffer = view.toMap({
                            x: event.x,
                            y: event.y
                        });
                        
                        pointGraphic = new Graphic({
                            geometry: geombuffer,
                            symbol: symboltoclone
                        });
                        var buffer = geometryEngine.geodesicBuffer(geombuffer, 2000, "feet");
                        var graphicbuffer = new Graphic({
                            geometry: buffer,
                            symbol: fillSymbol
                        });
                        layerbuffer.graphics.add(graphicbuffer);
                        view.graphics.add(pointGraphic);
                        //Set up query for geom
                        var queryTask = new QueryTask({
                            url: nitratequeryurl
                        });
                        //Query to return California geometry
                        var query = new Query();
                        //Set the query
                        query.geometry = buffer;  // the point location of the pointer
                        query.outFields = ["OBJECTID "]
                        //return geometry
                        query.returnGeometry = true;
                        //Intersects
                        query.spatialRelationship = "intersects";
                        //Execute the query
                        queryTask.executeForCount(query).then(function (response) {
                            
                            view.popup.open({
                                title: "Search Results",
                                location: geombuffer,
                                content: "<br><center>Number of nitrate-impacted wells within 2000 feet of:<br><br><center>" + "<center>" + geombuffer.latitude.toFixed(3).toString() + "N &nbsp" + "," + Math.abs(geombuffer.longitude).toFixed(3).toString() + "W</center><br>" + "<center><b>" + response + " Wells</b><br><center><br><i>Drag marker to update location</i></center>"
                            })
                            layerbuffer.graphics.add(graphicbuffer);
                            view.graphics.add(pointGraphic);
                           
                            view.goTo({
                                target: pointGraphic,
                                zoom: 15
                            });
                            
                            
                        });
                    });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Is there a way to clear graphics only if you click on the "close" button of the popup instead of the watch? 

[RobertScheitlin__GISP]

Alex,

   I'm a little confused. When are you adding the view.popup.watch code? If you do this as soon as the view is ready (i.e.view.when) then I don't see the problem...

[Anonymous User]

Robert,

The only issue here is that I have to add the graphics after the popup is opened, in the query response. The popup opens first then graphic are added. I would like the graphics to be added before the popup is opened. 

queryTask.executeForCount(query).then(function (response) {

                    view.popup.open({
                        title: "Search Results",
                        location: geombuffer,
                        content: "<br><center>Number of nitrate-impacted wells within 2000 feet of:<br><br><center>" + "<center>" + geombuffer.latitude.toFixed(3).toString() + "N &nbsp" + "," + Math.abs(geombuffer.longitude).toFixed(3).toString() + "W</center><br>" + "<center><b>" + response + " Wells</b><br><center><br><i>Drag marker to update location</i></center>"
                    })
                    layerbuffer.graphics.add(graphicbuffer);
                    view.graphics.add(pointGraphic);

                    view.goTo({
                        target: pointGraphic,
                        zoom: 16
                    });‍‍‍‍‍‍‍‍‍‍‍‍‍‍

if I want to add the graphics first then I need to add the graphics in that section of the code:

 onclickhandler = view.on("click", function (event) {
                var visible1 = view.popup.visible;
                $('#viewDiv').css('cursor', 'pointer');
                view.graphics.removeAll();
                layerbuffer.removeAll();
                geombuffer = view.toMap({
                    x: event.x,
                    y: event.y
                });

                pointGraphic = new Graphic({
                    geometry: geombuffer,
                    symbol: symboltoclone
                });
                var buffer = geometryEngine.geodesicBuffer(geombuffer, 2000, "feet");
                var graphicbuffer = new Graphic({
                    geometry: buffer,
                    symbol: fillSymbol
                });
                layerbuffer.graphics.add(graphicbuffer);
                view.graphics.add(pointGraphic);
                //Set up query for geom
                var queryTask = new QueryTask({
                    url: nitratequeryurl
                });
                //Query to return California geometry
                var query = new Query();
                //Set the query
                query.geometry = buffer;  // the point location of the pointer
                query.outFields = ["OBJECTID "]
                //return geometry
                query.returnGeometry = true;
                //Intersects
                query.spatialRelationship = "intersects";‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

However, only the popup will show up because the view.popup.watch would clear it up because the popup is not visible

 // Watch view's stationary property for becoming true.
            watchUtils.whenFalse(view.popup, "visible", function (visible) {
                // Get the new center of the view only when view is stationary.
                console.log(visible)
                view.graphics.removeAll();
                layerbuffer.removeAll();
            });‍‍‍‍‍‍‍

[RobertScheitlin__GISP]

Alex,

   I can't quite wrap my head around this. Could you have your full code?

[Anonymous User]

My code is here: JS Bin - Collaborative JavaScript Debugging 

It behaves a little different than on my end but you I start the click handler, it works in the first click, the second click removes the graphics because the popup visibility is set to false.

[RobertScheitlin__GISP · Accepted solution]

Alex,

  Here is the fix with comments:

//Variables for Locators used in the app
var geomcalifornia, geocodegeomerty, graphic, searchWidget, addressname, geombuffer, geombufferlocate, pointGraphic,
drag, removed, handlerMove, popupCloseHandler;

//All dojo extensions needed
require([
  "esri/Map",
  "esri/views/MapView",
  "esri/symbols/SimpleMarkerSymbol",
  "esri/widgets/Home",
  "esri/widgets/ScaleBar",
  "esri/layers/MapImageLayer",
  "esri/tasks/Locator",
  "esri/widgets/Search",
  "esri/PopupTemplate",
  "esri/Graphic",
  "esri/geometry/Extent",
  "esri/tasks/QueryTask",
  "esri/geometry/geometryEngine",
  "esri/tasks/support/Query",
  "esri/layers/GraphicsLayer",
  "esri/widgets/Popup",
  "esri/PopupTemplate",
  "esri/symbols/PictureMarkerSymbol",
  "esri/core/watchUtils",
  "esri/widgets/Locate",
  "dojo/domReady!"
], function (Map, MapView, SimpleMarkerSymbol, Home, ScaleBar, MapImageLayer, Locator, Search, PopupTemplate, Graphic, Extent,
    QueryTask, geometryEngine, Query, GraphicsLayer, Popup, PopupTemplate, PictureMarkerSymbol, watchUtils, Locate) {

    // Nitrate Layer REST is here:;
    var nitrate = new MapImageLayer("https://gispublic.waterboards.ca.gov/ArcGIS/rest/services/Water_Quality/Nitrate_Impacted_Wells/MapSe...");

    // State Boundary REST is here:
    var stateboundary = new MapImageLayer("https://gispublic.waterboards.ca.gov/ArcGIS/rest/services/Administrative/State_Boundary/MapServer");

    var nitratequeryurl = "https://gispublic.waterboards.ca.gov/ArcGIS/rest/services/Water_Quality/Nitrate_Impacted_Wells/MapSe...";

    var stateboundarygeom = "https://gispublic.waterboards.ca.gov/ArcGIS/rest/services/Administrative/State_Boundary/MapServer/1";

    //Set the locator here
    var locator = new Locator({ url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer" });

    var layerbuffer = new GraphicsLayer();
    var pointlocation = new GraphicsLayer();

    //Set the Map here
    var map = new Map({
        basemap: "streets",
        //Adding the Layers here:
        layers: [layerbuffer, nitrate, stateboundary]
    });

    //Map view for the app
    var view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 6,
        center: [-120, 38] // longitude, latitude
    });
    var open = false;
    var onclickhandler;
    var visible1 = false;
    let draggingGraphic;
    let tempGraphic;
    let newGraphic;
    var popup = view.popup;
    //Extent for the geocoding address search
    var extent = new Extent({
        xmin: -124.996757,
        ymin: 32.492618,
        xmax: -113.542131,
        ymax: 42.129445,
        spatialReference: 4326

    });
    //Home button goes here
    var homeBtn = new Home({
        view: view
    });

    // Add the home button to the top left corner of the view
    view.ui.add(homeBtn, "top-left");

    var scaleBar = new ScaleBar({
        view: view,
        unit: "dual"
    });
    // Add widget to the bottom left corner of the view
    view.ui.add(scaleBar, {
        position: "bottom-left"
    });

    $(".card").show();
    //User Input Address Value
    var addressval = $("#address").val();

    //User Input Address Value On change
    $("#address").change(function () {
        addressval = $("#address").val();
    });

    // Create a symbol for rendering the buffer graphic
    var fillSymbol = {
        type: "simple-fill", // autocasts as new SimpleFillSymbol()
        color: [255, 20, 24, 0.2],
        outline: { // autocasts as new SimpleLineSymbol()
            color: [255, 0, 0],
            width: 2
        }
    };

    var symboltoclone = {
        type: "simple-marker",
        style: "square",
        outline: {
            width: 5,
            color: [168, 168, 0, 0.51]
        },
        size: 17,
        color: [0, 92, 230, 1]
    };
    var graphlocate = new Graphic({
        symbol: symboltoclone  // overwrites the default symbol used for the
        // graphic placed at the location of the user when found
    })
    var locateWidget = new Locate({
        view: view,   // Attaches the Locate button to the view
        scale: 10000
    });


    // Add the locate widget to the top left corner of the view
    view.ui.add(locateWidget, {
        position: "top-left"
    });

    locateWidget.on("locate", function (locateEvent) {
        view.graphics.removeAll();
        layerbuffer.removeAll();
        console.log(locateEvent.target.graphic.geometry)
        geombufferlocate = locateEvent.target.graphic.geometry
        var graphlocate = new Graphic({
            geometry: geombufferlocate,
            symbol: symboltoclone  // overwrites the default symbol used for the
            // graphic placed at the location of the user when found
        })
        var buffer = geometryEngine.geodesicBuffer(geombufferlocate, 2000, "feet");
        var graphicbuffer = new Graphic({
            geometry: buffer,
            symbol: fillSymbol
        });
        view.graphics.add(graphlocate);
        layerbuffer.graphics.add(graphicbuffer);
        //Set up query for geom
        var queryTask = new QueryTask({
            url: nitratequeryurl
        });
        //Query to return California geometry
        var query = new Query();
        //Set the query
        query.geometry = buffer;  // the point location of the pointer
        query.outFields = ["OBJECTID "]
        //return geometry
        query.returnGeometry = true;
        //Intersects
        query.spatialRelationship = "intersects";
        //Execute the query
        queryTask.executeForCount(query).then(executequerylocate);
    });

    function executequerylocate(response) {
        console.log(geombufferlocate)
        popup.open({
            title: "Search Results",
            location: geombufferlocate,
            content: "<br><center>Number of TCP-impacted wells within 2000 feet of:<br><br><center>" + "<center>" + geombufferlocate.latitude.toFixed(3).toString() + "N &nbsp" + "," + Math.abs(geombufferlocate.longitude).toFixed(3).toString() + "W</center><br>" + response + " Wells</b><br><center><br><i>Drag marker to update location</i></center>"
        });
    }

    //var graphic = pointGraphic.clone();
    var pointGraphic = new Graphic({
        geometry: geombuffer,
        symbol: symboltoclone
    });

    //Set up query for geom
    var queryTask = new QueryTask({
        url: stateboundarygeom
    });
    //Query to return California geometry
    var query = new Query();
    //Set the query
    query.where = "NAME = 'California'";
    //return geometry
    query.returnGeometry = true;
    //Execute the query
    queryTask.execute(query).then(function (results) {
        view.graphics.removeAll();
        layerbuffer.removeAll();

        //Set California extent variable
        geomcalifornia = results.features[0].geometry;
        //Search widget here
        searchWidget = new Search({
            view: view,
            popupEnabled: false,
            popupOpenOnSelect: false,
            includeDefaultSources: false,
            sources: // Default sources[] when sources is not specified
            [
                {
                    locator: new Locator({ url: "//geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer" }),
                    singleLineFieldName: "SingleLine",
                    outFields: ["Addr_type"],
                    name: "Nitrate Tool Search Widget Customized",
                    placeholder: "1001 I Street, Sacramento",
                    resultSymbol: symboltoclone,
                    filter: { geometry: geomcalifornia },
                    zoomScale: 10000
                }
            ]
        });
        searchWidget.on("select-result", executebuffer);
        //Add Search widget to UI
        view.ui.add(searchWidget, {
            position: "top-left"
        });
    });


    function executebuffer(evt) {
        addressname = evt.result.name;
        geombuffer = evt.result.feature.geometry
        var buffer = geometryEngine.geodesicBuffer(geombuffer, 2000, "feet");
        var graphicbuffer = new Graphic({
            geometry: buffer,
            symbol: fillSymbol
        });
        layerbuffer.graphics.add(graphicbuffer);

        //Set up query for geom
        var queryTask = new QueryTask({
            url: nitratequeryurl
        });
        //Query to return California geometry
        var query = new Query();
        //Set the query
        query.geometry = buffer;  // the point location of the pointer
        query.outFields = ["OBJECTID "]
        //return geometry
        query.returnGeometry = true;
        //Intersects
        query.spatialRelationship = "intersects";
        //Execute the query
        queryTask.executeForCount(query).then(executequery);
    }

    function executequery(response) {
        popup.open({
            title: "Search Results",
            location: geombuffer,
            content: "<br><center>Number of TCP-impacted wells within 2000 feet of:<br><br><center>" + "<center>" + addressname + "</center><br>" + "<center><b>" + response + " Wells</b><br><center><br><i>Drag marker to update location</i></center>"
        });
        //Clear buffer
        $(".esri-search__clear-button").click(function () {
            view.graphics.removeAll();
            layerbuffer.removeAll();
            popup.close();
        });
        $('#viewDiv').css('cursor', 'default');
    }

    $("#clicking").click(function () {
        view.popup.close();
        $('#viewDiv').css('cursor', 'pointer');
        view.graphics.removeAll();
        layerbuffer.removeAll();
        searchWidget.clear();
        $("#clicking img").attr("src", "images/targetclickon.png");
        open = !open;
        if (open) {
            handlerMove = view.on("pointer-move", function (evt) {
                var screenPoint = {
                    x: evt.x,
                    y: evt.y
                };

                // the hitTest() checks to see if any graphics in the view
                // intersect the given screen x, y coordinates
                view.hitTest(screenPoint)
                  .then(function (response) {
                      if (response.results[0].graphic.geometry.type === 'point') {
                          $('#viewDiv').css('cursor', 'grab');
                      }
                      else {
                          $('#viewDiv').css('cursor', 'pointer');
                      }
                  });
            });

            onclickhandler = view.on("click", function (event) {
//remove the popup watch handler if it exists
                if(popupCloseHandler){
                  popupCloseHandler.remove();
                }
                $('#viewDiv').css('cursor', 'pointer');
                view.graphics.removeAll();
                layerbuffer.removeAll();
                geombuffer = view.toMap({
                    x: event.x,
                    y: event.y
                });

                pointGraphic = new Graphic({
                    geometry: geombuffer,
                    symbol: symboltoclone
                });
                var buffer = geometryEngine.geodesicBuffer(geombuffer, 2000, "feet");
                var graphicbuffer = new Graphic({
                    geometry: buffer,
                    symbol: fillSymbol
                });
                layerbuffer.graphics.add(graphicbuffer);
                view.graphics.add(pointGraphic);
                //Set up query for geom
                var queryTask = new QueryTask({
                    url: nitratequeryurl
                });
                //Query to return California geometry
                var query = new Query();
                //Set the query
                query.geometry = buffer;  // the point location of the pointer
                query.outFields = ["OBJECTID "]
                //return geometry
                query.returnGeometry = true;
                //Intersects
                query.spatialRelationship = "intersects";
                //Execute the query
                queryTask.executeForCount(query).then(function (response) {
                    view.popup.open({
                        title: "Search Results",
                        location: geombuffer,
                        content: "<br><center>Number of TCP-impacted wells within 2000 feet of:<br><br><center>" + "<center>" + geombuffer.latitude.toFixed(3).toString() + "N &nbsp" + "," + Math.abs(geombuffer.longitude).toFixed(3).toString() + "W</center><br>" + "<center><b>" + response + " Wells</b><br><center><br><i>Drag marker to update location</i></center>"
                    })

                    view.goTo({
                        target: pointGraphic,
                        zoom: 16
                    });
//Add the watch for popup once the popup has been opened
                    popupCloseHandler = watchUtils.whenFalse(view.popup, "visible", function (visible) {
//Only act on the property if it is fals (i.e. closed)
                        if(!visible){
                          view.graphics.removeAll();
                          layerbuffer.removeAll();
                        }
                    });

                });
            });

        } else {
            $("#clicking img").attr("src", "images/targetclick.png");
            $('#viewDiv').css('cursor', 'default');
            removed = onclickhandler.remove();
            removed = handlerMove.remove();
            view.graphics.removeAll();
            layerbuffer.removeAll();
            view.popup.close();
        };
    });

    function changeCursor(response) {
        if (response.results.length > 0) {
            $('#viewDiv').css('cursor', 'pointer');
        } else {
            $('#viewDiv').css('cursor', 'default');
        }
    }

    view.on("drag", function (evt) {
        // if this is the starting of the drag, do a hitTest
        if (evt.action === 'start') {
            view.hitTest(evt).then(resp => {
                if (resp.results[0].graphic && resp.results[0].graphic.geometry.type === 'point') {
                    evt.stopPropagation();
                    // if the hitTest returns a point graphic, set dragginGraphic
                    draggingGraphic = resp.results[0].graphic;
                }
            });
        } else if (evt.action === 'update') {
            $('#viewDiv').css('cursor', 'grabbing');
            // on drag update events, only continue if a draggingGraphic is set
            if (draggingGraphic) {
                evt.stopPropagation();
                // if there is a tempGraphic, remove it
                if (tempGraphic) {
                    view.graphics.remove(tempGraphic);
                } else {
                    // if there is no tempGraphic, this is the first update event, so remove original graphic
                    view.graphics.remove(draggingGraphic);
                }
                // create new temp graphic and add it
                tempGraphic = draggingGraphic.clone();
                tempGraphic.geometry = view.toMap(evt);
                view.graphics.add(tempGraphic);
            }

        } else if (evt.action === 'end') {
            if (open) {
                $('#viewDiv').css('cursor', 'pointer');
            } else {
                $('#viewDiv').css('cursor', 'default');
            }
            // Set up a click event handler and retrieve the screen x, y coordinates
            drag = evt.action === 'end';
            // on drag end, continue only if there is a draggingGraphic
            if (draggingGraphic) {
                view.graphics.removeAll();
                layerbuffer.removeAll();
                searchWidget.clear();
                evt.stopPropagation();
                // rm temp
                if (tempGraphic) view.graphics.remove(tempGraphic);
                // create new graphic based on original dragging graphic
                newGraphic = draggingGraphic.clone();
                newGraphic.geometry = tempGraphic.geometry.clone();
                geombuffer = newGraphic.geometry
                // add replacement graphic
                view.graphics.add(newGraphic);
                var buffer = geometryEngine.geodesicBuffer(newGraphic.geometry, 2000, "feet");
                var graphicbuffer = new Graphic({
                    geometry: buffer,
                    symbol: fillSymbol
                });
                layerbuffer.graphics.add(graphicbuffer);
                var queryTask = new QueryTask({
                    url: nitratequeryurl
                });
                //Query to return California geometry
                var query = new Query();
                //Set the query
                query.geometry = buffer;  // the point location of the pointer
                query.outFields = ["OBJECTID "];
                //return geometry
                query.returnGeometry = true;
                //Intersects
                query.spatialRelationship = "intersects";
                //Execute the query
                queryTask.executeForCount(query).then(function (response) {
                    popup.open({
                        title: "Search Results",
                        location: newGraphic.geometry,
                        content: "<br><center>Number of nitrate-impacted wells within 2000 feet of:<br><br><center>" + "<center>" + newGraphic.geometry.latitude.toFixed(3).toString() + "N &nbsp" + "," + Math.abs(newGraphic.geometry.longitude).toFixed(3).toString() + "W</center></center><br><center><b>" + response + " Wells</b><br><center><br><i>Drag marker to update location</i></center>"
                    });
                    view.goTo({
                        target: newGraphic,
                        zoom: 16
                    });
                });
                // reset vars
                draggingGraphic = null;
                tempGraphic = null;
            }
        }
    });

    //Basemap List goes here..
    $("#basemapList a").click(function (e) {
        var target = event.target ? event.target : event.srcElement;
        switch ($(this).text()) {
            case "Map":
                map.basemap = "streets";
                break;
            case "Topography":
                map.basemap = "topo";
                break;
            case "Photo":
                map.basemap = "hybrid";
                break;
            case "Relief":
                map.basemap = "streets-relief-vector";
                break;
        }
    });

    //This clears Locator input
    $("#clear").click(function () {
        view.graphics.removeAll();
        layerbuffer.removeAll();
        searchWidget.clear();
        $("#address").val("");
        popup.close();
    });

    //Toggle layers
    $("#toggleimpactedwells").change(function () {
        if ($(this).prop("checked")) {
            nitrate.findSublayerById(0).visible = true;
        } else {
            nitrate.findSublayerById(0).visible = false;
        }
    });
    $("#togglesampledwells").change(function () {
        if ($(this).prop("checked")) {
            nitrate.findSublayerById(1).visible = true;
        } else {
            nitrate.findSublayerById(1).visible = false;
        }
    });

    view.on("pointer-move", function (evt) {
        var screenPoint = {
            x: evt.x,
            y: evt.y
        };

        // the hitTest() checks to see if any graphics in the view
        // intersect the given screen x, y coordinates
        view.hitTest(screenPoint)
          .then(function (response) {
              if (response.results[0].graphic.geometry.type === 'point') {
                  $('#viewDiv').css('cursor', 'grab');
              } else if (open) {
                  $('#viewDiv').css('cursor', 'pointer');
              }
              else {
                  $('#viewDiv').css('cursor', 'default');
              }
          });
    });

    $(window).resize(function () {
        //Iphone 6, 6s, 7, 8
        if ($(window).width() < 1125) {
            console.log("Iphone 6");
            $(".card").css("width", "100%");
            $(".card").css("bottom", "0");
            $(".card").css("right", "0");
            $(".card").css("z-index", "1");

        }
        else {
            console.log("Big smart device");
            $(".card").css("width", "240px");
            $(".card").css("bottom", "30px");
            $(".card").css("right", "15px");
            $(".card").css("z-index", "3");
        }
    });

    $("#togglelegend").click(function () {
        $(".card").toggle();
    });
    $("#closelegend").click(function () {
        $(".card").hide();
    });
});
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[Anonymous User]

That was it. Thank you Robert!