Hide Table of Contents
View Message in a bottle sample in sandbox
Message in a bottle

Description

This sample uses a particle tracking model to show where a bottle would go after a specified number of days if you dropped it in the ocean. First, enter a number of days to track the bottle. Then click the button and draw a point somewhere in the ocean to start the model. In a few seconds you'll see a line appear depicting where the bottle would go.

To learn more about this model, see the Services Directory page for the ArcGIS Server geoprocessing task referenced in this sample: http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_Currents_World/GPServer/MessageInABottle. This page lists the model parameters and contains a Help URL where you can see how the model was created.

This sample uses a draw toolbar to help draw the point. The toolbar isn't a user interface component that you add to the page. Instead, it's a helper class that can draw certain types of geometries.

Code

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>ArcGIS Geoprocessing and ArcGIS Server JavaScript API</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.22/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri.css" />
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
    </style>

    <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="https://js.arcgis.com/3.22/"></script>
    <script>
      dojo.require("esri.map");
      dojo.require("esri.tasks.gp");
      dojo.require("esri.toolbars.draw");
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");

      var map, gp, toolbar;

      function init() {
        map = new esri.Map("map", {
          basemap: "satellite",
          center: [-43.682, 32.99],
          zoom: 3
        });

        //setup the geoprocessor task
        gp = new esri.tasks.Geoprocessor("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_Currents_World/GPServer/MessageInABottle");
        gp.setOutSpatialReference({wkid:102100});

        toolbar = new esri.toolbars.Draw(map);
        dojo.connect(toolbar, "onDrawEnd", executeParticleTrack);
      }

      function executeParticleTrack(geometry) {
        map.graphics.clear();

        var simplePictureMarkerSymbol = new esri.symbol.PictureMarkerSymbol('images/sailboat.png', 26, 26);
        var graphic = new esri.Graphic(geometry,simplePictureMarkerSymbol);
        map.graphics.add(graphic);

        toolbar.deactivate();

        var features= [];
        features.push(graphic);
        var featureSet = new esri.tasks.FeatureSet();
        featureSet.features = features;

        //set the input parameters.  View the task in the services explorer to see the input variables required to run the model.
        //see https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_Currents_World/GPServer/MessageInABottle
        var params = { "Input_Point":featureSet, "Days": dojo.byId("days").value };
        gp.execute(params, displayTrack);
      }

      function displayTrack(results, messages) {
        var simpleLineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,255,0]), 3);
        var features = results[0].value.features;

        dojo.forEach(features,function(feature){
          feature.setSymbol(simpleLineSymbol);
          map.graphics.add(feature);
        });
      }
      dojo.ready(init);
    </script>
  </head>
  <body class="claro">
  <div data-dojo-type="dijit.layout.BorderContainer"
       data-dojo-props="design:'sidebar', gutters:true"
       style="width:100%;height:100%;margin:0px;">

    <div data-dojo-type="dijit.layout.ContentPane"
         data-dojo-props="region:'left'"
         style="width:300px;">
      <ol>
        <li>Enter the number of days to track:<input type="text" id="days" value="180" size="3"/></li>
        <li>Click the  <button onclick="toolbar.activate(esri.toolbars.Draw.POINT);"> Execute</button> button. </li>
        <li>Click the map to specify the start point.</li>
      </ol>
      * Note that the start season is spring.
    </div>
    <div data-dojo-type="dijit.layout.ContentPane" id="map"
         data-dojo-props="region:'center'">
    </div>
  </div>
  </body>
</html>