Using the code below, if I set minScale = 500000 and maxScale = 200, the results look correct and effectiveLODs fall within the expected range. But when I change maxScale to 50, it flips and I get:
effectiveMinScale: 591,657,528
effectiveMaxScale: 288,895
I expected effectiveLODs to remain between 50â500,000. Is this expected, why does setting maxScale below the finest LOD cause the effective min/max/LODs to jump this way?
<!doctype html><html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Sample</title>
<style>
html,
body {
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<label>
Min scale
<input id="minScaleInput" type="number" value="0" />
</label>
<label>
Max scale
<input id="maxScaleInput" type="number" value="0" />
</label>
<div>effectiveMinScale: <span id="effectiveMinScale">-</span></div>
<div>effectiveMaxScale: <span id="effectiveMaxScale">-</span></div>
<div>effectiveLODs:
<pre id="effectiveLODs">-</pre>
</div>
<arcgis-map center="-82.441933, 35.611474" zoom="18" />
<script type="module">
const Map = await $arcgis.import(
);
const mapElement = document.querySelector("arcgis-map");
const minScaleInput = document.getElementById("minScaleInput");
const maxScaleInput = document.getElementById("maxScaleInput");
const effectiveMinScaleOutput = document.getElementById("effectiveMinScale");
const effectiveMaxScaleOutput = document.getElementById("effectiveMaxScale");
const effectiveLODsOutput = document.getElementById("effectiveLODs");
let view;
const toNumber = (value) => {
const parsed = Number(value);
return Number.isFinite(parsed) ? parsed : 0;
};
const formatScale = (value) => (value ? Math.round(value).toLocaleString() : "0");
const formatLods = (lods) =>
lods && lods.length
? lods.map((lod) => `${formatScale(lod.scale)}`).join(", ")
: "none";
const renderOutputs = () => {
if (!view) return;
const { effectiveMinScale, effectiveMaxScale, effectiveLODs } = view.constraints;
effectiveMinScaleOutput.textContent = formatScale(effectiveMinScale);
effectiveMaxScaleOutput.textContent = formatScale(effectiveMaxScale);
effectiveLODsOutput.textContent = formatLods(effectiveLODs);
};
const applyScaleInputs = () => {
if (!view) return;
view.constraints.minScale = toNumber(minScaleInput.value);
view.constraints.maxScale = toNumber(maxScaleInput.value);
renderOutputs();
};
minScaleInput.addEventListener("input", applyScaleInputs);
maxScaleInput.addEventListener("input", applyScaleInputs);
document.querySelector("arcgis-map").map = new Map({
basemap: "topo-vector",
});
mapElement.addEventListener("arcgisViewReadyChange", () => {
view = mapElement.view;
minScaleInput.value = String(view.constraints.minScale ?? 0);
maxScaleInput.value = String(view.constraints.maxScale ?? 0);
view.watch("constraints.effectiveMinScale", renderOutputs);
view.watch("constraints.effectiveMaxScale", renderOutputs);
view.watch("constraints.effectiveLODs", renderOutputs);
renderOutputs();
});
</script>
</body>
</html>
