HELP! SimpleFillSymbol and Search Widget modification

2706
7
Jump to solution
07-23-2015 07:02 AM
JamesFitzgerald
Occasional Contributor II

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);

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

James,

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

View solution in original post

7 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

James,

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

0 Kudos
JamesFitzgerald
Occasional Contributor II

<!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>

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

James,

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

JamesFitzgerald
Occasional Contributor II

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);

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

James,

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

View solution in original post

JamesFitzgerald
Occasional Contributor II

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

Thanks again!

0 Kudos
JamesFitzgerald
Occasional Contributor II

Hey again,

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

James

0 Kudos