Just curious if anyone else is having performance issues with Chrome and Firefox while using an arcgis javascript web application.
I have been developing an application that works great in Internet Explorer but consumes alot of resources in Firefox and Chrome. It often takes over 500mb ram in chrome/firefox while it uses 1/4 of that in IE. This causes the application to hang intermittently and in general behave slow in chrome/firefox. No problems in IE.
Any insight is appreciated.
Application is running and pulling resources from our local network. Here is my code for reference:
var map;require([ "esri/map", "esri/config", "esri/arcgis/utils", "esri/dijit/HomeButton", "esri/dijit/Geocoder", "esri/layers/FeatureLayer", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/ImageParameters", "esri/dijit/Legend", "esri/geometry/webMercatorUtils", "esri/graphic", "esri/graphicsUtils", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/tasks/GeometryService", "esri/tasks/query", "esri/tasks/QueryTask", "esri/tasks/RelationshipQuery", "esri/tasks/locator", "esri/renderers/SimpleRenderer", "esri/geometry/screenUtils", "esri/geometry/Extent", "esri/geometry/Point", "esri/request", "esri/renderers/ClassBreaksRenderer", "agsjs/dijit/TOC", "dojo/store/Memory", "dijit/form/FilteringSelect", "dojo/dom", "dojo/on", "dojo/dom-class", "dojo/dom-construct", "dojo/_base/Color", "dojo/_base/connect", "dojo/_base/array", "dojo/parser", "dijit/registry", "dojo/fx", "dojo/domReady!"], function ( Map, esriConfig, arcgisUtils, HomeButton, Geocoder, FeatureLayer, ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer, ImageParameters, Legend, webMercatorUtils, Graphic, graphicsUtils, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, GeometryService, Query, QueryTask, RelationshipQuery, Locator, SimpleRenderer, screenUtils, Extent, Point, esriRequest, ClassBreaksRenderer, TOC, Memory, FilteringSelect, dom, on, domClass, domConstruct, Color, connect, array, parser, registry) {parser.parse();//Municipality Drop Downvar muniStore = new Memory({ data : [{ name : "Alexandria Township", id : "1001" }, { name : "Allamuchy Township", id : "2101" }, { name : "Alpha Borough", id : "2102" }, { name : "Bedminster Township", id : "1801" }, { name : "Belvidere Town", id : "2103" }, { name : "Bernards Township", id : "1802" }, { name : "Bernardsville Borough", id : "1803" }, { name : "Bethlehem Township", id : "1002" }, { name : "Bloomingdale Borough", id : "1601" }, { name : "Bloomsbury Borough", id : "1003" }, { name : "Boonton Town", id : "1401" }, { name : "Boonton Township", id : "1402" }, { name : "Butler Borough", id : "1403" }, { name : "Byram Township", id : "1904" }, { name : "Califon Borough", id : "1004" }, { name : "Chester Borough", id : "1406" }, { name : "Chester Township", id : "1407" }, { name : "Clinton Town", id : "1005" }, { name : "Clinton Township", id : "1006" }, { name : "Denville Township", id : "1408" }, { name : "Dover Town", id : "1409" }, { name : "Far Hills Borough", id : "1807" }, { name : "Franklin Borough", id : "1906" }, { name : "Franklin Township", id : "2105" }, { name : "Frelinghuysen Township", id : "2106" }, { name : "Glen Gardner Borough", id : "1012" }, { name : "Green Township", id : "1908" }, { name : "Greenwich Township", id : "2107" }, { name : "Hackettstown Town", id : "2108" }, { name : "Hamburg Borough", id : "1909" }, { name : "Hampton Borough", id : "1013" }, { name : "Hanover Township", id : "1412" }, { name : "Harding Township", id : "1413" }, { name : "Hardyston Township", id : "1911" }, { name : "Harmony Township", id : "2110" }, { name : "High Bridge Borough", id : "1014" }, { name : "Holland Township", id : "1015" }, { name : "Hopatcong Borough", id : "1912" }, { name : "Hope Township", id : "2111" }, { name : "Independence Township", id : "2112" }, { name : "Jefferson Township", id : "1414" }, { name : "Kinnelon Borough", id : "1415" }, { name : "Lebanon Borough", id : "1018" }, { name : "Lebanon Township", id : "1019" }, { name : "Liberty Township", id : "2114" }, { name : "Lopatcong Township", id : "2115" }, { name : "Mahwah Township", id : "0233" }, { name : "Mansfield Township", id : "2116" }, { name : "Mendham Borough", id : "1418" }, { name : "Mendham Township", id : "1419" }, { name : "Milford Borough", id : "1020" }, { name : "Mine Hill Township", id : "1420" }, { name : "Montville Township", id : "1421" }, { name : "Morris Plains Borough", id : "1423" }, { name : "Morris Township", id : "1422" }, { name : "Morristown Town", id : "1424" }, { name : "Mount Arlington Borough", id : "1426" }, { name : "Mount Olive Township", id : "1427" }, { name : "Mountain Lakes Borough", id : "1425" }, { name : "Netcong Borough", id : "1428" }, { name : "Oakland Borough", id : "0242" }, { name : "Ogdensburg Borough", id : "1916" }, { name : "Oxford Township", id : "2117" }, { name : "Parsippany-Troy Hills Township", id : "1429" }, { name : "Peapack Gladstone Borough", id : "1815" }, { name : "Pequannock Township", id : "1431" }, { name : "Phillipsburg Town", id : "2119" }, { name : "Pohatcong Township", id : "2120" }, { name : "Pompton Lakes Borough", id : "1609" }, { name : "Randolph Township", id : "1432" }, { name : "Ringwood Borough", id : "1611" }, { name : "Riverdale Borough", id : "1433" }, { name : "Rockaway Borough", id : "1434" }, { name : "Rockaway Township", id : "1435" }, { name : "Roxbury Township", id : "1436" }, { name : "Sparta Township", id : "1918" }, { name : "Stanhope Borough", id : "1919" }, { name : "Tewksbury Township", id : "1024" }, { name : "Union Township", id : "1025" }, { name : "Vernon Township", id : "1922" }, { name : "Victory Gardens Borough", id : "1437" }, { name : "Wanaque Borough", id : "1613" }, { name : "Washington Borough", id : "2121" }, { name : "Washington Township (Morris)", id : "1438" }, { name : "Washington Township (Warren)", id : "2122" }, { name : "West Milford Township", id : "1615" }, { name : "Wharton Borough", id : "1439" }, { name : "White Township", id : "2123" } ] });var filteringSelect = new FilteringSelect({ id : "muniSelect", name : "muni", placeholder : "Select a Municipality", store : muniStore, searchAttr : "name" }, "muniSelect");//Initial Extentvar initialExtent = new Extent({ "xmin" : 186870.18, "ymin" : 541462.48, "xmax" : 735481.291, "ymax" : 967243.73, "spatialReference" : { "wkid" : 102711 } });//The mapmap = new Map("map", { logo : false, extent : initialExtent });//home buttonvar home = new HomeButton({ map : map }, "HomeButton");home.startup();//geocodergeocoder = new Geocoder({ map : map, autoComplete : true, highlightLocation : true }, "geocoder");geocoder.startup();//add the legendmap.on('layers-add-result', function () { var toc = new TOC({ map : map, layerInfos : [{ layer : administrative, title : "Administrative", collapsed : false, slider : true }, { layer : agriculture, title : "Agriculture", collapsed : true, slider : true }, { layer : critHab, title : "Critical Habitat", collapsed : true, slider : true }, { layer : forest, title : "Forest Resources", collapsed : true, slider : true }, { layer : geology, title : "Geology", collapsed : true, slider : true }, { layer : presOS, title : "Preserved Open Space", collapsed : true, slider : true }, { layer : presPriority, title : "Preservation Priority", collapsed : true, slider : true }, { layer : transportation, title : "Transportation", collapsed : true, slider : true }, { layer : waterCap, title : "Water Capacity", collapsed : true, slider : true }, { layer : waterQual, title : "Water Quality", collapsed : true, slider : true }, { layer : special_projects, title : "Special Projects", collapsed : true, slider : true } ] }, 'tocDiv'); toc.startup(); toc.on('load', function () { if (console) console.log('TOC loaded'); }); //set visible layers administrative.setVisibleLayers([3]); agriculture.setVisibleLayers([-1]); critHab.setVisibleLayers([-1]); forest.setVisibleLayers([-1]); geology.setVisibleLayers([-1]); presOS.setVisibleLayers([-1]); presPriority.setVisibleLayers([-1]); transportation.setVisibleLayers([-1]); waterCap.setVisibleLayers([-1]); waterQual.setVisibleLayers([-1]); special_projects.setVisibleLayers([-1]);});//Layersvar HLTerrainBasemap = new ArcGISTiledMapServiceLayer("http://arcserver/arcgis/rest/services/basemaps/Highlands_Basemap/MapServer");var parcels = new FeatureLayer("http://arcserver/arcgis/rest/services/Base_Data/Administrative/MapServer/3", { mode : FeatureLayer.MODE_ONDEMAND, outFields : ["*"] });var muni = new FeatureLayer("http://arcserver/arcgis/rest/services/Base_Data/Administrative/MapServer/1", { mode : FeatureLayer.MODE_ONDEMAND, outFields : ["*"] });var agriculture = new ArcGISDynamicMapServiceLayer("http://arcserver/arcgis/rest/services/Base_Data/Agricultural_Resources/MapServer", { opacity : 0.8 });var administrative = new ArcGISDynamicMapServiceLayer("http://arcserver/arcgis/rest/services/Base_Data/Administrative/MapServer", { opacity : 0.8 });var critHab = new ArcGISDynamicMapServiceLayer("http://arcserver/arcgis/rest/services/Base_Data/Critical_Habitat/MapServer", { opacity : 0.8 });var forest = new ArcGISDynamicMapServiceLayer("http://arcserver/arcgis/rest/services/Base_Data/Forest_Resources/MapServer", { opacity : 0.8 });var geology = new ArcGISDynamicMapServiceLayer("http://arcserver/arcgis/rest/services/Base_Data/Geology/MapServer", { opacity : 0.8 });var presOS = new ArcGISDynamicMapServiceLayer("http://arcserver/arcgis/rest/services/Base_Data/Preserved_Open_Space/MapServer", { opacity : 0.8 });var presPriority = new ArcGISDynamicMapServiceLayer("http://arcserver/arcgis/rest/services/Base_Data/Preservation_Priority/MapServer", { opacity : 0.8 });var transportation = new ArcGISDynamicMapServiceLayer("http://arcserver/arcgis/rest/services/Base_Data/Transportation/MapServer", { opacity : 0.8 });var waterCap = new ArcGISDynamicMapServiceLayer("http://arcserver/arcgis/rest/services/Base_Data/Water_Capacity/MapServer", { opacity : 0.8 });var waterQual = new ArcGISDynamicMapServiceLayer("http://arcserver/arcgis/rest/services/Base_Data/Water_Quality/MapServer", { opacity : 0.8 });var special_projects = new ArcGISDynamicMapServiceLayer("http://arcserver/arcgis/rest/services/Base_Data/Special_Projects/MapServer", { opacity : 0.8 });//add the layersmap.addLayer(HLTerrainBasemap);map.addLayers([administrative, agriculture, critHab, forest, geology, presOS, presPriority, transportation, waterCap, waterQual, special_projects]);//get extent infomap.on("extent-change", function findExtent() { var e = map.extent; var s = ""; s = "XMin: " + e.xmin + "
" + " YMin: " + e.ymin + "
" + " XMax: " + e.xmax + "
" + " YMax: " + e.ymax + "
" + " Spatial Reference(wkid): " + e.spatialReference.wkid + "
" + " Center(x,y): " + e.getCenter().x + ", " + e.getCenter().y; dom.byId("onExtentChangeInfo").innerHTML = s; var d = ""; d = "Zoom Level: " + map.getLevel() + "
" + "Resolution: " + map.getResolution() + "
" + "Scale: " + map.getScale(); dom.byId("details").innerHTML = d;});//Parcel Highlight Symbolvar highlightSymbol = new SimpleFillSymbol( SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol( SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 3), new Color([125, 125, 125, 0.2]));//Muni Highlight Symbolvar muniHighlightSymbol = new SimpleLineSymbol( SimpleLineSymbol.STYLE_SOLID, new Color([0, 255, 255]), 3);//Click Symbolvar symbolClick = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_X, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1), new dojo.Color([0, 255, 0, 0.25]));//Zoom to Municipalityvar queryTaskMuni = new esri.tasks.QueryTask("http://arcserver/arcgis/rest/services/Base_Data/Administrative/MapServer/1");var muniQuery = new esri.tasks.Query();muniQuery.outFields = ["*"];muniQuery.returnGeometry = true;on(dom.byId("muniZoom"), "click", muniExecute);function muniExecute() { map.graphics.clear(); var muni = dijit.byId("muniSelect").value; muniQuery.where = "SSN = '" + muni + "'"; if (muni.length === 0) { alert("Please Select a Municipality"); } else { queryTaskMuni.execute(muniQuery, muniResults); dojo.style(dojo.byId('MuniPane'), "display", "block"); }}function muniResults(results) { var resultItems = []; var resultCount = results.features.length; for (var i = 0; i < resultCount; i++) { var featureAttributes = results.features.attributes; for (var attr in featureAttributes) { resultItems.push("" + attr + ": " + featureAttributes[attr] + "
"); } resultItems.push("
"); } map.graphics.clear(); dom.byId("MuniInfo").innerHTML = resultItems.join(""); var resultExtent = graphicsUtils.graphicsExtent(results.features); map.setExtent(resultExtent.expand(1), true); highlightMuni(results);}function highlightMuni(results) { var graphic = results.features[0]; graphic.setSymbol(muniHighlightSymbol); map.graphics.add(graphic); console.log('Muni Extent!');}function queryTaskExecuteCompleteHandler(queryResults) { console.log("complete", queryResults);}function queryTaskErrorHandler(queryError) { console.log("Query error", queryError.error.details);}// Query Parcel Geometrymap.on("click", clickPoint);function clickPoint(event) { map.graphics.clear(pointGraphic); var queryPoint = event.mapPoint; var pointGraphic = new Graphic(queryPoint, symbolClick); map.graphics.add(pointGraphic); var l = ""; l = "Lat: " + queryPoint.x + "
" + "Long: " + queryPoint.y; dom.byId("clickedCoords").innerHTML = l; console.log("queryPoint: ", queryPoint); var clickQuery = new Query(); var ClickQuerytask = new QueryTask(parcels.url); clickQuery.returnGeometry = true; clickQuery.outFields = ["OBJECTID", "PAMS_PIN", "SSN", "BLOCK", "LOT"]; clickQuery.geometry = queryPoint; ClickQuerytask.execute(clickQuery, parcelResults); console.log("clickQuery: ", clickQuery);}//Query BLOCK/LOTvar queryTask = new QueryTask(parcels.url);var query = new Query();query.returnGeometry = true;query.outFields = ["OBJECTID", "PAMS_PIN", "SSN", "BLOCK", "LOT"];queryTask.on("error", queryTaskErrorHandler);queryTask.on("complete", queryTaskExecuteCompleteHandler);on(dom.byId("execute"), "click", execute);function execute() { dojo.style(dojo.byId('ParcelPane'), "display", "block"); var ssn = dijit.byId("muniSelect").value; var block = dom.byId("block").value; var lot = dom.byId("lot").value; if (!ssn || !block || !lot) { dojo.style(dojo.byId('modivPane'), "display", "none"); dom.byId("ParcelInfo").innerHTML = "Please Complete all Fields
"; } else { query.where = "SSN = '" + ssn + "' AND BLOCK = '" + block + "' AND LOT = '" + lot + "'"; queryTask.execute(query, parcelResults); console.log("query: ", query); }}function parcelResults(results) { dojo.style(dojo.byId('MuniPane'), "display", "none"); dojo.style(dojo.byId('ParcelPane'), "display", "block"); var resultItems = []; var resultCount = results.features.length; console.log("Parcel Result Count", resultCount); for (var i = 0; i < resultCount; i++) { var featureAttributes = results.features.attributes; for (var attr in featureAttributes) { resultItems.push("" + attr + ": " + featureAttributes[attr] + "
"); } dojo.style(dojo.byId('modivPane'), "display", "block"); findRelatedRecords(results); } if (resultCount === 0) { dojo.style(dojo.byId('modivPane'), "display", "none"); dom.byId("ParcelInfo").innerHTML = "No Record Found
"; } else { map.graphics.clear(); dom.byId("ParcelInfo").innerHTML = resultItems.join(""); highlightParcel(results); }}//Zoom to Result & Set Query Result Symbolfunction highlightParcel(results) { var parcelGraphic = results.features[0]; parcelGraphic.setSymbol(highlightSymbol); map.graphics.add(parcelGraphic); var resultExtent = graphicsUtils.graphicsExtent(results.features); map.setExtent(resultExtent.expand(2)); console.log('Parcel Extent!');}//Query related recordsfunction findRelatedRecords(results) { dojo.style(dojo.byId('modivPane'), "display", "block"); var features = results.features; var relatedTopsQuery = new RelationshipQuery(); relatedTopsQuery.outFields = ["OBJECTID", "MUNI", "COUNTY", "QUALIFIER", "PROP_CLASS", "PROP_LOC", "OWNER", "LAND_VALUE"]; relatedTopsQuery.relationshipId = 0; relatedTopsQuery.objectIds = [features[0].attributes.OBJECTID]; parcels.queryRelatedFeatures(relatedTopsQuery, function (relatedRecords) { try{ var fset = relatedRecords[features[0].attributes.OBJECTID]; console.log("fset: ", fset); var relatedItems = []; var relatedCount = fset.features.length; console.log("Related Record Count: ",relatedCount); for (var i = 0; i < relatedCount; i++) { var items = fset.features.attributes; for (var attr in items) { relatedItems.push("" + attr + ": " + items[attr] + "
"); } dom.byId("modivInfo").innerHTML = relatedItems.join(""); } if(relatedCount > 1){ var recordCount = " (" + relatedCount + " Records Found)"; dom.byId("RecordCount").innerHTML = recordCount; }else{ dom.byId("RecordCount").innerHTML = " (1 Record Found)"; } } catch(err){ dom.byId("RecordCount").innerHTML = ""; dom.byId("modivInfo").innerHTML = "No Record Found
"; } });}//Reset buttonon(dom.byId("reset"), "click", reset);function reset() { console.log("Reset Function Called"); dijit.byId("muniSelect").reset(); dijit.byId("block").reset(); dijit.byId("lot").reset(); dojo.style(dojo.byId('MuniPane'), "display", "none"); dojo.style(dojo.byId('ParcelPane'), "display", "none"); dojo.style(dojo.byId('modivPane'), "display", "none"); map.graphics.clear(); map.setExtent(initialExtent); console.log("Reset Function Complete");}//map loading animationvar mapLoading = dom.byId("map-loading");map.on("update-start", function () { esri.show(mapLoading);});map.on("update-end", function () { esri.hide(mapLoading);});});
أكثر...
I have been developing an application that works great in Internet Explorer but consumes alot of resources in Firefox and Chrome. It often takes over 500mb ram in chrome/firefox while it uses 1/4 of that in IE. This causes the application to hang intermittently and in general behave slow in chrome/firefox. No problems in IE.
Any insight is appreciated.
Application is running and pulling resources from our local network. Here is my code for reference:
var map;require([ "esri/map", "esri/config", "esri/arcgis/utils", "esri/dijit/HomeButton", "esri/dijit/Geocoder", "esri/layers/FeatureLayer", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/ImageParameters", "esri/dijit/Legend", "esri/geometry/webMercatorUtils", "esri/graphic", "esri/graphicsUtils", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/tasks/GeometryService", "esri/tasks/query", "esri/tasks/QueryTask", "esri/tasks/RelationshipQuery", "esri/tasks/locator", "esri/renderers/SimpleRenderer", "esri/geometry/screenUtils", "esri/geometry/Extent", "esri/geometry/Point", "esri/request", "esri/renderers/ClassBreaksRenderer", "agsjs/dijit/TOC", "dojo/store/Memory", "dijit/form/FilteringSelect", "dojo/dom", "dojo/on", "dojo/dom-class", "dojo/dom-construct", "dojo/_base/Color", "dojo/_base/connect", "dojo/_base/array", "dojo/parser", "dijit/registry", "dojo/fx", "dojo/domReady!"], function ( Map, esriConfig, arcgisUtils, HomeButton, Geocoder, FeatureLayer, ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer, ImageParameters, Legend, webMercatorUtils, Graphic, graphicsUtils, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, GeometryService, Query, QueryTask, RelationshipQuery, Locator, SimpleRenderer, screenUtils, Extent, Point, esriRequest, ClassBreaksRenderer, TOC, Memory, FilteringSelect, dom, on, domClass, domConstruct, Color, connect, array, parser, registry) {parser.parse();//Municipality Drop Downvar muniStore = new Memory({ data : [{ name : "Alexandria Township", id : "1001" }, { name : "Allamuchy Township", id : "2101" }, { name : "Alpha Borough", id : "2102" }, { name : "Bedminster Township", id : "1801" }, { name : "Belvidere Town", id : "2103" }, { name : "Bernards Township", id : "1802" }, { name : "Bernardsville Borough", id : "1803" }, { name : "Bethlehem Township", id : "1002" }, { name : "Bloomingdale Borough", id : "1601" }, { name : "Bloomsbury Borough", id : "1003" }, { name : "Boonton Town", id : "1401" }, { name : "Boonton Township", id : "1402" }, { name : "Butler Borough", id : "1403" }, { name : "Byram Township", id : "1904" }, { name : "Califon Borough", id : "1004" }, { name : "Chester Borough", id : "1406" }, { name : "Chester Township", id : "1407" }, { name : "Clinton Town", id : "1005" }, { name : "Clinton Township", id : "1006" }, { name : "Denville Township", id : "1408" }, { name : "Dover Town", id : "1409" }, { name : "Far Hills Borough", id : "1807" }, { name : "Franklin Borough", id : "1906" }, { name : "Franklin Township", id : "2105" }, { name : "Frelinghuysen Township", id : "2106" }, { name : "Glen Gardner Borough", id : "1012" }, { name : "Green Township", id : "1908" }, { name : "Greenwich Township", id : "2107" }, { name : "Hackettstown Town", id : "2108" }, { name : "Hamburg Borough", id : "1909" }, { name : "Hampton Borough", id : "1013" }, { name : "Hanover Township", id : "1412" }, { name : "Harding Township", id : "1413" }, { name : "Hardyston Township", id : "1911" }, { name : "Harmony Township", id : "2110" }, { name : "High Bridge Borough", id : "1014" }, { name : "Holland Township", id : "1015" }, { name : "Hopatcong Borough", id : "1912" }, { name : "Hope Township", id : "2111" }, { name : "Independence Township", id : "2112" }, { name : "Jefferson Township", id : "1414" }, { name : "Kinnelon Borough", id : "1415" }, { name : "Lebanon Borough", id : "1018" }, { name : "Lebanon Township", id : "1019" }, { name : "Liberty Township", id : "2114" }, { name : "Lopatcong Township", id : "2115" }, { name : "Mahwah Township", id : "0233" }, { name : "Mansfield Township", id : "2116" }, { name : "Mendham Borough", id : "1418" }, { name : "Mendham Township", id : "1419" }, { name : "Milford Borough", id : "1020" }, { name : "Mine Hill Township", id : "1420" }, { name : "Montville Township", id : "1421" }, { name : "Morris Plains Borough", id : "1423" }, { name : "Morris Township", id : "1422" }, { name : "Morristown Town", id : "1424" }, { name : "Mount Arlington Borough", id : "1426" }, { name : "Mount Olive Township", id : "1427" }, { name : "Mountain Lakes Borough", id : "1425" }, { name : "Netcong Borough", id : "1428" }, { name : "Oakland Borough", id : "0242" }, { name : "Ogdensburg Borough", id : "1916" }, { name : "Oxford Township", id : "2117" }, { name : "Parsippany-Troy Hills Township", id : "1429" }, { name : "Peapack Gladstone Borough", id : "1815" }, { name : "Pequannock Township", id : "1431" }, { name : "Phillipsburg Town", id : "2119" }, { name : "Pohatcong Township", id : "2120" }, { name : "Pompton Lakes Borough", id : "1609" }, { name : "Randolph Township", id : "1432" }, { name : "Ringwood Borough", id : "1611" }, { name : "Riverdale Borough", id : "1433" }, { name : "Rockaway Borough", id : "1434" }, { name : "Rockaway Township", id : "1435" }, { name : "Roxbury Township", id : "1436" }, { name : "Sparta Township", id : "1918" }, { name : "Stanhope Borough", id : "1919" }, { name : "Tewksbury Township", id : "1024" }, { name : "Union Township", id : "1025" }, { name : "Vernon Township", id : "1922" }, { name : "Victory Gardens Borough", id : "1437" }, { name : "Wanaque Borough", id : "1613" }, { name : "Washington Borough", id : "2121" }, { name : "Washington Township (Morris)", id : "1438" }, { name : "Washington Township (Warren)", id : "2122" }, { name : "West Milford Township", id : "1615" }, { name : "Wharton Borough", id : "1439" }, { name : "White Township", id : "2123" } ] });var filteringSelect = new FilteringSelect({ id : "muniSelect", name : "muni", placeholder : "Select a Municipality", store : muniStore, searchAttr : "name" }, "muniSelect");//Initial Extentvar initialExtent = new Extent({ "xmin" : 186870.18, "ymin" : 541462.48, "xmax" : 735481.291, "ymax" : 967243.73, "spatialReference" : { "wkid" : 102711 } });//The mapmap = new Map("map", { logo : false, extent : initialExtent });//home buttonvar home = new HomeButton({ map : map }, "HomeButton");home.startup();//geocodergeocoder = new Geocoder({ map : map, autoComplete : true, highlightLocation : true }, "geocoder");geocoder.startup();//add the legendmap.on('layers-add-result', function () { var toc = new TOC({ map : map, layerInfos : [{ layer : administrative, title : "Administrative", collapsed : false, slider : true }, { layer : agriculture, title : "Agriculture", collapsed : true, slider : true }, { layer : critHab, title : "Critical Habitat", collapsed : true, slider : true }, { layer : forest, title : "Forest Resources", collapsed : true, slider : true }, { layer : geology, title : "Geology", collapsed : true, slider : true }, { layer : presOS, title : "Preserved Open Space", collapsed : true, slider : true }, { layer : presPriority, title : "Preservation Priority", collapsed : true, slider : true }, { layer : transportation, title : "Transportation", collapsed : true, slider : true }, { layer : waterCap, title : "Water Capacity", collapsed : true, slider : true }, { layer : waterQual, title : "Water Quality", collapsed : true, slider : true }, { layer : special_projects, title : "Special Projects", collapsed : true, slider : true } ] }, 'tocDiv'); toc.startup(); toc.on('load', function () { if (console) console.log('TOC loaded'); }); //set visible layers administrative.setVisibleLayers([3]); agriculture.setVisibleLayers([-1]); critHab.setVisibleLayers([-1]); forest.setVisibleLayers([-1]); geology.setVisibleLayers([-1]); presOS.setVisibleLayers([-1]); presPriority.setVisibleLayers([-1]); transportation.setVisibleLayers([-1]); waterCap.setVisibleLayers([-1]); waterQual.setVisibleLayers([-1]); special_projects.setVisibleLayers([-1]);});//Layersvar HLTerrainBasemap = new ArcGISTiledMapServiceLayer("http://arcserver/arcgis/rest/services/basemaps/Highlands_Basemap/MapServer");var parcels = new FeatureLayer("http://arcserver/arcgis/rest/services/Base_Data/Administrative/MapServer/3", { mode : FeatureLayer.MODE_ONDEMAND, outFields : ["*"] });var muni = new FeatureLayer("http://arcserver/arcgis/rest/services/Base_Data/Administrative/MapServer/1", { mode : FeatureLayer.MODE_ONDEMAND, outFields : ["*"] });var agriculture = new ArcGISDynamicMapServiceLayer("http://arcserver/arcgis/rest/services/Base_Data/Agricultural_Resources/MapServer", { opacity : 0.8 });var administrative = new ArcGISDynamicMapServiceLayer("http://arcserver/arcgis/rest/services/Base_Data/Administrative/MapServer", { opacity : 0.8 });var critHab = new ArcGISDynamicMapServiceLayer("http://arcserver/arcgis/rest/services/Base_Data/Critical_Habitat/MapServer", { opacity : 0.8 });var forest = new ArcGISDynamicMapServiceLayer("http://arcserver/arcgis/rest/services/Base_Data/Forest_Resources/MapServer", { opacity : 0.8 });var geology = new ArcGISDynamicMapServiceLayer("http://arcserver/arcgis/rest/services/Base_Data/Geology/MapServer", { opacity : 0.8 });var presOS = new ArcGISDynamicMapServiceLayer("http://arcserver/arcgis/rest/services/Base_Data/Preserved_Open_Space/MapServer", { opacity : 0.8 });var presPriority = new ArcGISDynamicMapServiceLayer("http://arcserver/arcgis/rest/services/Base_Data/Preservation_Priority/MapServer", { opacity : 0.8 });var transportation = new ArcGISDynamicMapServiceLayer("http://arcserver/arcgis/rest/services/Base_Data/Transportation/MapServer", { opacity : 0.8 });var waterCap = new ArcGISDynamicMapServiceLayer("http://arcserver/arcgis/rest/services/Base_Data/Water_Capacity/MapServer", { opacity : 0.8 });var waterQual = new ArcGISDynamicMapServiceLayer("http://arcserver/arcgis/rest/services/Base_Data/Water_Quality/MapServer", { opacity : 0.8 });var special_projects = new ArcGISDynamicMapServiceLayer("http://arcserver/arcgis/rest/services/Base_Data/Special_Projects/MapServer", { opacity : 0.8 });//add the layersmap.addLayer(HLTerrainBasemap);map.addLayers([administrative, agriculture, critHab, forest, geology, presOS, presPriority, transportation, waterCap, waterQual, special_projects]);//get extent infomap.on("extent-change", function findExtent() { var e = map.extent; var s = ""; s = "XMin: " + e.xmin + "
" + " YMin: " + e.ymin + "
" + " XMax: " + e.xmax + "
" + " YMax: " + e.ymax + "
" + " Spatial Reference(wkid): " + e.spatialReference.wkid + "
" + " Center(x,y): " + e.getCenter().x + ", " + e.getCenter().y; dom.byId("onExtentChangeInfo").innerHTML = s; var d = ""; d = "Zoom Level: " + map.getLevel() + "
" + "Resolution: " + map.getResolution() + "
" + "Scale: " + map.getScale(); dom.byId("details").innerHTML = d;});//Parcel Highlight Symbolvar highlightSymbol = new SimpleFillSymbol( SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol( SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 3), new Color([125, 125, 125, 0.2]));//Muni Highlight Symbolvar muniHighlightSymbol = new SimpleLineSymbol( SimpleLineSymbol.STYLE_SOLID, new Color([0, 255, 255]), 3);//Click Symbolvar symbolClick = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_X, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1), new dojo.Color([0, 255, 0, 0.25]));//Zoom to Municipalityvar queryTaskMuni = new esri.tasks.QueryTask("http://arcserver/arcgis/rest/services/Base_Data/Administrative/MapServer/1");var muniQuery = new esri.tasks.Query();muniQuery.outFields = ["*"];muniQuery.returnGeometry = true;on(dom.byId("muniZoom"), "click", muniExecute);function muniExecute() { map.graphics.clear(); var muni = dijit.byId("muniSelect").value; muniQuery.where = "SSN = '" + muni + "'"; if (muni.length === 0) { alert("Please Select a Municipality"); } else { queryTaskMuni.execute(muniQuery, muniResults); dojo.style(dojo.byId('MuniPane'), "display", "block"); }}function muniResults(results) { var resultItems = []; var resultCount = results.features.length; for (var i = 0; i < resultCount; i++) { var featureAttributes = results.features.attributes; for (var attr in featureAttributes) { resultItems.push("" + attr + ": " + featureAttributes[attr] + "
"); } resultItems.push("
"); } map.graphics.clear(); dom.byId("MuniInfo").innerHTML = resultItems.join(""); var resultExtent = graphicsUtils.graphicsExtent(results.features); map.setExtent(resultExtent.expand(1), true); highlightMuni(results);}function highlightMuni(results) { var graphic = results.features[0]; graphic.setSymbol(muniHighlightSymbol); map.graphics.add(graphic); console.log('Muni Extent!');}function queryTaskExecuteCompleteHandler(queryResults) { console.log("complete", queryResults);}function queryTaskErrorHandler(queryError) { console.log("Query error", queryError.error.details);}// Query Parcel Geometrymap.on("click", clickPoint);function clickPoint(event) { map.graphics.clear(pointGraphic); var queryPoint = event.mapPoint; var pointGraphic = new Graphic(queryPoint, symbolClick); map.graphics.add(pointGraphic); var l = ""; l = "Lat: " + queryPoint.x + "
" + "Long: " + queryPoint.y; dom.byId("clickedCoords").innerHTML = l; console.log("queryPoint: ", queryPoint); var clickQuery = new Query(); var ClickQuerytask = new QueryTask(parcels.url); clickQuery.returnGeometry = true; clickQuery.outFields = ["OBJECTID", "PAMS_PIN", "SSN", "BLOCK", "LOT"]; clickQuery.geometry = queryPoint; ClickQuerytask.execute(clickQuery, parcelResults); console.log("clickQuery: ", clickQuery);}//Query BLOCK/LOTvar queryTask = new QueryTask(parcels.url);var query = new Query();query.returnGeometry = true;query.outFields = ["OBJECTID", "PAMS_PIN", "SSN", "BLOCK", "LOT"];queryTask.on("error", queryTaskErrorHandler);queryTask.on("complete", queryTaskExecuteCompleteHandler);on(dom.byId("execute"), "click", execute);function execute() { dojo.style(dojo.byId('ParcelPane'), "display", "block"); var ssn = dijit.byId("muniSelect").value; var block = dom.byId("block").value; var lot = dom.byId("lot").value; if (!ssn || !block || !lot) { dojo.style(dojo.byId('modivPane'), "display", "none"); dom.byId("ParcelInfo").innerHTML = "Please Complete all Fields
"; } else { query.where = "SSN = '" + ssn + "' AND BLOCK = '" + block + "' AND LOT = '" + lot + "'"; queryTask.execute(query, parcelResults); console.log("query: ", query); }}function parcelResults(results) { dojo.style(dojo.byId('MuniPane'), "display", "none"); dojo.style(dojo.byId('ParcelPane'), "display", "block"); var resultItems = []; var resultCount = results.features.length; console.log("Parcel Result Count", resultCount); for (var i = 0; i < resultCount; i++) { var featureAttributes = results.features.attributes; for (var attr in featureAttributes) { resultItems.push("" + attr + ": " + featureAttributes[attr] + "
"); } dojo.style(dojo.byId('modivPane'), "display", "block"); findRelatedRecords(results); } if (resultCount === 0) { dojo.style(dojo.byId('modivPane'), "display", "none"); dom.byId("ParcelInfo").innerHTML = "No Record Found
"; } else { map.graphics.clear(); dom.byId("ParcelInfo").innerHTML = resultItems.join(""); highlightParcel(results); }}//Zoom to Result & Set Query Result Symbolfunction highlightParcel(results) { var parcelGraphic = results.features[0]; parcelGraphic.setSymbol(highlightSymbol); map.graphics.add(parcelGraphic); var resultExtent = graphicsUtils.graphicsExtent(results.features); map.setExtent(resultExtent.expand(2)); console.log('Parcel Extent!');}//Query related recordsfunction findRelatedRecords(results) { dojo.style(dojo.byId('modivPane'), "display", "block"); var features = results.features; var relatedTopsQuery = new RelationshipQuery(); relatedTopsQuery.outFields = ["OBJECTID", "MUNI", "COUNTY", "QUALIFIER", "PROP_CLASS", "PROP_LOC", "OWNER", "LAND_VALUE"]; relatedTopsQuery.relationshipId = 0; relatedTopsQuery.objectIds = [features[0].attributes.OBJECTID]; parcels.queryRelatedFeatures(relatedTopsQuery, function (relatedRecords) { try{ var fset = relatedRecords[features[0].attributes.OBJECTID]; console.log("fset: ", fset); var relatedItems = []; var relatedCount = fset.features.length; console.log("Related Record Count: ",relatedCount); for (var i = 0; i < relatedCount; i++) { var items = fset.features.attributes; for (var attr in items) { relatedItems.push("" + attr + ": " + items[attr] + "
"); } dom.byId("modivInfo").innerHTML = relatedItems.join(""); } if(relatedCount > 1){ var recordCount = " (" + relatedCount + " Records Found)"; dom.byId("RecordCount").innerHTML = recordCount; }else{ dom.byId("RecordCount").innerHTML = " (1 Record Found)"; } } catch(err){ dom.byId("RecordCount").innerHTML = ""; dom.byId("modivInfo").innerHTML = "No Record Found
"; } });}//Reset buttonon(dom.byId("reset"), "click", reset);function reset() { console.log("Reset Function Called"); dijit.byId("muniSelect").reset(); dijit.byId("block").reset(); dijit.byId("lot").reset(); dojo.style(dojo.byId('MuniPane'), "display", "none"); dojo.style(dojo.byId('ParcelPane'), "display", "none"); dojo.style(dojo.byId('modivPane'), "display", "none"); map.graphics.clear(); map.setExtent(initialExtent); console.log("Reset Function Complete");}//map loading animationvar mapLoading = dom.byId("map-loading");map.on("update-start", function () { esri.show(mapLoading);});map.on("update-end", function () { esri.hide(mapLoading);});});
أكثر...