Get extent of CsvLayer

3325
2
Jump to solution
10-02-2014 07:31 AM
LeiZhong
New Contributor

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.

0 Kudos
1 Solution

Accepted Solutions
KellyHutchins
Esri Frequent Contributor

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>

View solution in original post

2 Replies
KellyHutchins
Esri Frequent Contributor

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>

LeiZhong
New Contributor

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!

0 Kudos