Using ArcGIS js How to set search widget to use map popup

2403
2
Jump to solution
10-02-2015 07:05 AM
MeganWirth
Occasional Contributor

Hello,

I am trying to get the search widget to use the maps predefined popup instead of a info window. Any help will appreciated.

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Ryan,

I know this thread is old but here is a sample that does that.

<!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>Search with Suggestion Template</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.16/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;
    }
  </style>
    <script src="https://js.arcgis.com/3.16/"></script>
  <script>

    require([
        "esri/map", "esri/dijit/Search", "esri/layers/FeatureLayer",  "esri/InfoTemplate", "dojo/on", "dojo/_base/lang", "dojo/domReady!"
      ], function (Map, Search, FeatureLayer,InfoTemplate, on, lang) {
      var map = new Map("map", {
        basemap: "streets",
        center: [-82.93, 42.5], // lon, lat
        zoom: 10
      });
      var fl = new FeatureLayer("https://services.arcgis.com/b6gLrKHqgkQb393u/arcgis/rest/services/TaxParcelQuery/FeatureServer/0", {
        outFields: ["*"],
        infoTemplate: new InfoTemplate("Parcels", "Owner name: ${OWNERNME1}</br>Parcel ID: ${PARCELID}</br>Site address: ${SITEADDRESS}")
      });
      map.addLayers([fl]);

      var search = new Search({
        map: map,
        allPlaceholder: "1627 S Hill Blvd, Bloomfield Twp, Michigan, USA",
        enableInfoWindow: false
      }, "search");

      on(search,'select-result', function(e) {
        console.info(e);
        // Once we have the "mapPoint" object we convert it to a "screenPoint" object
        on.once(map, 'update-end',lang.hitch(this, function(){
          var mpPt = e.result.feature.geometry;
          var scrPt = map.toScreen(mpPt);
          map.emit("click", { bubbles: true, cancelable: true, screenPoint: scrPt, mapPoint: mpPt });
        }));
      });

      search.startup();
    });
  </script>
</head>

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

</html>

View solution in original post

2 Replies
RobertScheitlin__GISP
MVP Emeritus

Ryan,

I know this thread is old but here is a sample that does that.

<!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>Search with Suggestion Template</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.16/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;
    }
  </style>
    <script src="https://js.arcgis.com/3.16/"></script>
  <script>

    require([
        "esri/map", "esri/dijit/Search", "esri/layers/FeatureLayer",  "esri/InfoTemplate", "dojo/on", "dojo/_base/lang", "dojo/domReady!"
      ], function (Map, Search, FeatureLayer,InfoTemplate, on, lang) {
      var map = new Map("map", {
        basemap: "streets",
        center: [-82.93, 42.5], // lon, lat
        zoom: 10
      });
      var fl = new FeatureLayer("https://services.arcgis.com/b6gLrKHqgkQb393u/arcgis/rest/services/TaxParcelQuery/FeatureServer/0", {
        outFields: ["*"],
        infoTemplate: new InfoTemplate("Parcels", "Owner name: ${OWNERNME1}</br>Parcel ID: ${PARCELID}</br>Site address: ${SITEADDRESS}")
      });
      map.addLayers([fl]);

      var search = new Search({
        map: map,
        allPlaceholder: "1627 S Hill Blvd, Bloomfield Twp, Michigan, USA",
        enableInfoWindow: false
      }, "search");

      on(search,'select-result', function(e) {
        console.info(e);
        // Once we have the "mapPoint" object we convert it to a "screenPoint" object
        on.once(map, 'update-end',lang.hitch(this, function(){
          var mpPt = e.result.feature.geometry;
          var scrPt = map.toScreen(mpPt);
          map.emit("click", { bubbles: true, cancelable: true, screenPoint: scrPt, mapPoint: mpPt });
        }));
      });

      search.startup();
    });
  </script>
</head>

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

</html>
MeganWirth
Occasional Contributor

Thanks Robert. You rule!

0 Kudos