I'm working with Arcgis API for javascript. I'd like the map to zoom to the csvlayer I added. However, I can't seem to find the map extent, as layer.extent is undefined. What would be the appopriate way to achieve this? Is there a property of the layer for the extent? I inspected the layer object in IE Developer tool but can't anything useful.
Solved! Go to Solution.
You can use the graphicsUtils graphicsExtent method which takes an array of graphics and returns an extent you can use to set the map's extent. Here's an example.
<!DOCTYPE html>
<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>Simple Map</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #FFF;
overflow: hidden;
font-family: "Trebuchet MS";
}
</style>
<script src="http://js.arcgis.com/3.10/"></script>
<script>
var map, csv;
require([
"esri/map",
"esri/layers/CSVLayer",
"esri/Color",
"esri/symbols/SimpleMarkerSymbol",
"esri/renderers/SimpleRenderer",
"esri/InfoTemplate",
"esri/urlUtils",
"esri/graphicsUtils",
"dojo/domReady!"
], function(
Map, CSVLayer, Color, SimpleMarkerSymbol, SimpleRenderer, InfoTemplate, urlUtils, graphicsUtils
) {
map = new Map("map", {
basemap: "gray",
center: [ -60, -10 ],
zoom: 4
});
csv = new CSVLayer("2.5_week.csv", {
copyright: "USGS.gov"
});
var orangeRed = new Color([238, 69, 0, 0.5]); // hex is #ff4500
var marker = new SimpleMarkerSymbol("solid", 15, null, orangeRed);
var renderer = new SimpleRenderer(marker);
csv.setRenderer(renderer);
var template = new InfoTemplate("${type}", "${place}");
csv.setInfoTemplate(template);
csv.on("update-end", function(){
var graphics = graphicsUtils.graphicsExtent(csv.graphics);
map.setExtent(graphics);
});
map.addLayer(csv);
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
You can use the graphicsUtils graphicsExtent method which takes an array of graphics and returns an extent you can use to set the map's extent. Here's an example.
<!DOCTYPE html>
<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>Simple Map</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #FFF;
overflow: hidden;
font-family: "Trebuchet MS";
}
</style>
<script src="http://js.arcgis.com/3.10/"></script>
<script>
var map, csv;
require([
"esri/map",
"esri/layers/CSVLayer",
"esri/Color",
"esri/symbols/SimpleMarkerSymbol",
"esri/renderers/SimpleRenderer",
"esri/InfoTemplate",
"esri/urlUtils",
"esri/graphicsUtils",
"dojo/domReady!"
], function(
Map, CSVLayer, Color, SimpleMarkerSymbol, SimpleRenderer, InfoTemplate, urlUtils, graphicsUtils
) {
map = new Map("map", {
basemap: "gray",
center: [ -60, -10 ],
zoom: 4
});
csv = new CSVLayer("2.5_week.csv", {
copyright: "USGS.gov"
});
var orangeRed = new Color([238, 69, 0, 0.5]); // hex is #ff4500
var marker = new SimpleMarkerSymbol("solid", 15, null, orangeRed);
var renderer = new SimpleRenderer(marker);
csv.setRenderer(renderer);
var template = new InfoTemplate("${type}", "${place}");
csv.setInfoTemplate(template);
csv.on("update-end", function(){
var graphics = graphicsUtils.graphicsExtent(csv.graphics);
map.setExtent(graphics);
});
map.addLayer(csv);
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Kelly, your code worked perfect. I tried csv.initialExtent which did not give the correct extent. Looks I will need to look into graphicsUtils for more goodies. Thanks!