async initializeMap() {
const DEFAULT_LOADER_URL = `${DEFAULT_WORKER_URL}dojo/dojo-lite.js`;
esriConfig.workers.loaderUrl = DEFAULT_LOADER_URL;
esriConfig.workers.loaderConfig = {
baseUrl: `${DEFAULT_WORKER_URL}dojo`,
packages: [
{ name: "esri", location: `${DEFAULT_WORKER_URL}esri` },
{ name: "dojo", location: `${DEFAULT_WORKER_URL}dojo` },
{ name: "dojox", location: `${DEFAULT_WORKER_URL}dojox` },
{ name: "dstore", location: `${DEFAULT_WORKER_URL}dstore` },
{ name: "moment", location: `${DEFAULT_WORKER_URL}moment` },
{ name: "@dojo", location: `${DEFAULT_WORKER_URL}@dojo` },
{
name: "cldrjs",
location: `${DEFAULT_WORKER_URL}cldrjs`,
main: "dist/cldr"
},
{
name: "globalize",
location: `${DEFAULT_WORKER_URL}globalize`,
main: "dist/globalize"
},
{
name: "maquette",
location: `${DEFAULT_WORKER_URL}maquette`,
main: "dist/maquette.umd"
},
{
name: "maquette-css-transitions",
location: `${DEFAULT_WORKER_URL}maquette-css-transitions`,
main: "dist/maquette-css-transitions.umd"
},
{
name: "maquette-jsx",
location: `${DEFAULT_WORKER_URL}maquette-jsx`,
main: "dist/maquette-jsx.umd"
},
{ name: "tslib", location: `${DEFAULT_WORKER_URL}tslib`, main: "tslib" }
]
};
// Configure the Map
const mapProperties = {
basemap: this._basemap
};
const map = new Map(mapProperties);
const citiesRenderer = {
type: "simple", // autocasts as new SimpleRenderer()
symbol: {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
size: 5,
color: [0, 244, 255, 1]
}
};
const featureReduction: any = {
type: "cluster",
clusterRadius: "100px",
popupTemplate: {
// cluster_count is an aggregate field indicating the number
// of features summarized by the cluster
content: "This cluster represents {cluster_count} earthquakes."
},
// You should adjust the clusterMinSize to properly fit labels
clusterMinSize: "24px",
clusterMaxSize: "60px",
labelingInfo: [{
// turn off deconfliction to ensure all clusters are labeled
deconflictionStrategy: "none",
labelExpressionInfo: {
expression: "check: Text($feature.cluster_count, '#,###')"
},
symbol: {
type: "text",
color: "#004a5d",
font: {
weight: "bold",
family: "Noto Sans",
size: "12px"
}
},
labelPlacement: "center-center",
}]
}
const citiesLayer = new FeatureLayer({
renderer: citiesRenderer as any,
definitionExpression: "adm = 'United States of America'",
featureReduction: featureReduction
});
map.add(citiesLayer);
// Initialize the MapView
const mapViewProperties = {
container: this.mapViewEl.nativeElement,
center: this._center,
zoom: this._zoom,
map: map
};
this._view = new MapView(mapViewProperties);
// wait for the map to load
await this._view.when();
return this._view;
}
After these changes, the sample works fine in development (ng serve --open). Webgl errors show up after building (ng build --prod) and then opening the sample in Chrome/Edge browser after hosting the app in IIS.
Thanks
