Feed location data to the Esri Map and display locations on Esri Map as pinpoints

Question

I want to pass some location data(latitude, longitude, etc..) of some states in the US to the ArcGIS Esri map, and display those locations in the Esri map as pinpoints (like Google maps). Currently, my Angular code is as below and I couldn't find any ArcGIS documentation on feeding data to the Esri Map.

Please let me know if you have any thoughts on how to achieve this.

esri-map-component.html

<!-- Map Div -->
<div #mapViewNode></div>

esri-map-component.ts

// The <div> where the map is loaded
 public featureLayerUrl = environment.parcelAtlasUrl;
 public webMapId = environment.webMapId;
 @ViewChild('mapViewNode', { static: true }) private mapViewEl: ElementRef;

ngOnInit(): void {
 this.getEsriToken();
}

getEsriToken(){
 this.esriMapService.getEsriAccessToken().subscribe(
  res => {
    this.esriToken = res.token;
    if(res.token){
      this.initializeMap(this.esriToken);
    }
  },
  error =>{
  },

  () => {
  }
 );
}

// Initialize MapView and return an instance of MapView
initializeMap(esriToken) {
const container = this.mapViewEl.nativeElement;
config.apiKey = esriToken;

//load the webMap
const webmap = new WebMap({
      portalItem: {
        id: this.webMapId
      }
    });

//load the ParcelAtlas feature layer
const layer = new FeatureLayer({
    url: this.featureLayerUrl,
    });
  webmap.add(layer);


const view = new MapView({
  container,
  map: webmap
});
this.view = view;
return this.view.when();

Answer 1

You have many ways to add your data to your map. You could use a FeatureLayer or a GraphicLayer , you could even add it to the view graphics collection.

I will propose you to use FeatureLayer in this example I made for you. Although it is not using Angular, you can easily translate to your code. To use FeatureLayer with data on the client you need to:

set the source property with a collection of Graphic , in the example I use an array of Object (it auto cast to the expected),
set the geometryType , in this case point ,
and the objectIDField .

I assume that you have the data at the start, if you need to add/update/delete data while running the application, you can use the method applyEdits of the FeatureLayer .

ArcGIS JS API - FeatureLayer

Example:

 <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>Pinpoint Example</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/css/main.css"> <script src="https://js.arcgis.com/4.21/"></script> <script> require([ "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", "esri/popup/content/CustomContent" ], function (Map, MapView, FeatureLayer, CustomContent) { const data = [ { lat: 32.727482, lon: -117.1560632, name: "Automotive Museum", addrs: "2080 Pan American Plaza, San Diego, CA 92101, United States", url: "http://sdautomuseum.org/" }, { lat: 32.7136902, lon: -117.1763293, name: "USS Midway Museum", addrs: "910 N Harbor Dr, San Diego, CA 92101, United States", url: "http://www.midway.org/" }, { lat: 32.7641112, lon: -117.2284536, name: "SeaWorld", addrs: "500 Sea World Dr, San Diego, CA 92109, United States", url: "https://seaworld.com/san-diego" }, { lat: 32.7360032, lon: -117.1557741, name: "Zoo", addrs: "2920 Zoo Dr, San Diego, CA 92101, United States", url: "https://zoo.sandiegozoo.org/" } ]; const map = new Map({ basemap: "streets-navigation-vector" }); const view = new MapView({ container: "viewDiv", map: map, zoom: 12, center: { latitude: 32.7353, longitude: -117.1490 } }); const layer = new FeatureLayer({ source: data.map((d, i) => ( { geometry: { type: "point", longitude: d.lon, latitude: d.lat }, attributes: { ObjectID: i, ...d } } )), fields: [ { name: "ObjectID", alias: "ObjectID", type: "oid" }, { name: "name", alias: "Name", type: "string" }, { name: "addrs", alias: "addrs", type: "string" }, { name: "url", alias: "url", type: "string" }, { name: "lat", alias: "Latitude", type: "double" }, { name: "lon", alias: "Longitude", type: "double" }, ], objectIDField: ["ObjectID"], geometryType: "point", renderer: { type: "simple", symbol: { type: "text", color: "red", text: "\", font: { size: 30, family: "CalciteWebCoreIcons" } } }, popupTemplate: { title: "{name}", content: [ { type: "fields", fieldInfos: [ { fieldName: "addrs", label: "Address" }, { fieldName: "lat", label: "Latitude", format: { places: 2 } }, { fieldName: "lon", label: "Longitude", format: { places: 2 } } ] }, new CustomContent({ outFields: ["*"], creator: (event) => { const a = document.createElement("a"); a.href = event.graphic.attributes.url; a.target = "_blank"; a.innerText = event.graphic.attributes.url; return a; } }) ], outFields: ["*"] } }); map.add(layer); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>

Feed location data to the Esri Map and display locations on Esri Map as pinpoints

Question

1 answers

solution1
0 2021-11-23 22:54:46

Feed location data to the Esri Map and display locations on Esri Map as pinpoints

Question

1 answers

solution1 0 2021-11-23 22:54:46

solution1
0 2021-11-23 22:54:46