Set Zoom To Full Extent On Exsisting Graphics On Map Instead of Base Map

BehrouzHosseini · ‎01-13-2017

Using ArcGIS JavaScript API 3.19, I am simply adding some Point Graphics From a JSON object (Schools) like below

var data = [{
 "SCHOOL_NAME": "King George Sec.",
 "LATITUDE": 49.2898,
 "LONGITUDE": -123.1364,
 "ADDRESS": "1755 Barclay St",
 "URLLINK": "http://www.vsb.bc.ca/schools/king-george"
 }, {
 "SCHOOL_NAME": "Britannia Sec.",
 "LATITUDE": 49.2752,
 "LONGITUDE": -123.0719,
 "ADDRESS": "1001 Cotton Drive",
 "URLLINK": "http://www.vsb.bc.ca/schools/britannia-secondary"
 }, {
 "SCHOOL_NAME": "Magee Sec.",
 "LATITUDE": 49.2286,
 "LONGITUDE": -123.1515,
 "ADDRESS": "6360 Maple St",
 "URLLINK": "http://www.vsb.bc.ca/schools/magee"
 },
....];‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

to the map. now I would like to add a functionality to Zoom to Full Extent of ONLY school points on the Map. Technically I add the `Navigation` class to the Map

require(["esri/toolbars/navigation"], function(Navigation) { /* code goes here */ });

and in HTML I have a simple button

<button id="show-all-schools">Show All Schools</button>

and in JS I have

$("#show-all-schools").on("click", function () {
            navToolbar = new Navigation(map);
            navToolbar.zoomToFullExtent();
          });

but this is setting the basemap in Full Extent state! Can you please let me know how to pass a parameter like points to zoom to cover entire points instead of basemap?

Thanks

RobertScheitlin__GISP · ‎01-18-2017

Bengi,

Here is a working sample of how to get a FeatureCollections extent:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.18/esri/css/esri.css">

    <style type="text/css">
        html,
        body,
        #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>

    <title> by Behseini</title>
    <script src="https://js.arcgis.com/3.18/"></script>

    <script type='text/javascript'>
        var map, featureLayer;
        require([
                "esri/map",
                "esri/layers/FeatureLayer",
                "esri/geometry/Point",
                "esri/geometry/webMercatorUtils",
                "esri/graphic",
                "esri/graphicsUtils",
                "dojo/on",
                "dojo/_base/array",
                "dojo/domReady!"
            ],
            function(
                Map,
                FeatureLayer,
                Point,
                webMercatorUtils,
                Graphic,
                graphicsUtils,
                on,
                array
            ) {

                map = new Map("map", {
                    basemap: "gray",
                    center: [-123.141608, 49.245291],
                    zoom: 10
                });

                var data = [{
                    "LATITUDE": 49.2898,
                    "LONGITUDE": -123.1364,
                    "SCHOOL_NAME": "King George Sec.",
                    "ADDRESS": "1755 Barclay St",
                    "URLLINK": "http://www.vsb.bc.ca/schools/king-george"
                }, {
                    "SCHOOL_NAME": "Britannia Sec.",
                    "LATITUDE": 49.2752,
                    "LONGITUDE": -123.0719,
                    "ADDRESS": "1001 Cotton Drive",
                    "URLLINK": "http://www.vsb.bc.ca/schools/britannia-secondary"
                }, {
                    "SCHOOL_NAME": "Magee Sec.",
                    "LATITUDE": 49.2286,
                    "LONGITUDE": -123.1515,
                    "ADDRESS": "6360 Maple St",
                    "URLLINK": "http://www.vsb.bc.ca/schools/magee"
                }];

                var featureCollection = {
                    "layerDefinition": null,
                    "featureSet": {
                        "features": [],
                        "geometryType": "esriGeometryPoint"
                    }
                };
                featureCollection.layerDefinition = {
                    "geometryType": "esriGeometryPoint",
                    "objectIdField": "ObjectID",
                    "drawingInfo": {
                        "renderer": {
                            "type": "simple",
                            "symbol": {
                                "type": "esriSMS",
                                "style": "esriSMSSquare",
                                "color": [76, 115, 0, 255],
                                "size": 8,
                                "angle": 0,
                                "xoffset": 0,
                                "yoffset": 0,
                                "outline": {
                                    "color": [152, 230, 0, 255],
                                    "width": 1
                                }
                            }
                        }
                    },
                    "fields": [{
                        "name": "ObjectID",
                        "alias": "ObjectID",
                        "type": "esriFieldTypeOID"
                    }, {
                        "name": "latitude",
                        "alias": "Latitude",
                        "type": "esriFieldTypeGeometry"
                    }, {
                        "name": "longitude",
                        "alias": "Longitude",
                        "type": "esriFieldTypeGeometry"
                    }, {
                        "name": "name",
                        "alias": "Name",
                        "type": "esriFieldTypeString"
                    }, {
                        "name": "address",
                        "alias": "Address",
                        "type": "esriFieldTypeString"
                    }, {
                        "name": "link",
                        "alias": "School Link",
                        "type": "esriFieldTypeString"
                    }]
                };

                featureLayer = new FeatureLayer(featureCollection, {
                    id: 'schoolsLayer'
                });

                map.on("layers-add-result", function(results) {
                    addData();
                });

                map.addLayers([featureLayer]);

                function addData() {
                    var features = [];
                    array.forEach(data, function(school, index) {
                        var attr = {};
                        attr["latitude"] = school.LATITUDE;
                        attr["longitude"] = school.LONGITUDE;
                        attr["name"] = school.SCHOOL_NAME;
                        attr["address"] = school.ADDRESS;
                        attr["link"] = school.URLLINK;

                        var geometry = new Point(school.LONGITUDE, school.LATITUDE);
                        var graphic = new Graphic(webMercatorUtils.geographicToWebMercator(geometry));
                        graphic.setAttributes(attr);
                        features.push(graphic);
                    });

                    featureLayer.applyEdits(features, null, null).then(function(evt) {
                      map.setExtent(graphicsUtils.graphicsExtent(featureLayer.graphics), true);
                    });
                }

            });
    </script>


</head>

<body>
    <div id="map"></div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

BehrouzHosseini · ‎01-18-2017

Thanks Robert,

but do we have to generate FeatureLayer to set the Zoom to the Layer?

RobertScheitlin__GISP · ‎01-18-2017

Bengi,

I guess I do not understand your workflow.

thejuskambi · ‎01-18-2017

If I am understanding it correctly, you are using map.graphics.add to add the school graphics to map. Is that correct?

If so you can use the graphicsUtils to get the extent of the graphics and then try to zoom to it.

require(["esri/graphicsUtils", ... 
], function(graphicsUtils, ... ) {

  var schoolGraphicsExtent = graphicsUtils.graphicsExtent(map.graphics.graphics);
  map.setExtent(schoolGraphicsExtent, true);
  ...
});‍‍‍‍‍‍‍

BehrouzHosseini · ‎01-18-2017

Thanks thejus kambi this is working somehow! but it is zooming out to another place on the map! do I have to change the:

map.graphics.graphics

to

map.graphics.schoolGraphicLayer

at:

var schoolGraphicsExtent = graphicsUtils.graphicsExtent(map.graphics.graphics);

BehrouzHosseini · ‎01-18-2017

When I have the code like this

map.addLayer(schoolGraphicLayer);
 var schoolGraphicsExtent = graphicsUtils.graphicsExtent(map.graphics.graphics);
 $(".zoom-to-point").on('click', function(){
    map.setExtent(schoolGraphicsExtent, true);
 });‍‍‍‍‍

I am getting this error

Uncaught TypeError: Cannot read property 'graphics' of null

and when I update the code to

map.addLayer(schoolGraphicLayer);

 $(".zoom-to-point").on('click', function(){
  var schoolGraphicsExtent = graphicsUtils.graphicsExtent(map.graphics.graphics);
  map.setExtent(schoolGraphicsExtent, true);
 });‍‍‍‍‍‍

I am not getting any error but the map zoom out to some where far from the area of interest

RobertScheitlin__GISP · ‎01-18-2017

Bengi,

It would be:

map.addLayer(schoolGraphicLayer);

 $(".zoom-to-point").on('click', function(){
  var schoolGraphicsExtent = graphicsUtils.graphicsExtent(schoolGraphicLayer.graphics);
  map.setExtent(schoolGraphicsExtent, true);
 });

BehrouzHosseini · ‎01-18-2017

Thanks it is working now!