Get map details when click on street or building

[omar_nobani]

I'm trying to view a map using angular 6, and the client wants to get the clicked area details (street, building (if the user click on a building, city, country)).

current code:

 const [esriConfig, EsriMap, EsriMapView, Search, Locate, BasemapToggle, Graphic, MapImageLayer] = await loadModules([
        "esri/config",
        'esri/Map',
        'esri/views/MapView',
        "esri/widgets/Search",
        "esri/widgets/Locate",
        "esri/widgets/BasemapToggle",
        'esri/Graphic',
        'esri/layers/MapImageLayer',
        "dojo/domReady!"
      ], { url: environment.esriConfig.url, css: environment.esriConfig.css, dojoConfig: environment.esriConfig.dojoConfig });

      this.coordinates = !this.coordinates ? new CoordinatesVM() : this.coordinates;
      //esriConfig.defaults.io.alwaysUseProxy = false;
      esriConfig.request.corsEnabledServers.push(environment.esriConfig.url);

      //esriConfig.defaults.io.corsEnabledServers.push(environment.esriConfig.url);

      const layer = new MapImageLayer({
        url: environment.esriConfig.mapServer
      });

      const customBasemap = {
        id: 'localBasemap',
        title: 'localBasemap',
        layers: [{
          url: environment.esriConfig.mapServer
        }]
      };

      // Set type of map
      const mapProperties: esri.MapProperties = {
        basemap: customBasemap,
        layers: [layer],
      };
      const map: esri.Map = new EsriMap(mapProperties);

      // Set type of map view
      const mapViewProperties: esri.MapViewProperties = {
        container: this.mapViewEl.nativeElement,
        center: [this.coordinates.lng, this.coordinates.lat],
        map: map,
        zoom: 8,
        scale: 2311162.217155
      };


      const mapView: esri.MapView = new EsriMapView(mapViewProperties);

      // All resources in the MapView and the map have loaded.
      // Now execute additional processes
      mapView.when(() => {
        this.mapLoaded.emit(true);

        setTimeout(() => {
          //mapView.focus();

          let lng = this.coordinates.lng || 54.4204471;
          let lat = this.coordinates.lat || 24.4413261;


          var markerSymbol = {
            type: "simple-marker",  // autocasts as new SimpleMarkerSymbol()
            color: [226, 119, 40]
          };

          var point = {
            type: "point",  // autocasts as new Point()
            longitude: lng,
            latitude: lat
          };

          // Create a graphic and add the geometry and symbol to it
          var pointGraphic = new Graphic({
            geometry: point,
            symbol: markerSymbol
          });

          mapView.graphics.add(pointGraphic);

          mapView.goTo({
            center: [lng, lat],
            zoom: 9,
            scale: 1155581.108577
          });
        }, 1000);


      }, (err) => { console.log(err) });

      var point = {
        type: "point",  // autocasts as new Point()
        longitude: this.coordinates.lng,
        latitude: this.coordinates.lat
      };

      // Create a symbol for drawing the point
      var markerSymbol = {
        type: "simple-marker",  // autocasts as new SimpleMarkerSymbol()
        color: [226, 119, 40]
      };

      // Create a graphic and add the geometry and symbol to it
      var pointGraphic = new Graphic({
        geometry: point,
        symbol: markerSymbol
      });

      //mapView.graphics.add(pointGraphic);

      var searchWidget = new Search({
        view: mapView,
        popupEnabled: false
      });

      // Add the search widget to the top right corner of the view
      mapView.ui.add(searchWidget, {
        position: "top-right",
        index: 2
      });

      var locateBtn = new Locate({
        view: mapView,
        popupEnabled: false
      });

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

      // typical usage
      var basemapToggle = new BasemapToggle({
        view: mapView,
        nextBasemap: "satellite"
      });

      mapView.ui.add(basemapToggle, {
        position: "bottom-left",
        index: 2
      });

      mapView.popup.autoOpenEnabled = false;

      let me = this;
      // Listen to the click event on the map view.
      mapView.on("click", function (event) {

        if (!me.isView) {
          mapView.graphics.removeAll();
          var point = {
            type: "point",  // autocasts as new Point()
            longitude: event.mapPoint.longitude,
            latitude: event.mapPoint.latitude
          };

          // Create a symbol for drawing the point
          var markerSymbol = {
            type: "simple-marker",  // autocasts as new SimpleMarkerSymbol()
            color: [226, 119, 40]
          };

          // Create a graphic and add the geometry and symbol to it
          var pointGraphic = new Graphic({
            geometry: point,
            symbol: markerSymbol
          });

          mapView.graphics.add(pointGraphic);

          me.coordinates = {
            id: me.coordinates.id,
            lat: parseFloat(event.mapPoint.latitude.toPrecision(9)),
            lng: parseFloat(event.mapPoint.longitude.toPrecision(9))
          };
          me.newLocation.emit(me.coordinates);
        }
      });