? What is the problem Search widget did not appear

351
2
05-26-2020 06:55 AM
RehamAlharbi
New Contributor

0 Kudos
2 Replies
Egge-Jan_Pollé
MVP Regular Contributor

Hi Reham Alharbi,

Apparently something is wrong with your code...

Do you see any error messages in the console of your browser? (You can open this console by pressing F12, for most modern browsers.)

In the script below I tried to replicate your app - focusing on Madinah, and with a working Search widget - all in one html file. You did split your code into separate css and js files, which is of course OK.

I suppose your issue has something to do with the order of your code.

What do you see? does the map appear at all? With or without the zoom buttons?

Please let us (the community) know whether you managed to solve your issue or not. We are here to help.

BR,

Egge-Jan

<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" />
   <!-- 
  ArcGIS API for JavaScript, https://js.arcgis.com
  For more information about the search_basic sample, read the original sample description at developers.arcgis.com.
  https://developers.arcgis.com/javascript/3/jssamples/search_basic.html  
  -->
  <title>ArcGIS API for JavaScript | Basic Search</title>
   <link rel="stylesheet" href="https://js.arcgis.com/3.32/esri/themes/calcite/dijit/calcite.css">
   <link rel="stylesheet" href="https://js.arcgis.com/3.32/esri/themes/calcite/esri/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.32/"></script>
   <script>
      require([

        "esri/map",
        "esri/dijit/Search",
        "dojo/domReady!"

      ], function (Map, Search) {
         var map = new Map("map", {
            basemap: "topo",
            center: [39.608684, 24.469576], // lon, lat
            zoom: 13
         });

         var search = new Search({
            map: map
         }, "search");
         search.startup();

      });
   </script>
</head>
<body class="calcite">
   <div id="search"></div>
   <div id="map"></div>
</body>
</html>
0 Kudos
GeorgeAbraham
New Contributor III

Hi Reham Alharbi‌,

The only mistake is you placed your search after you ended the Require

If this has helped you resolve your issue, you could please mark this as correct answer and close the thread.