I am writing code for the Search widget to simplify the process of finding locations on a map. All, I want to do is to type the location of the area, place or any road, and it would take me to that place.
But my code seems have some issue and is showing the screen blank:
<!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" />
<link rel="stylesheet" href="https://js.arcgis.com/3.38/esri/themes/calcite/dijit/calcite.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.38/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.38/"></script>
<script>
require([
"esri/map",
"dojo/domReady!"
], function (Map) {
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>You are just missing the import for the Search widget.
<!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" />
<link rel="stylesheet" href="https://js.arcgis.com/3.38/esri/themes/calcite/dijit/calcite.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.38/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.38/"></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>I would suggest you to use the new version of the API.