nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Hello,

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

Finde mehr Beiträge mit dem Tag

Accepted answers

RobertScheitlin__GISP

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>

All comments

RobertScheitlin__GISP

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>

Thanks Robert. You rule!

Nimm an der Diskussion teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.