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>
Solved! Go to Solution.
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);
}
}
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);
}
}
Tracy,
Thank u so much.