GeoForm- Geolocate a Field

2373
4
12-10-2015 09:24 AM
RickeyFight
MVP Regular Contributor

I am trying to link a field to the map in geoform.

The goal is to have when a user types in the address in the field for location a point is created on the map for that location. That way it save time for the person entering the form by not having to type in the address twice.

Field Entry

Point created

0 Kudos
4 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Rickey,

  So you are wanting to take the address entered in the from and automatically use the search widget to search from that address?

Search | API Reference | ArcGIS API for JavaScript | Search method

RickeyFight
MVP Regular Contributor

Yes, I guess that is what I want to do.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Rickey,

  Here is a sample that demos programmatically searching using the search widget.

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--The viewport meta tag is used to improve the presentation and behavior of the samples
  on iOS devices-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>ArcGIS API for JavaScript | Search widget with multiple sources</title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
  <style>
    html,
    body,
    #map {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    #search {
       display: block;
       position: absolute;
       z-index: 2;
       top: 20px;
       left: 74px;
    }

    .searchResultsMenu {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        display: block;
        float: left;
        padding: 5px 0;
        margin: 2px 0 0;
        font-size: 14px;
        line-height: 16px;
        background-color: #fff;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        border: 1px solid #57585A;
        -webkit-border-radius: 4px;
        border-radius: 4px;
        overflow: auto;
        max-height: 300px;
    }
  </style>

  <script src="http://js.arcgis.com/3.14/"></script>
  <script>
    require([
      "esri/map",
      "esri/dijit/Search",
      "esri/layers/FeatureLayer",
      "esri/InfoTemplate",
      "esri/SpatialReference",
      "esri/geometry/Extent",
      "dojo/i18n!esri/nls/jsapi",
      "esri/tasks/locator",
      "esri/symbols/PictureMarkerSymbol",
      "dijit/Menu",
      "dijit/MenuItem",
      "dojo/dom-class",
      "dojo/dom-style",
      "dojo/_base/lang",
      "dojo/query",
      "dojo/domReady!"
      ], function (
      Map,
      Search,
      FeatureLayer,
      InfoTemplate,
      SpatialReference,
      Extent,
      esriBundle,
      Locator,
      PictureMarkerSymbol,
      Menu,
      MenuItem,
      domClass,
      domStyle,
      lang,
      query
      ) {

      var map = new Map("map", {
        basemap: "gray",
        center: [-97, 38], // lon, lat
        zoom: 5
      });

      var s = new Search({
        enableButtonMode: false, //this enables the search widget to display as a single button
        enableLabel: false,
        enableInfoWindow: true,
        showInfoWindowOnSelect: false,
        enableSourcesMenu: true,
        enableSuggestionsMenu: true,
        autoSelect: true,
        map: map
      }, "search");

      var sources = s.get("sources");

      sources.push({
        locator: new Locator("//geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"),
        singleLineFieldName: "SingleLine",
        outFields: ["Addr_type"],
        name: esriBundle.widgets.Search.main.esriLocatorName,
        localSearchOptions: {
          minScale: 300000,
          distance: 50000
        },
        placeholder: esriBundle.widgets.Search.main.placeholder,
        highlightSymbol: new PictureMarkerSymbol(this.basePath + "/images/search-pointer.png", 36, 36).setOffset(9, 18)
      });

      //Set the sources above to the search widget
      s.set("sources", sources);
      s.startup();
      s.on('load', function(){
/*This is how you would set the text in the search widget and execute the search from code*/
        s.set("value", "Redlands, CA");
        s.search().then(function(response){
          console.log(response);
        });
      });


    });
  </script>
</head>

<body>
  <div id="search"></div>
  <div id="map"></div>
</body>

</html>
ChristinaLindsay
New Contributor II

Is there a way to do this without using computer programming and by just using the "Configure App"?

0 Kudos