Identify areas within HYCOM app that need to be switched out with CERES Image Service and processing templates.

Deploy the app

Do the following to deploy the app on your server:

    1. Unzip the downloaded app.
    2. Deploy it on your web server.
    3. Browse to the directory where the app from step 2 is locally hosted and open the app config.json file.
    4. Add a proxy to your app. Refer to Use proxy for details.
      *Important: Make sure that the proxy applied to your app works as expected. The map or widgets might fail if the proxy is set inappropriately.(Running into issue here).
    5. Add and register the app. Refer to  Add apps  and Register your app for details.
    6. Copy and paste the AppID to the appId property in the config.json file.
      Note: Skip step 5 and 6 if the app connects to a web-tire authenticated portal.
    7. Save the config.json file.
    8. View the locally hosted app in your browser.

Customize the app

Use the Import function in Developer Edition to import the downloaded ZIP file, then customize it in the builder.

Optionally, do the following to customize the application by editing JSON files directly:

  • Add custom widgets
    1. Put your custom widget in the widgets folder.
    2. Add widget into the app's config.json.
      The example below uses the Demo widget. Add it into the config.json file

      {
          "uri": "widgets/Demo/Widget"
      },

  • Configure the app and widgets. Refer to JSON configuration reference.
  • Reference preferred ArcGIS API for JavaScript. Refer to Change URL of ArcGIS API for JavaScript.

Services need to be changed 

  • Identify> config_Identify.json

 "urlms" : "https://landsat2.arcgis.com/arcgis/rest/services/Landsat/MS/ImageServer",

 "urlLandsatPS": "https://landsat2.arcgis.com/arcgis/rest/services/Landsat/PS/ImageServer",

  "urlLandsatPan" : "https://landsat2.arcgis.com/arcgis/rest/services/Landsat/Pan/ImageServer"}


"uvUrl": https://utility.arcgis.com/usrsvcs/servers/0ac71a7f6d5843c889788e87f185caf1/rest/services/HYCOM_UV/ImageServer


  • Configs>ISTimeFilter> config_Time.json

"hycomUrl" : "https://utility.arcgis.com/usrsvcs/servers/dad1b980b240496a96fa0ef3d64a1634/rest/services/HYCOM/ImageServer",

     "uvUrl": "https://utility.arcgis.com/usrsvcs/servers/0ac71a7f6d5843c889788e87f185caf1/rest/services/HYCOM_UV/ImageServer",


"uvUrl": "https://utility.arcgis.com/usrsvcs/servers/0ac71a7f6d5843c889788e87f185caf1/rest/services/HYCOM_UV/ImageServer",

  • Islayer>Widget.JS

postCreate: function () {

                    window.addEventListener("resize", lang.hitch(this, function () {


                        if (registry.byId("oceanCurrentsDialog").open)

                            var tempDialog = "oceanCurrentsDialog";

                        else if (registry.byId("overlayLayerDialog").open)

                            var tempDialog = "overlayLayerDialog";

                        else if (registry.byId("timeDialog") && registry.byId("timeDialog").open)

                            var tempDialog = "timeDialog";

                        else if (registry.byId("maskDialog") && registry.byId("maskDialog").open)

                            var tempDialog = "maskDialog";

                        else if (registry.byId("Add Data from ArcGIS Online") && registry.byId("Add Data from ArcGIS Online").open)

                            var tempDialog = "Add Data from ArcGIS Online";

                        else if (pm.getPanelById("_22_panel") && pm.getPanelById("_22_panel").state === "opened")

                            var tempDialog = "About";

                        if (tempDialog) {

                            domStyle.set(tempDialog, "left", "160px");

                            domStyle.set(tempDialog, "top", "100px");

                    var loadlayer = new ArcGISImageServiceLayer(this.config.hycomUrl, 


  • ISTimeFilter>Widgest.JS

this.hycomData is used

  • Legend>Widget.JS

if ((layerInfosParam[a].title).includes("World_Ocean_Reference")){


  • Mask>config.json

"hycomUrl": "https://utility.arcgis.com/usrsvcs/servers/dad1b980b240496a96fa0ef3d64a1634/rest/services/HYCOM/ImageServer",

    "Sea Water Temperature Celsius": "Water Temperature (Celsius)",

    "Sea Surface Elevation Meters": "Sea Surface Elevation (m)",

    "Sea Water Temperature Fahrenheit": "Water Temperature (Celsius)",

    "Sea Surface Elevation Feet": "Sea Surface Elevation (m)",

    "Eastward Sea Water Velocity (u)": "Eastward Sea Water Velocity (u)",

    "Northward Sea Water Velocity (v)": "Northward Sea Water Velocity (v)",

    "Sea Water Salinity": "Sea Water Salinity (PSS)",


url: this.config.hycomUrl + "/computehistograms",


  • Search>config.json

  "allPlaceholder": "Find a place",

  "showInfoWindowOnSelect": true,

 "sources": [

    {

      "url": "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer",


  • appinfo.json

  "name": "Landsat Explorer",

"description": "",

 "createdTime": "",

 "lastUpdated": "",

  "creator": "Esri"

}


Key Insights

  • *Retrieve point value only works when time selector is enabled*
  • *Secured web services provided by ArcGIS for Server and hosted services may be added as items to www.arcgis.com. If the option to store user login credentials is selected when adding an item, the item URL is updated to reference utility.arcgis.com.
    When secured service credentials are stored with the item on www.arcgis.com, a proxy application is leveraged on the utility.arcgis.com server cluster. This proxy assists with dynamically generating a short lived token to allow user access to the secured resource without the need to interactively pass user credentials.*

          Ex.  "hycomUrl": "https://utility.arcgis.com/usrsvcs/servers/dad1b980b240496a96fa0ef3d64a1634/rest/services/HYCOM/ImageServer

          "uvUrl": https://utility.arcgis.com/usrsvcs/servers/0ac71a7f6d5843c889788e87f185caf1/rest/services/HYCOM_UV/ImageServer

  • hycomData is used in the Depth Widget, Timefilter, and ISlayer
  • Charting functionality is written into the ISTimeFilter widget.js file