Geoprocessing Tool Link in Popup Question

LloydBronn · ‎01-05-2017

This example GP tool in popup uses an ArcGIS Online map and the popup only comes up when clicking on specific features from that map. I just want to have a basic map with no features, click on any point on the map, grab the x/y coordinates and use those as inputs for a geoprocessing tool that returns a chart. I've modified this example get x/y on mouse click to return lat/lon coordinates and display them.

I'd like to be able to combine these two examples and have the popup display the coordinates and a link to one or more GP tools to return charts to the user. Has anyone used the GP tool in popup example in a similar way? Does this only work with ArcGIS online maps? I've tried to replace the map ID with a basic map div but it hasn't worked.

KellyHutchins · ‎01-06-2017

The trick is to associate your graphic with the info window. Doing this adds the action pane (this is where the zoom link shows up). Once the action pane exists you can add your additional link to that area. Here's some code showing how this would work.

<!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>Get Map Coordinates</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
    <style>
      html, body, #mapDiv {
        padding: 0;
        margin: 0;
        height: 100%;
      }
      #messages{
        background-color: #fff;
        box-shadow: 0 0 5px #888;
        font-size: 1.1em;
        max-width: 15em;
        padding: 0.5em;
        position: absolute;
        right: 20px;
        top: 20px;
        z-index: 40;
      }
    </style>
    <script src="https://js.arcgis.com/3.18/"></script>
    <script>
      require([
        "esri/map",
        "esri/graphic", "esri/InfoTemplate", "dojo/dom", "dojo/query", "dojo/on", "dojo/dom-construct", "dojo/domReady!"
      ], function(
        Map,
        Graphic, InfoTemplate, dom, query,on, domConstruct
      ) {
        var map = new Map("mapDiv", {
          basemap: "streets",
          center: [-95.249, 38.954],
          zoom: 14,
          slider: false
        });


        map.on("click", function(evt){
          map.graphics.clear();
          var graphic = new Graphic(evt.mapPoint);

          map.graphics.add(graphic);
          map.infoWindow.setFeatures([graphic]);

          map.infoWindow.setContent("X: " + evt.mapPoint.x.toString() + ", <br>Y: " + evt.mapPoint.y.toString());
          map.infoWindow.show(evt.mapPoint)
        });

          var link = domConstruct.create("a",{
                "class": "action", 
                "id": "statsLink",
                "innerHTML": "Test Link", //text that appears in the popup for the link 
                "href": "javascript: void(0);"
              }, query(".actionList", map.infoWindow.domNode)[0]);
          on(link, "click", doSomething);

        function doSomething(evt){
          var feature = map.infoWindow.getSelectedFeature();
          console.log(feature.geometry.x, feature.geometry.y);
        }

      });
    </script>
  </head>

  <body>
    <div id="mapDiv"></div>
  </body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

KellyHutchins · ‎01-06-2017

The trick is to associate your graphic with the info window. Doing this adds the action pane (this is where the zoom link shows up). Once the action pane exists you can add your additional link to that area. Here's some code showing how this would work.

<!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>Get Map Coordinates</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
    <style>
      html, body, #mapDiv {
        padding: 0;
        margin: 0;
        height: 100%;
      }
      #messages{
        background-color: #fff;
        box-shadow: 0 0 5px #888;
        font-size: 1.1em;
        max-width: 15em;
        padding: 0.5em;
        position: absolute;
        right: 20px;
        top: 20px;
        z-index: 40;
      }
    </style>
    <script src="https://js.arcgis.com/3.18/"></script>
    <script>
      require([
        "esri/map",
        "esri/graphic", "esri/InfoTemplate", "dojo/dom", "dojo/query", "dojo/on", "dojo/dom-construct", "dojo/domReady!"
      ], function(
        Map,
        Graphic, InfoTemplate, dom, query,on, domConstruct
      ) {
        var map = new Map("mapDiv", {
          basemap: "streets",
          center: [-95.249, 38.954],
          zoom: 14,
          slider: false
        });


        map.on("click", function(evt){
          map.graphics.clear();
          var graphic = new Graphic(evt.mapPoint);

          map.graphics.add(graphic);
          map.infoWindow.setFeatures([graphic]);

          map.infoWindow.setContent("X: " + evt.mapPoint.x.toString() + ", <br>Y: " + evt.mapPoint.y.toString());
          map.infoWindow.show(evt.mapPoint)
        });

          var link = domConstruct.create("a",{
                "class": "action", 
                "id": "statsLink",
                "innerHTML": "Test Link", //text that appears in the popup for the link 
                "href": "javascript: void(0);"
              }, query(".actionList", map.infoWindow.domNode)[0]);
          on(link, "click", doSomething);

        function doSomething(evt){
          var feature = map.infoWindow.getSelectedFeature();
          console.log(feature.geometry.x, feature.geometry.y);
        }

      });
    </script>
  </head>

  <body>
    <div id="mapDiv"></div>
  </body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

LloydBronn · ‎01-09-2017

Thanks!