topic Re: Duplicate maps in ArcGIS JavaScript Maps SDK Questions

Duplicate maps

JaysonLindahl — Wed, 24 Sep 2025 15:47:13 GMT

I am very new to JavaScript SDK. I can't figure out why I have 2 maps in my view.

Here is my code:

<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>ArcGIS Maps SDK for JavaScript Tutorials: Display a map using arcgis/map-components</title>

<style>
html,
body {
height: 100%;
margin: 0;
}
#searchDiv {
position: absolute;
top: 10px;
left: 60px;
z-index: 99;
}
</style>

<script type="module" src="https://js.arcgis.com/calcite-components/3.2.1/calcite.esm.js"></script>


<link rel="stylesheet" href="https://js.arcgis.com/4.33/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.33/"></script>


<script type="module" src="https://js.arcgis.com/4.33/map-components/"></script>
</head>

<body>
<div id="searchDiv"></div>
<arcgis-map id="arcgisMap" item-id="8914d03ca2d745bea3beec1155d0614b">
<arcgis-zoom position="top-left"></arcgis-zoom>
</arcgis-map>

<script>
require([
"esri/views/MapView",
"esri/WebMap",
"esri/widgets/Search",
"esri/layers/FeatureLayer",
"esri/rest/support/Query"
], function (MapView, WebMap, Search, FeatureLayer, Query) {

const webmap = new WebMap({
portalItem: { id: "8914d03ca2d745bea3beec1155d0614b" }
});

const view = new MapView({
container: "arcgisMap",
map: webmap
});

// Add Search widget
const searchWidget = new Search({
view: view,
container: "searchDiv"
});

// Once the map loads, get the first operational layer
view.when(async () => {
await view.whenLayerView(webmap.layers.getItemAt(0));

const firstLayer = webmap.layers.getItemAt(0);

searchWidget.on("select-result", (event) => {
const resultGeom = event.result.feature.geometry;

const query = new Query({
geometry: resultGeom,
spatialRelationship: "intersects",
outFields: ["*"],
returnGeometry: true
});

firstLayer.queryFeatures(query).then((result) => {
if (result.features.length > 0) {
const feature = result.features[0];
const attrs = feature.attributes;

// Custom popup formatting
const popupContent = `
<b>Precinct:</b> ${attrs.PCT_NO}<br>
<b>Commissioner:</b> ${attrs.COMMISSION}<br>
<b>Website:</b> <a href="${attrs.URL}" target="_blank">View Site</a>
`;

view.popup.open({
title: "Commissioner Precinct",
content: popupContent,
location: resultGeom
});
} else {
view.popup.open({
title: "No features found",
location: resultGeom
});
}
});
});
});
});
</script>
</body>
</html>

Re: Duplicate maps

JeffreyThompson2 — Wed, 24 Sep 2025 16:04:16 GMT

There are now two ways to make a map in the Javascript API. The old way looks something like this:

const webmap = new WebMap({ portalItem: { id: "8914d03ca2d745bea3beec1155d0614b" } }); const view = new MapView({ container: "arcgisMap", map: webmap });

And the new way looks like this:

<arcgis-map id="arcgisMap" item-id="8914d03ca2d745bea3beec1155d0614b">

You did both. So you made two maps. Do one or the other and you should be fine. ESRI prefers you use the new style, so try to go that way.

Re: Duplicate maps

Sage_Wall — Wed, 24 Sep 2025 16:10:21 GMT

Hi @JaysonLindahl ,

You are mixing the old MapView and widgets API with the newer web components API. Your seeing two maps because you have an `<arcgis-map>` component displaying a web map and then you are creating a new MapView and adding it to the `<arcgis-map>`. If you replace the `<arcgis-map>` with a `<div>` it should work, but you might consider taking a look at this tutorial for how to do this all in the new components API.

https://developers.arcgis.com/javascript/latest/tutorials/query-a-feature-layer-spatial/

Re: Duplicate maps

Sage_Wall — Wed, 24 Sep 2025 16:14:32 GMT

It looks like if you would also need to modify your css rules to give the div a height. Here's a codepen.

https://codepen.io/sagewall/pen/bNEVwKr?editors=1010

Re: Duplicate maps

JaysonLindahl — Wed, 24 Sep 2025 16:38:45 GMT

Thank you very much. I will look into those articles and work to understand the newer components.