Hide Table of Contents
View Search basic sample in sandbox
Search basic

Description

This sample demonstrates how to use the Search widget to simplify the process of finding locations on a map. This sample is very basic as it shows how to add the widget with all of its default properties.

Code

<!DOCTYPE html>
<html dir="ltr">

<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>ArcGIS API for JavaScript | Basic Search</title>
   
<link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/themes/calcite/dijit/calcite.css">
   
<link rel="stylesheet" href="https://js.arcgis.com/3.46/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.46/"></script>
   
<script>
      require
([

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

     
], function (Map, Search) {
         
var map = new Map("map", {
            basemap
: "gray-vector",
            center
: [-120.435, 46.159], // lon, lat
            zoom
: 6
         
});

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

     
});
   
</script>
</head>

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

</html>
 
         
Show Modal