POST
|
Hi Team, I am using Esri Map an Ionic Mobile app Referred : esri-popup - StackBlitz 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(); } }
... View more
08-24-2020
10:11 AM
|
0
|
0
|
607
|
Online Status |
Offline
|
Date Last Visited |
11-11-2020
02:24 AM
|