Hi,
I would like to know the extent boundary values for any US state in order to set the zoom view to that state on map load.
I got below extent boundary values from argis desktop by loading PA's census block shape file.
"-80.5198510000000027,39.7197989999999947,-74.6895609999999976,42.5160720000000012"
When I set the defaultextent to these values the map zooms in to some ocean area which is incorrect.
Thanks
Chitra
Solved! Go to Solution.
Here's an example, using your coordinates
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>
Intro to MapView - Create a 2D map | Sample | ArcGIS API for JavaScript
4.20
</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.20/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.20/"></script>
<script>
require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {
const map = new Map({
basemap: "topo-vector"
});
const view = new MapView({
container: "viewDiv",
map: map,
extent: {
// autocasts as new Extent()
xmin: -80.5198510000000027,
ymin: 39.7197989999999947,
xmax: -74.6895609999999976,
ymax: 42.5160720000000012,
spatialReference: 4326
}
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
You could just submit query to something like Esri's generalized states layer.
Specifying something like the state abbreviation and asking for the extent only will return an object you could easily pass to a map. For example, here's a query for PA.
params
returns
{"extent" : { "xmin" : -8964118.3457209859, "ymin" : 4825237.1400024248, "xmax" : -8315572.9094515787, "ymax" : 5201108.2423584638, "spatialReference" : { "wkid" : 102100, "latestWkid" : 3857 } } }
Is that place in the ocean just of the coast of Africa? You have to account for the spatial reference, which is in meters, not decimal degrees.
Hi,
I am trying to zoom in to Pennsylvania state in USA. I have set the spatialreference to 102100.
are those extent values correct?
Thanks
Chitra
That's the WKID of the Web Mercator projection. For geographic coordinates (WGS84), use 4326
Here's an example, using your coordinates
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>
Intro to MapView - Create a 2D map | Sample | ArcGIS API for JavaScript
4.20
</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.20/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.20/"></script>
<script>
require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {
const map = new Map({
basemap: "topo-vector"
});
const view = new MapView({
container: "viewDiv",
map: map,
extent: {
// autocasts as new Extent()
xmin: -80.5198510000000027,
ymin: 39.7197989999999947,
xmax: -74.6895609999999976,
ymax: 42.5160720000000012,
spatialReference: 4326
}
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
Hi,
It works like a charm after changing the spatialReference to 4326. Thank you very much!!
Thanks
Chitra
You could just submit query to something like Esri's generalized states layer.
Specifying something like the state abbreviation and asking for the extent only will return an object you could easily pass to a map. For example, here's a query for PA.
params
returns
{"extent" : { "xmin" : -8964118.3457209859, "ymin" : 4825237.1400024248, "xmax" : -8315572.9094515787, "ymax" : 5201108.2423584638, "spatialReference" : { "wkid" : 102100, "latestWkid" : 3857 } } }
Thank you very much for that note. I got to know a new feature layer. It works like a charm!!!
Thanks
Chitra