nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Duplicate maps

JaysonLindahl

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>

Vind meer berichten getagd met

Accepted answers

Sage_Wall

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

All comments

JaysonLindahl

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

Sage_Wall

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

Sage_Wall

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/

Jeff.Thompson@arlingtontx.gov_arlingtontx

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.

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.