<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.14/"></script>
<title>ArcGIS JavaScript Tutorials: Create a JavaScript starter app</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="viewDiv"></div>
<div id="basemapGalleryDiv"></div>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/widgets/Search"
], function(Map, MapView, FeatureLayer,Search) {
var map = new Map({
basemap: "hybrid"//"streets-navigation-vector"
});
var trailheadsRenderer = {
type: "simple",
symbol: {
type: "picture-marker",
url: "http://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png",
width: "18px",
height: "18px"
}
}
var trailheadsLabels = {
symbol: {
type: "text",
color: "#FFFFFF",
haloColor: "#5E8D74",
haloSize: "2px",
font: {
size: "12px",
family: "Noto Sans",
style: "italic",
weight: "normal"
}
},
labelPlacement: "above-center",
labelExpressionInfo: {
expression: "$feature.TRL_NAME"
}
};
var trailheads = new FeatureLayer({
url:
"https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0",
renderer: trailheadsRenderer,
labelingInfo: [trailheadsLabels]
});
map.add(trailheads);
var view = new MapView({
container: "viewDiv",
map: map,
center: [-76.04394531249994, -9.98489014142105], // longitude, latitude
zoom: 5
});
const searchWidget = new Search({
view: view
});
view.ui.add(searchWidget, {
position: "top-left",
index: 2
});
view.on("click", function(event){
// event is the event handle returned after the event fires.
console.log(event.mapPoint);
});
//
searchWidget.on("select-result", function(event){
console.log(event);
console.log("Search input textbox was cleared.");
});
});
</script>
</body>
</html>