AnsweredAssumed Answered

use popup template in searchwidget geocoder

Question asked by Henseki on Aug 16, 2017

Hi All,

 

I do have a popup template that works in my search sources, however, would like to use the same template in the search default source, not able to so far.

 

I want to be able to have the same popup template in this code at the moment, its using a default template which works, but I want like to have a new popup template like the other sources. At the moment not able to any help please.

The function is to click on anywhere in the mapdiv and it returns addresses and x y coordinates as a popup

 

function showPopup(address, pt) {

    view.popup.open({
      title: "Find Address Result",
      content: address + "<br><br> Lat: " + Math.round(pt.latitude * 100000)/100000 + " Lon: " + Math.round(pt.longitude * 100000)/100000,
      location: pt,

 

   
    });

 

var search = new Search({
    view: view,
     activeSourceIndex:-1
  });
  search.defaultSource.withinViewEnabled = false; // Limit search to visible map area only
  view.ui.add(search, "top-right"); // Add to the map

  // Add the trailheads as a search source
  search.sources.push({
    featureLayer: trailsLayer,
     searchFields: ["UPRN", "ADDRESS" ],
  displayField: "ADDRESS",
  exactMatch: false,
  outFields: ["*"],
   resultGraphicEnabled: true,
    name: "Chelmsford Addresses",
  placeholder: "example:  CM2 0HU",
    
    popupTemplate: { // autocasts as new popupTemplate()
        title: "Chelmsford Addresses",
          content: [{
            type: "fields",
            fieldInfos: [{
              fieldName: "UPRN"
            }, {
              fieldName: "ADDRESS",
            },
            {
              fieldName: "LAT",
          },
           
            {
              fieldName: "LONG"
            }]
          }],
    
          actions: [{
            id: "find-brewery",
            image: "beer.png",
           title: "Get XY Cordinates"
          }]
       
       
     
     
      }
   
   
   
   
   
   
  });
     
  search.sources.push({
    featureLayer: trailsLayer2,
     searchFields:"LOCATION" ],
  displayField: "LOCATION",
  exactMatch: false,
  outFields: ["*"],
   resultGraphicEnabled: true,
    name: "Chelmsford Car Parks",
  placeholder: "example:  CM2 0HU",
    
      popupTemplate: { // autocasts as new popupTemplate()
      //  title: "Car Park </br>Location: {LOCATION}",
        title: "Chelmsford CarParks",
          content: [{
            type: "fields",
            fieldInfos: [{
              fieldName: "LOCATION"
            }]
          }],
     
              actions: [{
            id: "find-brewery",
            image: "beer.png",
            title: "Get xy cordinates"
          }]
     
     
     
     
     
     
     
     
     
        //overwriteActions: true
     
      }
   
 
  });
 
 
   search.sources.push({
    featureLayer: trailsLayer3,
     searchFields: ["WARD_N" ],
  displayField: "WARD_N",
  exactMatch: false,
  outFields: ["*"],
   resultGraphicEnabled: true,
    name: "Wards",
  placeholder: "example:  CM2 0HU",
    
   
   
   
    popupTemplate: { // autocasts as new popupTemplate()
        title: "Post Code: {Postcode}</br>UPRN: {UPRN}</br>ADDRESS: {ADDRESS}",
        overwriteActions: true
     
      }
  });
 
 
 
 
 
 
  // Find address
 
  function showPopup(address, pt) {
    view.popup.open({
      title: "Find Address Result",
      content: address + "<br><br> Lat: " + Math.round(pt.latitude * 100000)/100000 + " Lon: " + Math.round(pt.longitude * 100000)/100000,
      location: pt,

        actions: [{
            id: "find-brewery",
            image: "beer.png",
            title: "Get XY Cordinates"
          }]
    });
  }
 
  view.on("click", function(evt){
    search.clear();
    view.popup.clear();
    var locatorSource = search.defaultSource;
    locatorSource.locator.locationToAddress(evt.mapPoint)
      .then(function(response) {
        var address = response.address.Match_addr;
        // Show the address found
        showPopup(address, evt.mapPoint);
      }, function(err) {
        // Show no address found
        showPopup("No address found for this location.", evt.mapPoint);
      });
  });

});

 

Outcomes