set zoom when the graphics will go out of visibe area

1562
2
Jump to solution
10-14-2015 06:45 AM
JulieBiju
Occasional Contributor

Thank u for ur valuable time.

In the web app, Adding graphics in each 10 second time using timer .Now my requirement is, after pan/zoom if any one of the graphic will go out of our visible area then only I need to set the zoom. How can I do this. Actually I did this successfully in silverlight which is below. But confused to do in Javascript.

Silverlight coding below and the javascript also.

  '------------------------------------set zoom when the graphics will go out of visibe area

        Dim selectedFeatureExtent As ESRI.ArcGIS.Client.Geometry.Envelope = mercator.FromGeographic(New MapPoint(Convert.ToDouble(gpsNMEASentence(4)), Convert.ToDouble(gpsNMEASentence(2)))).Extent

        Dim displayExtent As New ESRI.ArcGIS.Client.Geometry.Envelope(selectedFeatureExtent.XMin, selectedFeatureExtent.YMin, selectedFeatureExtent.XMax, selectedFeatureExtent.YMax)

    If ResolutionCount = 1 Then 'onlyonepoint

        Dispatcher.BeginInvoke(Sub() ZoomToResolution(MyMap, 0.350549302222, mercator.FromGeographic(New MapPoint(Convert.ToDouble(gpsNMEASentence(4)), Convert.ToDouble(gpsNMEASentence(2))))))

        ResolutionCount = 0

    ElseIf MyMap.Extent.Intersects(displayExtent) = False And Trim(TryCast(CmbFahrname.SelectedItem, comboloadclass).ename.ToString()) = "All Vehicles" Then

        Dim expandPercentage As Double = 400

        Dim selectedFeatureExtent1 As ESRI.ArcGIS.Client.Geometry.Envelope = graphicsLayer.FullExtent

        expandPercentage = 100

        Dim widthExpand As Double = selectedFeatureExtent1.Width * (expandPercentage / 100)

        Dim heightExpand As Double = selectedFeatureExtent1.Height * (expandPercentage / 100)

        Dim displayExtent1 As New ESRI.ArcGIS.Client.Geometry.Envelope(selectedFeatureExtent1.XMin - (widthExpand / 2), selectedFeatureExtent1.YMin - (heightExpand / 2), selectedFeatureExtent1.XMax + (widthExpand / 2), selectedFeatureExtent1.YMax + (heightExpand / 2))

        MyMap.ZoomTo(displayExtent1)

    ElseIf MyMap.Extent.Intersects(displayExtent) = False And Trim(TryCast(CmbFahrname.SelectedItem, comboloadclass).ename.ToString()) <> "All Vehicles" Then

        Dispatcher.BeginInvoke(Sub() ZoomToResolution(MyMap, MyMap.Resolution, mercator.FromGeographic(New MapPoint(Convert.ToDouble(gpsNMEASentence(4)), Convert.ToDouble(gpsNMEASentence(2))))))

    End If

    '------------------------------------

Javascript Below

<!DOCTYPE html> 
<html> 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  <!--The viewport meta tag is used to improve the presentation and behavior 
    of the samples on iOS devices--> 
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> 
  <title>Basemap Gallery - Bing Maps</title> 
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css"> 
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css"> 
  <style type="text/css"> 
    html, 
    body, 
    #mapDiv { 
      padding: 0; 
      margin: 0; 
      height: 100%; 
      z-index: -1; 
      -moz-border-radius: 4px; 
      overflow: hidden; 
   
    .claro .dijitButtonText { 
      color: #03c; 
      font-family: Arial, Helvetica, sans-serif font-weight: bold; 
   
    .claro td.dijitMenuItemLabel { 
      color: #03c; 
      font-family: Arial, Helvetica, sans-serif font-weight: 500; 
   
    .auto-style1 {} 
    .auto-style2 { 
      height: 20px; 
   
    .auto-style3 { 
      height: 20px; 
   
    .auto-style6 { 
      height: 2%; 
      width: 279px; 
   
    .auto-style7 { 
      width: 279px; 
   
    #TxtAltareeqEng { 
      width: 55px; 
   
    #TxtAltareeqEng0 { 
      width: 55px; 
   
  </style> 
  <script>
      var dojoConfig = {
          parseOnLoad: false,
          async: true,
          tlmSiblingOfDojo: false,
          packages: [{
              name: "ncam",
              location: location.pathname.replace(/\/[^/]+$/, '') + "/ncam"
          }]
      };
  </script> 
  <script type="text/javascript" src="http://js.arcgis.com/3.14/"></script> 
  <script type="text/javascript">
      window.onerror = function (msg, url, linenumber) {
          alert('Error message: ' + msg + '\nURL: ' + url + '\nLine Number: ' + linenumber);
          return true;
      }

      var map, basemapGallery, loading;
      require([
          "esri/map",
          "esri/graphic",
          "esri/layers/ArcGISDynamicMapServiceLayer",
          "esri/layers/GraphicsLayer",
          "esri/geometry/Extent",
          "esri/geometry/Point",
          "esri/geometry/Polyline",
          "esri/SpatialReference",
          "esri/symbols/PictureMarkerSymbol",
          "esri/symbols/SimpleLineSymbol",
          "esri/dijit/Popup",
          "dojo/dom-construct",
          "esri/dijit/PopupTemplate",
          "esri/dijit/Basemap",
          "esri/dijit/BasemapGallery",
          "esri/dijit/BasemapLayer",
          "esri/graphicsUtils",
          "esri/domUtils",
          "dojo/_base/array",
          "dojo/parser",
          "dojo/dom",
          "dojo/_base/lang",
          "dojo/dom-style",
          "dijit/MenuItem",
          "dijit/registry",
          "ncam/DirectionalLineSymbol",
          "dijit/Menu",
          "dijit/layout/ContentPane",
          "dijit/form/Button",
          "dijit/form/RadioButton",
          "dijit/form/DropDownButton",
          "dojo/domReady!"
      ],
        function (
          Map,
          Graphic,
          ArcGISDynamicMapServiceLayer,
          GraphicsLayer,
          Extent,
          Point,
          Polyline,
          SpatialReference,
          PictureMarkerSymbol,
          SimpleLineSymbol,
          Popup,
          domConstruct,
          PopupTemplate,
          Basemap,
          BasemapGallery,
          BasemapLayer,
          graphicsUtils,
          domUtils,
          array,
          parser,
          dom,
          lang,
          domStyle,
          MenuItem,
          registry,
          DirectionalLineSymbol
        ) {
            parser.parse();

            var TareeqENG, TareeqARB;
            var graphicsLayer;
            var clock;
            var AltareeqArb, AltareeqEng;
            loading = dom.byId("loadingImg");  //loading image. id 
            var popup = new Popup({
                highlight: false
            }, domConstruct.create("div"));
            map = new Map("mapDiv", {
                center: [6.389, 36.054],
                zoom: 4,
                basemap: 'topo',
                autoResize: false,
                infoWindow: popup
            });

            map.on("update-start", showLoading);
            map.on("update-end", hideLoading);

            map.on('load', function () {
                createBasemapGallery();
            });

            registry.byId("radioOne").on("change", function (isChecked) {
                if (isChecked) {
                    registry.byId("LnkLastPosition").set("label", "LastPosition");
                    registry.byId("LnkTracking").set("label", "Tracking");
                }
            }, true);

            registry.byId("radioTwo").on("change", function (isChecked) {
                if (isChecked) {
                    registry.byId("LnkLastPosition").set("label", "الموقف الأخير");
                    registry.byId("LnkTracking").set("label", "التتبع");
                }
            }, true);

            //registry.byId("LnkLastPosition").on("click", LastPosClick);
            //registry.byId("LnkTracking").on("click", LastPosClick);

            clock = setInterval(LastPosClick, 10000);

            function showLoading() {
                domStyle.set(registry.byId("dropdownButton").domNode, "display", "none");
                domUtils.show(loading);
                map.disableMapNavigation();
                map.hideZoomSlider();
            }

            function hideLoading(error) {
                domStyle.set(registry.byId("dropdownButton").domNode, "display", "");
                domUtils.hide(loading);
                map.enableMapNavigation();
                map.showZoomSlider();
            }

            function createBasemapGallery() {
                AltareeqEng = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapSer...";
                AltareeqArb = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer";

                //Manually create a list of basemaps to display 
                var basemaps = [];

                TareeqENG = new Basemap({
                    layers: [new ArcGISDynamicMapServiceLayer(AltareeqEng)],
                    id: "TareeqENG",
                    title: "Al-Tareeq(ENG)"
                });
                basemaps.push(TareeqENG);

                TareeqARB = new Basemap({
                    layers: [new ArcGISDynamicMapServiceLayer(AltareeqArb)],
                    id: "TareeqARB",
                    title: "Al-Tareeq(AR)"
                });
                basemaps.push(TareeqARB);

                BingMapsRoad = new Basemap({
                    layers: [new BasemapLayer({
                        type: "BingMapsRoad"
                    })],
                    id: "bmRoad",
                    title: "BingMaps-Road"
                });
                basemaps.push(BingMapsRoad);

                BingMapsAerial = new Basemap({
                    layers: [new BasemapLayer({
                        type: "BingMapsAerial"
                    })],
                    id: "bmAerial",
                    title: "BingMaps-Aerial"
                });
                basemaps.push(BingMapsAerial);

                BingMapsHybrid = new Basemap({
                    layers: [new BasemapLayer({
                        type: "BingMapsHybrid"
                    })],
                    id: "bmHybrid",
                    title: "BingMaps-Aerial-Labels"
                });
                basemaps.push(BingMapsHybrid);

                basemapGallery = new BasemapGallery({
                    showArcGISBasemaps: false,
                    basemaps: basemaps,
                    bingMapsKey: "ApQMgAf0l5kH5_mfhDmDX1q9DOa1eqAw15N9knkX4sj1kbAoOYzJMNCln6w5t3bs",
                    map: map
                });
                basemapGallery.startup();

                graphicsLayer = new GraphicsLayer();
                map.addLayer(graphicsLayer);

                graphicsLayer.on("mouse-over", function (event) {
                    var graphic = event.graphic;
                    map.infoWindow.highlight = false;
                    map.infoWindow.setFeatures([graphic]);
                    map.infoWindow.show(event.screenPoint);
                });

                graphicsLayer.on("mouse-out", function () {
                    map.infoWindow.highlight = false;
                    map.infoWindow.hide();
                });

                //BasemapGallery.startup isn't needed because we aren't using the default basemap, instead 
                //we are going to create a custom user interface to display the basemaps, in this case a menu. 
                array.forEach(basemapGallery.basemaps, function (basemap) {
                    //Add a menu item for each basemap, when the menu items are selected 
                    registry.byId("bingMenu").addChild(new MenuItem({
                        label: basemap.title,
                        onClick: lang.hitch(this, function () {
                            this.basemapGallery.select(basemap.id);
                        })
                    }));
                });
                /*Select that basemap that you want to be initially displayed*/
                basemapGallery.select(TareeqENG.id);
            }

            function LastPosClick() {
                map.infoWindow.hide();
                var colourstyle = "images/sphere-blue-dark-16x16.png"
                var Status = "status";
                var procname = "procname";
                var location = "location";
                var Driver = "Drv";
                var strhotspot = "strhotspot";
                var geomPoint1 = new Point(58.46236, 23.61581);
                var geomPoint2 = new Point(59.46236, 23.61581);
                var geomPoint3 = new Point(60.43362666666, 23.583081666666);
                var polyline = new Polyline(new SpatialReference(4326));
                polyline.addPath([geomPoint1, geomPoint2, geomPoint3]);
                var symbol = new PictureMarkerSymbol({
                    "url": colourstyle,
                    "height": 16,
                    "width": 16,
                    "type": "esriPMS"
                });

                //add a basic polyline 
                var basicOptions = {
                    style: SimpleLineSymbol.STYLE_SOLID,
                    color: new dojo.Color([0, 0, 0]),
                    width: 2,
                    directionScale: 0.8,
                    directionStyle: "arrow3",
                    directionPixelBuffer: 80
                };
                var basicSymbol = new DirectionalLineSymbol(basicOptions);

                var popupTemplate = new PopupTemplate();
                popupTemplate.content = strhotspot;
                var pointGraphic = new Graphic(geomPoint1, symbol);
                var pointGraphic2 = new Graphic(geomPoint2, symbol);
                var pointGraphic3 = new Graphic(geomPoint3, symbol);
                var lineGraphic = new Graphic(polyline, basicSymbol);
                pointGraphic.setInfoTemplate(popupTemplate);
                pointGraphic2.setInfoTemplate(popupTemplate);
                pointGraphic3.setInfoTemplate(popupTemplate);
                graphicsLayer.add(pointGraphic);
                graphicsLayer.add(pointGraphic2);
                graphicsLayer.add(pointGraphic3);
                graphicsLayer.add(lineGraphic);
                setextent();
                var DivesriLogoImage = dom.byId('DivesriLogoImage');
                var mapDiv = dom.byId('mapDiv');
                mapDiv.style.visibility = "visible";
                DivesriLogoImage.style.visibility = "hidden";
            }

            function setextent() {
                var gextent = graphicsUtils.graphicsExtent(graphicsLayer.graphics).expand(1.2);
                map.setExtent(gextent);
            }
        });
  </script> 
</head> 
<body class="claro"> 
  <form id="form1" > 
    <div style="width: 100%; height: 100%"> 
      <table id="Tablecontrols0" style="font-size: 15px; z-index: 101; background-color: #5B748B; width: 100%; height: 100%;"> 
        <tr style="font-family: Times New Roman"> 
          <td style="border-style: none; background-color: #496277; " valign="top" class="auto-style6"> 
            <input type="radio" data-dojo-type="dijit/form/RadioButton" name="uilanguage" id="radioOne" checked value="English"/><label for="radioOne">English</label><br /> 
            <input type="radio" data-dojo-type="dijit/form/RadioButton" name="uilanguage" id="radioTwo" value="العربية"/><label for="radioTwo">العربية</label> 
          </td> 
          <td align="left" style="border-style: none; background-color: #496277; height: 2%;" valign="top" class="auto-style3"> 
          </td> 
        </tr> 
        <tr style="font-family: Times New Roman"> 
          <td style="border-style: none;" valign="top" bgcolor="#496277" class="auto-style7"> 
            <table id="Tablecontrols" style="border-color: #F2F0EE; font-size: 15px; z-index: 101; 
            background-color: #496277; width:auto; height: 274px; font-family: verdana; color: tomato; font-weight: bold; border-top-style: none;" align="left"> 
              <tr style="font-family: Times New Roman"> 
                <td rowspan="1" valign="top" height="10px" class="auto-style1"> 
                </td> 
                <td rowspan="1" style="border-style: none;" valign="top" height="10px"> 
                </td> 
              </tr> 
              <tr style="font-family: Times New Roman"> 
                <td rowspan="1" style="font-weight: bold; " valign="top" height="10px" class="auto-style1"> 
                </td> 
                <td rowspan="1" style="border-style: none;" valign="top" height="10px"> 
                </td> 
              </tr> 
              <tr style="font-family: Times New Roman"> 
                <td style="font-weight: bold; " valign="top" height="10" class="auto-style1" colspan="2"> 
                </td> 
              </tr> 
              <tr style="font-family: Times New Roman"> 
                <td style="font-weight: bold; text-align: center; " valign="top" class="auto-style2"> 
                  <button dojotype="dijit/form/Button" id="LnkLastPosition" style="font-family: Arial; font-size: x-small; font-weight: normal"> 
                    Last Position</button> 
                </td> 
                <td style="border-style: none; text-align: center;" valign="top" class="auto-style3"> 
                  <button dojotype="dijit/form/Button" id="LnkTracking" style="font-family: Arial; font-size: x-small; font-weight: normal"> 
                    Tracking</button> 
                </td> 
              </tr> 
              <tr style="font-family: Times New Roman"> 
                <td colspan="2" rowspan="1" style="border-top: 2px solid #547289; border-bottom: 2px solid #547289; font-weight: bold;  position: static; 
                    height: 100%; text-align: left; width: 30%; border-left-width: 2px; border-right-width: 2px;" valign="top" align="left"> 
                  <div id="Something"></div> 
                  <div style="width: 300px; height: 356px; overflow: scroll"></div> 
                </td> 
              </tr> 
            </table> 
          </td> 
          <td style="border-style: none; background-color: white;  width: 100%; height:100%;" valign="top" id="td11"> 
            <div id="mapDiv"  dojotype="dijit/layout/ContentPane" region="center" style="border:1px solid #000; visibility: visible; height: 100%;"> 
              <img id="loadingImg" src="images/loading.gif" 
                   style="position:absolute; right:512px; top:277px; z-index:100; width: 40px; height: 40px;" /> 
              <div style="position:absolute; right:50px; top:100px; z-Index:99;"> 
                <button id="dropdownButton" label="Basemaps" data-dojo-type="dijit/form/DropDownButton" style="display: none;"> 
                  <div data-dojo-type="dijit/Menu" id="bingMenu"> 
                    <!--The menu items are dynamically created using the basemap gallery layers--> 
                  </div> 
                </button> 
              </div> 
            </div> 
            <div id="DivesriLogoImage" 
                 style="background-color: #FFFFFF; width: 80%; height:99.8%; visibility: hidden; position: absolute; top: 72px;" align="center"> 
            </div> 
          </td> 
        </tr> 
      </table> 
    </div> 
  </form> 
</body> 
</html> 

0 Kudos
1 Solution

Accepted Solutions
TracySchloss
Frequent Contributor

What if you check the extent of the graphics you've added before you change the extent?   Then you could only set the extent if needed.

function setextent() {

var gextent = graphicsUtils.graphicsExtent(graphicsLayer.graphics).expand(1.2);

var ext = map.extent;

     if (!ext.contains (gextent)) {

          map.setExtent(gextent);

     }

}

View solution in original post

0 Kudos
2 Replies
TracySchloss
Frequent Contributor

What if you check the extent of the graphics you've added before you change the extent?   Then you could only set the extent if needed.

function setextent() {

var gextent = graphicsUtils.graphicsExtent(graphicsLayer.graphics).expand(1.2);

var ext = map.extent;

     if (!ext.contains (gextent)) {

          map.setExtent(gextent);

     }

}

View solution in original post

0 Kudos
JulieBiju
Occasional Contributor

Tracy,

Thank u so much.

0 Kudos