topic Re: Set Zoom To Full Extent On Exsisting Graphics On Map Instead of Base Map in ArcGIS JavaScript Maps SDK Questions

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

BehrouzHosseini — Sat, 11 Dec 2021 11:45:19 GMT

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

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

RobertScheitlin__GISP — Fri, 13 Jan 2017 23:31:47 GMT

Behrouz,

The Navigation widgets zoomToFullExtent is always going to zoom to the basemaps full extent:

Zoom to initial extent of base layer

Instead of using the Navigation toolbar you should just set the maps extent to the school layers extent.

Map | API Reference | ArcGIS API for JavaScript 3.19 | setExtent

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

BehrouzHosseini — Sat, 11 Dec 2021 11:45:22 GMT

Thanks again Robert

I tried this way as the `schoolGraphicLayer` is my graphic layer added to the Map already

$("#show-all-schools").on("click", function () {
            map.setExtent(schoolGraphicLayer);
          });

but nothing is happening! Can you please let me know what I am doing wrong?

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

RobertScheitlin__GISP — Fri, 13 Jan 2017 23:55:28 GMT

Behrouz,

So what you are doing is trying to the map extent to a featurelayer then.

This is more like it:

map.setExtent(schoolGraphicLayer.fullExtent, true);

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

BruceGreen — Sat, 11 Dec 2021 11:45:24 GMT

Thanks Robert,

I Update the code to

$("#show-all-schools").on("click", function () {
            map.setExtent(schoolGraphicLayer.fullExtent, true);
          });

But I am getting this error now!

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

BehrouzHosseini — Tue, 17 Jan 2017 22:11:09 GMT

Hi Robert did you have a chance to take a look at this issue? Thanks

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

RobertScheitlin__GISP — Tue, 17 Jan 2017 22:43:15 GMT

Did you check the value of the fullExtent property? The main reason for that error is that property is null.

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

BehrouzHosseini — Tue, 17 Jan 2017 22:48:54 GMT

Did you check the value of the fullExtent property?

Thanks for reply Robert but how can I check this? if this is about

schoolGraphicLayer

I am sure that I have many graphics there already!

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

RobertScheitlin__GISP — Tue, 17 Jan 2017 23:11:43 GMT

add a line like this

console.info(schoolGraphicLayer.fullExtent);

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

BehrouzHosseini — Tue, 17 Jan 2017 23:25:02 GMT

You are right console.log() is returning undefined

can you please let me know why and how I can fix this? should I set an initial custom extent?

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

RobertScheitlin__GISP — Sat, 11 Dec 2021 11:45:28 GMT

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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

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

BehrouzHosseini — Wed, 18 Jan 2017 17:48:47 GMT

Thanks Robert,

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

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

RobertScheitlin__GISP — Wed, 18 Jan 2017 18:02:15 GMT

Bengi,

I guess I do not understand your workflow.

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

thejuskambi — Sat, 11 Dec 2021 11:45:30 GMT

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);
  ...
});‍‍‍‍‍‍‍

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

BehrouzHosseini — Wed, 18 Jan 2017 18:51:35 GMT

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

map.graphics.schoolGraphicLayer

at:

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

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

BehrouzHosseini — Sat, 11 Dec 2021 11:45:33 GMT

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

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

RobertScheitlin__GISP — Sat, 11 Dec 2021 11:45:36 GMT

Bengi,

It would be:

map.addLayer(schoolGraphicLayer);

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

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

BehrouzHosseini — Wed, 18 Jan 2017 19:10:14 GMT

Thanks it is working now!