Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
intializeWebMap() {
// get the id of the webmap from the component
const { itemId } = this.get();
// set the session from the global store
const { session } = this.store.get();
// load the CSS dynamically with Esri Loader
loadCss("https://js.arcgis.com/4.10/esri/css/main.css");
// load JS API modules with Esri Loader
loadModules([
"esri/views/MapView",
"esri/WebMap",
"esri/identity/IdentityManager"
])
.then(([MapView, WebMap, esriId]) => {
// since our webmap might be private we can pass teh credentials
// from the ArcGIS REST JS session to the JS API Identity Manager
// the JS API will then use these credentials for future requests
esriId.registerToken(session.toCredential());
// then we load a web map from an id
var webmap = new WebMap({
portalItem: {
async initMap() {
loadCss();
const { defaultExtent } = this.props;
try {
const container = this.mapDivRef.current;
type Modules = [
typeof IMapView,
typeof IMap,
typeof IVectorTileLayer
];
const [MapView, Map, VectorTileLayer] = await (loadModules([
'esri/views/MapView',
'esri/Map',
'esri/layers/VectorTileLayer',
loadCss (...args) {
return esriLoader.loadCss(...args);
}
});
async componentDidMount() {
loadCss('https://js.arcgis.com/4.9/esri/css/main.css');
const mapRequires = [
'esri/Map',
'esri/views/MapView',
'esri/layers/FeatureLayer',
'esri/geometry/Polygon'
];
const selectorRequires = [
'esri/layers/support/LOD',
'esri/layers/support/TileInfo',
'esri/layers/WebTileLayer',
'esri/Basemap'
];
const [Map, MapView, FeatureLayer, Polygon, LOD, TileInfo, WebTileLayer, Basemap] = await loadModules(mapRequires.concat(selectorRequires));
this.map = new Map();