Duplicate maps

JaysonLindahl · ‎09-24-2025

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>

Sage_Wall · ‎09-24-2025

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

View solution in original post

JeffreyThompson2 · ‎09-24-2025

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.

GIS Developer
City of Arlington, Texas

Sage_Wall · ‎09-24-2025

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/

Sage_Wall · ‎09-24-2025

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

JaysonLindahl · ‎09-24-2025

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