ionic popup going outside map

GauravArora · ‎08-24-2020

Hi Team,

I am using Esri Map an Ionic Mobile app

In case of Angular Web App popup works fine, opens at the place clicked on Map. But in case of Ionic App, it opens popup outside the map.

Please help to figure out the issue with popup position in Ionic App.

Code:

tab1.page.html

<ion-content padding>

</ion-content>

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';

import { Platform } from '@ionic/angular';

import { loadModules } from 'esri-loader';

@Component({
selector: 'app-tab1',
templateUrl: 'tab1.page.html',
styleUrls: ['tab1.page.scss']
})
export class Tab1Page implements OnInit{

@ViewChild('map') mapEl: ElementRef;
projects: any;
map: any;
mapView:any;

constructor( public platform: Platform) {
this.projects = [{ "projectId": "Project 0", "projectName": "Project 0", "categoryName": "Project", "status": "Assigned", "latitude": 24.093884800, "longitude": 54.076542200 },
{ "projectId": "Project 1", "projectName": "Project 1", "categoryName": "Project", "status": "Assigned", "latitude": 24.093884800, "longitude": 54.076542200 },
{ "projectId": "Project 2", "projectName": "Project 2", "categoryName": "Project Cat", "status": "Assigned", "latitude": 24.093884800, "longitude": 54.076542200 },
{ "projectId": "Project 3", "projectName": "Consultancy", "categoryName": "Project Cons", "status": "Assigned", "latitude": 24.093884800, "longitude": 54.076542200 },
{ "projectId": "Project 4", "projectName": "Consultancy", "categoryName": "Project", "status": "Assigned", "latitude": 24.093884800, "longitude": 54.076542200 },
{ "projectId": "Project 5", "projectName": "Consultancy", "categoryName": "Project", "status": "Assigned", "latitude": 24.093884800, "longitude": 54.076542200 }];
}

async getGeo() {

// Reference: https://ionicframework.com/docs/api/platform/Platform/#ready
await this.platform.ready();

// Load the ArcGIS API for JavaScript modules
const [Map, MapView]:any = await loadModules([
'esri/Map',
'esri/views/MapView'
])
.catch(err => {
console.error('ArcGIS: ', err);
});

console.log('Starting up ArcGIS map');

this.map = new Map({
basemap: 'streets'
});

// Inflate and display the map
this.mapView = new MapView({
// create the map view at the DOM element in this component
container: this.mapEl.nativeElement,
center: [54.076542200, 24.093884800], // "latitude": 24.093884800, "longitude": 54.076542200
zoom: 12,
map: this.map
});

// Popup Approach #1
// this.mapView.popup.autoOpenEnabled = false;
// this.mapView.on("click", (event) => {
// this.mapView.popup.open({
// // Set the popup
// location: event.mapPoint, // location of the click on the view
// title: "You clicked here", // title displayed in the popup
// content: "This is a point of interest" // content displayed in the popup
// });
// });

// Popup Approach #2
/////////////////////////////////
this.mapView.on("click", (event) => {
console.log('clicked');
event.stopPropagation();

// Get the coordinates of the click on the view
var lat = Math.round(event.mapPoint.latitude * 1000) / 1000;
var lon = Math.round(event.mapPoint.longitude * 1000) / 1000;

this.mapView.popup.open({
// Set the popup's title to the coordinates of the location
title: "Reverse geocode: [" + lon + ", " + lat + "]",
location: event.mapPoint
});

console.log(this.mapView.popup.title);
this.mapView.popup.content = "This is the content";
this.mapView.popup.title = "This is the title";
console.log(this.mapView.popup.title);
});
//////////////////////////////////

this.projects.forEach( (item) => {
// playStore.push(item)
this.mapView.graphics.add({
symbol: {
type: "simple-marker",
color: "#"+ Math.floor(Math.random() * 16777215).toString(16)
},
geometry: {
type: "point",
longitude: item.longitude, // 73.0188,
latitude: item.latitude // 26.2979
}
});
});

}

ngOnInit() {
// this.getGeo();
}
}