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