SimpleMap-IonicArcGIS

Simple map to show how to integrate ArcGIS JS API with Ionic Framework 5.

Libs/Frameworks

• Node.js
• ArcGIS JS API(@arcgis/core)
• Ionic Framework 5

Installation

1. Install Ionic Framework, if you don't have it.

$ npm install -g @ionic/cli

$ cd myMap && ionic serve

Running

To run the app

$ ionic serve 

Code Snippets

1. Importing Map and MapView

import Map from '@arcgis/core/Map';
import MapView from '@arcgis/core/views/MapView';

2. Declaration main objects, map and mapview:

  const map = new Map({
      basemap: "topo-vector" //Reference to the base of the map
    });

    const view = new MapView({
      container: "container", // Reference to the view div 
      map: map, // Reference to the map object created before the view
      zoom: 4, // Sets zoom level based on level of detail (LOD)
      center: [this.longitude, this.latitude] // Sets center point of view using longitude,latitude
    });

3. Importing geolocation from capacitor:

import { Geolocation} from '@capacitor/core';

4. Getting geolocation

const position = await Geolocation.getCurrentPosition();
this.latitude = position.coords.latitude;
this.longitude = position.coords.longitude;

License

MIT