parse search widget 4.4 to a html search form

726
5
Jump to solution
07-25-2017 07:58 AM
Henryobaseki
Occasional Contributor

Hi All,

 

The code would normally work using Javascript 4.3, my search widget outside my mapView but seems not to be working in 4.4.

Any help please. Thanks I advance

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Search Widget - 4.4</title>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.4/esri/css/main.css">
  <script src="https://js.arcgis.com/4.4/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/SceneView",
      "esri/widgets/Search",
      "dojo/domReady!"
    ], function(
      Map,
      SceneView,
      Search) {

      var map = new Map({
        basemap: "satellite",
        ground: "world-elevation"
      });

      var view = new SceneView({
        scale: 123456789,
        container: "viewDiv",
        map: map
      });

      var searchWidget = new Search({
        view: view
      });

      // Add the search widget to the very top left corner of the view
     
    console.log(document.getElementById("submitButton"))
    document.getElementById("submitButton").onclick = (e)=> {
      e.preventDefault()
      let el = document.getElementById("input")
      console.log(el.value)
    
      searchWidget.search(el.value).then((result)=> {
        console.log("result", result)
      })
    }
       });
       
   
  </script>
</head>

<body>
  <div>
    <form>
      <input placeholder="Enter your address" type="text" id="input">
      <button id="submitButton">Submit</button>
    </form>
  </div>
  <div id="viewDiv"></div>
</body>

</html>
0 Kudos
1 Solution

Accepted Solutions
KellyHutchins
Esri Frequent Contributor

You can find details about web servers by following the links in the 'About web servers' section of the 'System Requirements' doc. 

System Requirements | ArcGIS API for JavaScript 4.4 

View solution in original post

0 Kudos
5 Replies
KellyHutchins
Esri Frequent Contributor

I ran a quick test using your  code (added to jsbin) and it worked for me. I searched for Olympia, WA hit submit and was zoomed to that location. 

JS Bin - Collaborative JavaScript Debugging 

Can you provide more info about the issue you are seeing? 

Henryobaseki
Occasional Contributor

Thanks Kelly Hutchins,

I think its the browser I m using need it to be displayed in IE and not google chrome. Any ideas?

0 Kudos
KellyHutchins
Esri Frequent Contributor

I'm not sure what is up with JSBIN I just tested with Edge and it didn't work but if I copied the code locally and ran from my web server on Edge the search worked. What behavior are you seeing? When you test your app locally in IE does the map load, are there any console errors? 

Henryobaseki
Occasional Contributor

It wont load Map because I think I m running the app from a c drive. How do I run it from a web server I think this should resolve the issue any hints please?

0 Kudos
KellyHutchins
Esri Frequent Contributor

You can find details about web servers by following the links in the 'About web servers' section of the 'System Requirements' doc. 

System Requirements | ArcGIS API for JavaScript 4.4 

0 Kudos