ionic popup going outside map

GauravArora — Mon, 24 Aug 2020 17:11:20 GMT

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> <div id="map" #map style="border: solid red; width: 50%; height: 60%;" ></div> </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(); } }

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();
}
}

topic ionic popup going outside map in ArcGIS JavaScript Maps SDK Questions

ionic popup going outside map