topic HELP! SimpleFillSymbol and Search Widget modification in ArcGIS JavaScript Maps SDK Questions

HELP! SimpleFillSymbol and Search Widget modification

JamesFitzgerald — Sun, 12 Dec 2021 05:17:35 GMT

Hello,

I need direction. I want to modify Search using a suggestion template | ArcGIS API for JavaScript by incorporating the SimpleFillSymbol and SimpleLineSymbol. I feel I am close but still missing code. It will load but now the search box disappears. THANKS

var search = new Search({
        sources: [{          
                       
           featureLayer: new FeatureLayer("http://services.arcgis.com/HYLRafMc4Ux6DA8c/arcgis/rest/services/Parks_Search/FeatureServer/1", { 
             mode: FeatureLayer.MODE_ONDEMAND,           
             outFields: ["*"],                     
             infoTemplate: new InfoTemplate("Identify County Parks", 
             "Park Name: ${Name}</br>ParK Ownership: ${ParkType}</br>"), 
             
             sfs: new SimpleFillSymbol(SimpleFillSymbol.STYLE_Null, 
             new SimpleLineSymbol (SimpleLineSymbol.STYLE_SOLID, new Color([255,0,0]), 2), 
             new Color([255,255,0,0,0.5]))           
          }),
                    
      }],
        map: map
      },  "search");

      search.startup();
      
      }); 
      map.addLayer(featureLayer);

Re: HELP! SimpleFillSymbol and Search Widget modification

RobertScheitlin__GISP — Thu, 23 Jul 2015 14:09:59 GMT

James,

It sounds like you are having an issue with your requires and vars being out of order. Can you post your code?

Re: HELP! SimpleFillSymbol and Search Widget modification

JamesFitzgerald — Sun, 12 Dec 2021 05:17:38 GMT

<!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="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">
    <script src="http://js.arcgis.com/3.14/"></script>
  
  <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>     
   require(["esri/map","esri/geometry/Extent", "esri/layers/ArcGISTiledMapServiceLayer", "esri/dijit/Search",  "esri/layers/FeatureLayer",  
           "esri/InfoTemplate","esri/symbols/SimpleFillSymbol","esri/symbols/SimpleLineSymbol", "dojo/domReady!"], 
   function (Map, Extent,ArcGISTiledMapServiceLayer, Search,    FeatureLayer, InfoTemplate, SimpleFillSymbol, SimpleLineSymbol) {
      
      var map = new Map("map", {
        extent: new Extent({xmin: -9464867.586310409, ymin: 3988479.973394642, xmax: -9359211.763174301, ymax: 4048458.624373842,spatialReference: {wkid: 102100}})                
      });
      var basemap = new ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
        map.addLayer(basemap);
      
      var featureLayerParks = new FeatureLayer("http://services.arcgis.com/HYLRafMc4Ux6DA8c/arcgis/rest/services/Parks_Search/FeatureServer/1", {
         mode: FeatureLayer.MODE_ONDEMAND,
         opacity:.5,
         visible: FeatureLayer.isVisibleAtMapScale=true
         
        
      });
      
      map.addLayer(featureLayerParks);
      
      var search = new Search({
        sources: [{  
           sfs: new SimpleFillSymbol(SimpleFillSymbol.STYLE_Null, 
             new SimpleLineSymbol (SimpleLineSymbol.STYLE_SOLID, new Color([255,0,0]), 2), 
             new Color([255,255,0,0,0.5])),         
                       
           featureLayer: new FeatureLayer("http://services.arcgis.com/HYLRafMc4Ux6DA8c/arcgis/rest/services/Parks_Search/FeatureServer/1", { 
             mode: FeatureLayer.MODE_ONDEMAND,           
             outFields: ["*"],                     
             infoTemplate: new InfoTemplate("Identify County Parks", 
             "Park Name: ${Name}</br>ParK Ownership: ${ParkType}</br>"), 
             
                       
          }),
                    
      }],
        map: map
      },  "search");

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

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

</html>

Re: HELP! SimpleFillSymbol and Search Widget modification

RobertScheitlin__GISP — Thu, 23 Jul 2015 14:55:15 GMT

James,

you are missing your require and var for "esri/Color"

Re: HELP! SimpleFillSymbol and Search Widget modification

JamesFitzgerald — Sun, 12 Dec 2021 05:17:40 GMT

Hey,

It loaded correctly but seemed to skip the simpleFill. Do I need to set it? Add it to featureLayer? Not sure. Thank You for your help!

var search = new Search({
        sources: [{  
           simpleFill: new SimpleFillSymbol(SimpleFillSymbol.STYLE_Null, 
             new SimpleLineSymbol (SimpleLineSymbol.STYLE_SOLID, new Color([255,0,0]), 2), 
             new Color([255,255,0,0,0.5])),  
                    
                       
           featureLayer: new FeatureLayer("http://services.arcgis.com/HYLRafMc4Ux6DA8c/arcgis/rest/services/Parks_Search/FeatureServer/1", { 
             mode: FeatureLayer.MODE_ONDEMAND,           
             outFields: ["*"],                     
             infoTemplate: new InfoTemplate("Identify County Parks", 
             "Park Name: ${Name}</br>ParK Ownership: ${ParkType}</br>"),             
                      
          }),
                    
      }],
        map: map
      },  "search");

      search.startup();
      
      }); 
      map.addLayer(featureLayer);

Re: HELP! SimpleFillSymbol and Search Widget modification

RobertScheitlin__GISP — Thu, 23 Jul 2015 15:15:41 GMT

James,

There is no simpleFill option for the Search widget constructor... Are you looking for the "highlightSymbol"?

Re: HELP! SimpleFillSymbol and Search Widget modification

JamesFitzgerald — Thu, 23 Jul 2015 16:33:48 GMT

Thanks, I am new to arcGIS API for JavaScript. I am beginning to understand.

Thanks again!

Re: HELP! SimpleFillSymbol and Search Widget modification

JamesFitzgerald — Thu, 23 Jul 2015 16:52:48 GMT

Hey again,

enableHighlight worked! It definitely took way too long seek help from GeoNet! Very easy!

James