I want to set my map's extent to the extent of a feature layer. This layer will be updated regularly and the extent will be different every time. I'm following this example, and substituted my layer. It's not showing up, and the extent is far to the north of my feature. I'm getting this error in the console: Map: Geometry (wkid: 3395) cannot be converted to spatial reference of the map (wkid: 102100). I've tried setting the spatial reference of the map and the layer, to no avail.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Resource Loader Test</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.23/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.23/esri/css/esri.css">
<script src="http://js.arcgis.com/3.23/"></script>
<script>
require([
"esri/map",
"esri/layers/FeatureLayer",
"esri/geometry/Extent",
"esri/SpatialReference",
"dojo/on",
"dojo/domReady!"
],
function (Map, FeatureLayer, Extent, SpatialReference, on) {
var typhoonOutlineURL = "http://<ourserver>/arcgis/rest/services/typhoon_outlines/MapServer/0";
var myLyr = new FeatureLayer(typhoonOutlineURL, {
mode: FeatureLayer.MODE_ONDEMAND,
});
myLyr.on('load', initMap);
function initMap() {
var mapMain = new Map("mapDiv", {
basemap: "dark-gray",
extent: myLyr.fullExtent,
zoom: 3
});
mapMain.addLayer(myLyr);
}
});
</script>
</head>
<body class="claro">
<div id="mapDiv" style="width:900px; height:600px;"></div>
<div id="mapInfo"></div>
</body>
</html>
Solved! Go to Solution.
Levi,
Here is the Sample again using a different map service layer and it still works for me:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Resource Loader Test</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.23/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.23/esri/css/esri.css">
<script src="http://js.arcgis.com/3.23/"></script>
<script>
require([
"esri/map",
"esri/layers/FeatureLayer",
"esri/geometry/Extent",
"esri/SpatialReference",
"esri/tasks/query",
"dojo/on",
"dojo/domReady!"
],
function(Map, FeatureLayer, Extent, SpatialReference, Query, on) {
var typhoonOutlineURL = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/MtBaldy_BaseMap/MapServer/0";
var myLyr = new FeatureLayer(typhoonOutlineURL, {
mode: FeatureLayer.MODE_ONDEMAND
});
myLyr.on('load', initMap);
function initMap() {
var query = new Query();
query.where = "1=1";
query.outSpatialReference = new SpatialReference(102100);
myLyr.queryExtent(query, function(result){
var mapMain = new Map("mapDiv", {
basemap: "dark-gray",
extent: result.extent
});
mapMain.addLayer(myLyr);
})
}
});
</script>
</head>
<body class="claro">
<div id="mapDiv" style="width:100%; height:100%;"></div>
<div id="mapInfo"></div>
</body>
</html>
Levi,
The maps extent will only take a WGS84 or WebMercator extent if you are using an esri basemap (thus the warning). You can use queryExtent to get the layers extent in 102100 though:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Resource Loader Test</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.23/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.23/esri/css/esri.css">
<script src="http://js.arcgis.com/3.23/"></script>
<script>
require([
"esri/map",
"esri/layers/FeatureLayer",
"esri/geometry/Extent",
"esri/SpatialReference",
"esri/tasks/query",
"dojo/on",
"dojo/domReady!"
],
function(Map, FeatureLayer, Extent, SpatialReference, Query, on) {
var typhoonOutlineURL = "http://sampleserver6.arcgisonline.com/ArcGIS/rest/services/Water_Network/MapServer/20";
var myLyr = new FeatureLayer(typhoonOutlineURL, {
mode: FeatureLayer.MODE_ONDEMAND,
minScale: 0
});
myLyr.on('load', initMap);
function initMap() {
var query = new Query();
query.where = "1=1";
query.outSpatialReference = new SpatialReference(102100);
myLyr.queryExtent(query, function(result){
var mapMain = new Map("mapDiv", {
basemap: "dark-gray",
extent: result.extent
});
mapMain.addLayer(myLyr);
})
}
});
</script>
</head>
<body class="claro">
<div id="mapDiv" style="width:900px; height:600px;"></div>
<div id="mapInfo"></div>
</body>
</html>
OK, this works, but the layer is still not visible. I can also just change the projection to web mercator before I publish, no?
Levi,
No that layer had a min scale so I have updated the code to override the minScale.
I did the same with my layer and still can't see it.
Strange. What is the layer minScale and maxScale in the Rest directory?
It was set before publishing to show at all scale levels, so there isn't a min or max scale. There is just an extent
Extent:
Then that is not the issue... Hmm
What u cannot see? i see this:
Levi,
Here is the Sample again using a different map service layer and it still works for me:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Resource Loader Test</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.23/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.23/esri/css/esri.css">
<script src="http://js.arcgis.com/3.23/"></script>
<script>
require([
"esri/map",
"esri/layers/FeatureLayer",
"esri/geometry/Extent",
"esri/SpatialReference",
"esri/tasks/query",
"dojo/on",
"dojo/domReady!"
],
function(Map, FeatureLayer, Extent, SpatialReference, Query, on) {
var typhoonOutlineURL = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/MtBaldy_BaseMap/MapServer/0";
var myLyr = new FeatureLayer(typhoonOutlineURL, {
mode: FeatureLayer.MODE_ONDEMAND
});
myLyr.on('load', initMap);
function initMap() {
var query = new Query();
query.where = "1=1";
query.outSpatialReference = new SpatialReference(102100);
myLyr.queryExtent(query, function(result){
var mapMain = new Map("mapDiv", {
basemap: "dark-gray",
extent: result.extent
});
mapMain.addLayer(myLyr);
})
}
});
</script>
</head>
<body class="claro">
<div id="mapDiv" style="width:100%; height:100%;"></div>
<div id="mapInfo"></div>
</body>
</html>