Latest Contributions by ChrisRomsos

‎04-22-2015

Update: Using the Java Console it looks like on the page load everything I set in my map functions is correct or maintained for each Content Pane. When I toggle to an alternate tab I can see the zoom level change in the console! So, the expected or correct values are changed when I change the focus to the other content panes. After than I can move about among the tabs and return to a tab and the map is centered and zoomed to where I left it. Chris

‎04-22-2015

Well, first off... Apologies for the broken link. I forgot to change a firewall rule so anyone who tried the link couldn't see the site. Next, I scrapped most of what I had, took a look at the example provided for "layout_MapContainerSplitLeft". Realized that I didn't need to load multiple versions of dojo and rename any namespaces. I just needed to start over, fix some css and do a bit more research on each piece I was trying to implement. So, My application is working much better now. I can almost go back to developing content! One thing that has me scratching my head is this: I have a TabContainer located in the center region. The TabContainer includes 4 "tabs", each a ContentPane. So, roughly.. <div data-dojo-type="dijit/layout/TabConainer"> <div id="map1" data-dojo-type="dijit/layout/CotentPane"></div> <div id="map2" data-dojo-type="dijit/layout/CotentPane"></div> <div id="map3" data-dojo-type="dijit/layout/CotentPane"></div> <div id="map4" data-dojo-type="dijit/layout/CotentPane"></div> </div> I add a map to each ContentPane using dojo.ready(init1) where init1 (2,3,4) is my function specifying the map, center, zoom level, basemaps, dynamic layers, etc. When the page loads I get what is expected for the first tab. However, when I select any other tab (2,3, or 4) I get the new map with the correct basemap & dynamic layers but I don't get the expected ZOOM level or the expected extent/center. Am I missing something relate to how the maps are added to the ContentPanes? Each tab should have a map at the same zoom level and centered on the same location. This link should work now. Sorry for the oversight earlier. http://talon.coas.oregonstate.edu/demo/atlas.html To summarize: When the page loads the focus appears to be on the first tab and the map loads as expected (centered off the Olympic Coast of Washington State). Toggling to other tabs centers the new maps to a new location and sets the zoom level to REALLY REALLY zoomed in. Also, the new and incorrect centers and zoom levels seem to be consistent. I can reload the page and I know where the other tabs will center and zoom in to before I click them. Why do my specified zoom levels and map centers seem to be ignored or modified when I select a new tab? Thanks, Chris

‎04-20-2015

A copy of my html and js follows. <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <title>Demo: OCNMS Atlas Layout with Dijit</title> <link rel="stylesheet" href="http://talon.coas.oregonstate.edu/demo/style.css" media="screen"> <link rel="stylesheet" href="https://community.esri.com//ajax.googleapis.com/ajax/libs/dojo/1.8.0/dijit/themes/claro/claro.css" media="screen">  <script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/dojo.js" data-dojo-config="async:true, parseOnLoad:true"></script>  <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css" /> <script type = "text/javascript"> djConfig = { scopeMap: [ [ "dojo", "esriDojo" ], [ "dijit", "esriDijit" ], [ "dojox", "esriDojox" ] ] }; </script> <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script> <script type="text/javascript" src="http://talon.coas.oregonstate.edu/demo/atlas.js"></script> <script> djConfig = dojo.config; esriDojo.require("esri.map","esri.layers.agsdynamic","esri.toolbars.navigation"); dojo.require("dijit.layout.ContentPane"); </script> </head> <body class="claro"> <div id="appLayout" class="demoLayout" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'headline'"> <div id="myTabs" class="MapArea" data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region: 'center', tabPosition: 'bottom'"> <div id="map1" style="width:100%; height:1000px; border:1px solid #000;" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title: 'Seabed Habitats'"> </div> <div id="map2" style="width:100%; height:1000px; border:1px solid #000;" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title: 'Seabed Imagery'"> </div> <div id="map3" style="width:100%; height:1000px; border:1px solid #000;" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title: 'Bathymetry'"> </div> <div id="map4" style="width:100%; height:1000px; border:1px solid #000;" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title: 'Structure'"> </div> </div> <div id="edge1" class="edgePanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'top'">Header content (top) </div> <div id="leftCol" class="edgePanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'left', splitter: true" href="content.html"> </div> </body> </html> *********************JavaScript Below *********************** require(["dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/TabContainer", "dijit/layout/ContentPane", "dojo/html", "dojo/dom", "dojo/on", "dojo/domReady!", "dojo", "dijit/registry"], function(parser,BorderContainer,TabContainer,ContentPane,html,dom,on,domReady,dojo,registry){ dojo.subscribe("myTabs-selectChild", function(selected){ if(selected.title == "Seabed Habitats"){ var node = dojo.byId("leftCol").innerHTML = "Seabed Habitats Narrative" //var cPane = registry.byId("leftCol"); //cPane.attr("href", "content2.html") //cPane.refresh() } if(selected.title == "Seabed Imagery"){ var node = dojo.byId("leftCol").innerHTML = "Seabed Imagery Narrative" } if(selected.title == "Bathymetry"){ var node = dojo.byId("leftCol").innerHTML = "Bathymetry Narrative" } if(selected.title == "Structure"){ var node = dojo.byId("leftCol").innerHTML = "Structure Narrative" } console.log(selected.title); }); }); function init1() { var extent = new esri.geometry.Extent(-126.5,47.00,-123.0,48.65, new esri.SpatialReference({wkid:4326})); var map1 = new esri.Map("map1", {extent:esri.geometry.geographicToWebMercator(extent)}); var tiledMapServiceLayer1 = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer"); var overlayHabitats = new esri.layers.ArcGISDynamicMapServiceLayer("http://bhc.coas.oregonstate.edu/arcgis/rest/services/2014_BOEM/Seafloor_Induration_WA_OR_NCA/MapServer"); map1.addLayers([tiledMapServiceLayer1, overlayHabitats]); map1.showZoomSlider() }; function init2() { var extent = new esri.geometry.Extent(-126.5,47.00,-123.0,48.65, new esri.SpatialReference({wkid:4326})); var map2 = new esri.Map("map2", {extent:esri.geometry.geographicToWebMercator(extent)}); var tiledMapServiceLayer2 = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer"); map2.addLayer(tiledMapServiceLayer2); }; function init3() { var extent = new esri.geometry.Extent(-126.5,47.00,-123.0,48.65, new esri.SpatialReference({wkid:4326})); var map3 = new esri.Map("map3", {extent:esri.geometry.geographicToWebMercator(extent)}); var tiledMapServiceLayer3 = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer"); map3.addLayer(tiledMapServiceLayer3); }; function init4() { var extent = new esri.geometry.Extent(-126.5,47.00,-123.0,48.65, new esri.SpatialReference({wkid:4326})); var map4 = new esri.Map("map4", {extent:esri.geometry.geographicToWebMercator(extent)}); var tiledMapServiceLayer4 = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer"); map4.addLayer(tiledMapServiceLayer4); }; esriDojo.addOnLoad(init1); esriDojo.addOnLoad(init2); esriDojo.addOnLoad(init3); esriDojo.addOnLoad(init4);

‎04-20-2015

Hi, I've been trying to implement a few maps within a tabbed dojo layout (TabContainer & ContentPane(s)). So far I've got this much working: http://talon.coas.oregonstate.edu/demo/atlas.html I ran into some issues where the ESRI JSAPI didn't include features I needed or desired for the tabbed layout. So the instructions at Rename Dojo namespace | ArcGIS API for JavaScript helped quite a bit. However, a few issues I'm up against now: 1) zoom sliders won't show 2) can't add more than one map layer (have tried addLayers() method with no luck). Any thoughts?

‎03-06-2015

Thanks. - Chris

‎03-06-2015

Thanks Robert, I tried to implement your suggestion above here: PASTA However the previous map layer remains. I'll post my javascript below. var app; require([ "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/dijit/BasemapToggle", "dojo/on", "dojo/parser", "esri/tasks/Geoprocessor", "dojo/dom", "dijit/layout/BorderContainer", "dijit/form/Button", "dojo/domReady!", "dijit/form/HorizontalSlider", "dijit/form/HorizontalRuleLabels", "dijit/form/HorizontalRule" ], function (Map,ArcGISDynamicMapServiceLayer,BasemapToggle,on,parser,Geoprocessor,dom,HorizontalSlider,HorizontalRuleLabels,HorizontalRule) { parser.parse(); map = new Map("map", { basemap: "topo", center: [-124.5, 44.15], zoom: 8 }); var toggle = new BasemapToggle({ map: map, basemap: "satellite" }, "BasemapToggle"); toggle.startup(); // Make 2 Horizontal Sliders Programatically // Create the rules var rulesNode = dojo.create( "div", {}, dojo.byId("horizSlider"), "first"); var sliderRules = new dijit.form.HorizontalRule({ container: "bottomDecoration", count: 11, style: "width: 5px;" }, rulesNode); var rulesNode2 = dojo.create( "div", {}, dojo.byId("horizSlider2"), "first"); var sliderRules2 = new dijit.form.HorizontalRule({ container: "bottomDecoration", count: 11, style: "width: 5px;" }, rulesNode); // Create the labels var labelsNode = dojo.create( "div", {}, dojo.byId("horizSlider"), "first"); var sliderLabels = new dijit.form.HorizontalRuleLabels({ container: "topDecoration", labelStyle: "font-style: italic; font-size: 0.75em" }, labelsNode); var labelsNode2 = dojo.create( "div", {}, dojo.byId("horizSlider2"), "first"); var sliderLabels2 = new dijit.form.HorizontalRuleLabels({ container: "topDecoration", labelStyle: "font-style: italic; font-size: 0.75em" }, labelsNode); // Create the sliders var horizSlider = new dijit.form.HorizontalSlider({ minimum: 0, maximum: 1, pageIncrement: .20, value: .20, intermediateChanges: true, style: "height: 200px;" }, "horizSlider"); var horizSlider2 = new dijit.form.HorizontalSlider({ minimum: 0, maximum: 1, pageIncrement: .20, value: .20, intermediateChanges: true, style: "height: 200px;" }, "horizSlider2"); // Start up the widgets horizSlider.startup(); //horizSlider2.startup(); sliderRules.startup(); //sliderRules2.startup(); sliderLabels.startup(); //sliderLabels2.startup(); var horizLabel = dojo.byId("horizValue"); var horizLabel2 = dojo.byId("horizValue2"); function updateHorizontalLabel() { // Update label horizLabel.innerHTML = horizSlider.get("value"); } function updateHorizontalLabel2() { // Update label horizLabel2.innerHTML = horizSlider2.get("value"); } dojo.connect(horizSlider,"onChange",updateHorizontalLabel); // Update label right away updateHorizontalLabel(); dojo.connect(horizSlider2,"onChange",updateHorizontalLabel2); // Update label right away updateHorizontalLabel2(); var weightedValue1 = dojo.byId("WeightedValueValue1"); var weightedValue2 = dojo.byId("WeightedValueValue2"); var Weight1; var Weight2; function updateWeighting() { // Update weighting calculations var weightSum = horizSlider.get("value")+horizSlider2.get("value"); var weightFactor = 1/weightSum; weightedValue1.innerHTML = horizSlider.get("value")*weightFactor; weightedValue2.innerHTML = horizSlider2.get("value")*weightFactor; Weight1 = horizSlider.get("value")*weightFactor; Weight2 = horizSlider2.get("value")*weightFactor; } dojo.connect(horizSlider,"onChange",updateWeighting); // Update the weighting right away updateWeighting(); dojo.connect(horizSlider2,"onChange",updateWeighting); // Update the weighting right away updateWeighting(); // Geoprocessing /* Step 1: Initialize Geoprocessing Task as a global variable. That is, declare the variable outside a function definition since we will be using gpTask variable in other methods */ var gpTaskUrl="http://bhc.coas.oregonstate.edu:6080/arcgis/rest/services/geoprocessing/WeightedSum/GPServer/WeightedSum"; var gpTask = new Geoprocessor(gpTaskUrl); // Set output spatial reference property to map's spatial reference. // myMap is assumed to be an instance of map container esri.map. gpTask.outSpatialReference=map.spatialReference; on(dom.byId("hotspotButton"), "click", myGPSubmitJob); //Step 3: Run the task function myGPSubmitJob(n){ // Get the input rasters var Raster1 = "Midwater Device\\Initial\\suitability"; var Raster2 = "Cetaceans\\Initial\\suitability"; var params= {"Raster1":Raster1, "Weight1":Weight1, "Raster2":Raster2, "Weight2":Weight2}; // Setup event handlers. dojo.connect(gpTask, "onJobComplete",onTaskComplete); dojo.connect(gpTask, "onError",onTaskFailure); dojo.connect(gpTask, "onStatusUpdate",onTaskStatus); gpTask.submitJob(params); } // On Job Complete Callback add a dynamic map service using ResultMapService function onTaskComplete(jobInfo, gpResultLayerPrevious){ if(gpResultLayer){ map.removeLayer(gpResultLayer); } //replace mapservice url with your url and append jobid var mapurl = "http://bhc.coas.oregonstate.edu:6080/arcgis/rest/services/geoprocessing/WeightedSum/MapServer/jobs/" + jobInfo.jobId; //create a dynamic map service var gpResultLayer = new esri.layers.ArcGISDynamicMapServiceLayer(mapurl, { id: "WeightedSum", opacity: 0.5 }); //remove any existing model results and add new model result to the web application. map.addLayer(gpResultLayer); // reset the gpResultlayerPrevious gpResultLayerPrevious = gpResultLayer; } // Event handler for onStatusUpdate event function onTaskStatus(jobInfo) { //write status to console to help debugging console.log(jobInfo.jobStatus); } // Event handler for onError event function onTaskFailure(error) { // Report error alert("Error:"+ error); } app = { myGPSubmitJob: myGPSubmitJob, gpResultLayer: null }; });

‎03-05-2015

Hi, Last week the GeoNet community helped me get my fist web map application functioning! Ive made a bit of progress since and find myself up against the limits of my javascript skill again. I've got an app that calls a geoprocessing service and returns a map result. It works as intended, once. When I fire off a subsequent SubmitJob the new map layer is drawn underneath the existing layer (I presume it's drawn underneath because I don't see it). So, seems that I could have the new layer draw on top using an index value but I'd rather just remove the layer and replace it with the new layer. The function to add the layer looks like this: // On Job Complete Callback add a dynamic map service using ResultMapService function onTaskComplete(jobInfo, n){ //replace mapservice url with your url and append jobid var mapurl = "http://bhc.coas.oregonstate.edu:6080/arcgis/rest/services/geoprocessing/WeightedSum/MapServer/jobs/" + jobInfo.jobId; //create a dynamic map service var gpResultLayer = new esri.layers.ArcGISDynamicMapServiceLayer(mapurl, { id: "WeightedSum", opacity: 0.5 }); //remove any existing model results and add new model result to the web application. map.addLayer(gpResultLayer, n); } I think I'd like to "remember" or return the gpResultLayer from this function such that the next time it executes I can add a map.removeLayer(gpResultLayerPrevious) before adding the new layer. I tried adding: var gpResultLayerPrevious = gpResultLayer and map.removeLayer(gpResultLayerPrevious) to the above function but I think I need to make sure it gets returned from the function then passed in each time. Any suggestions to how this might work? Thanks, Chris

‎02-25-2015

I'll give it a try. thanks Tim. -Chris

‎02-25-2015

Oops, itchy trigger finger. I should have added that the PROBLEM I'm having is that I don't really understand how to have the button run the geoprocessing task and return the result. I suspect I've either messed that up or improperly specified the inputs to the geoprocessing task. Thanks

‎02-25-2015

Hi, I'm a novice web developer and have run into a snag and am not sure how to proceed. Objective: create a simple web viewer using the javascript API for arc gis server. Create a button in the application that triggers an asynchronous geoprocessing service and adds the output as a dynamic map layer. Progress: Using the example code on the ESRI webpages I quickly re-deployed the basic js example of a web app that loads a dynamic map service. Next, I read the online help related to using a geoprocessing service in a web app and displaying the results here. ArcGIS Help 10.1 ‌"using" and here ArcGIS Help 10.1 "displaying" Note: the geoprocessing service works when I test it from arcmap etc. I'm not sure if I should post code directly to this message or not, so instead I'll put a link to the site. Then view source should reveal the code. Link to non functional app Thanks, Chris

Online Status	Offline
Date Last Visited	‎11-11-2020 02:24 AM

My Ideas

Latest Contributions by ChrisRomsos

Re: JSAPI, rename Dojo namespace, questions

Re: JSAPI, rename Dojo namespace, questions

Re: JSAPI, rename Dojo namespace, questions

JSAPI, rename Dojo namespace, questions

Re: Remove a map layer

Re: Remove a map layer

Remove a map layer

Re: First attempt at using a geoprocessing service in a js web app

Re: First attempt at using a geoprocessing service in a js web app

First attempt at using a geoprocessing service in a js web app