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();
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:
source property with a collection of Graphic, in the example I use an array of Object (it auto cast to the expected),geometryType, in this case point,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.
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: "\ue61d",
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>