I have created a simple map that has two primary functions. First, users can click on the map and receive an info. window with the longitude/latitude of the clicked point. Second, individuals can search the map for a location.
I have discovered something a bit intriguing, though. If an individual first clicks the map to get the coordinates, the info. window does not include "zoom to." However, if one first searches the map, then clicks, the info. window includes zoom to (enabling individuals to hone in on where they clicked). I really like this, but would like to have it there initially, as well, not just after one searchers.
Seems like I am missing something simple. Suggestions would be greatly appreciated.
Thanks,
Todd
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Get Coordinates From Map</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
<style>
html, body, #map {
padding:0;
margin:0;
height:100%;
}
#BasemapToggle {
position: absolute;
top: 20px;
right: 20px;
z-index: 50;
}
#search {
display: block;
position: absolute;
z-index: 2;
top: 20px;
left: 74px;
}
#HomeButton {
position: absolute;
top: 95px;
left: 20px;
z-index: 50;
}
#messages{
background-color: #fff;
box-shadow: 0 0 5px #888;
font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
font-size: 0.8em;
max-width: 15em;
padding: 0.5em;
position: absolute;
left: 20px;
bottom: 20px;
z-index: 40;
}
</style>
<script src="https://js.arcgis.com/3.20/"></script>
<script>
var map;
require([
"esri/map",
"esri/dijit/BasemapToggle",
"esri/dijit/Search",
"esri/dijit/HomeButton",
"dojo/domReady!"
], function(
Map, BasemapToggle, Search, HomeButton
) {
map = new Map("map", {
basemap: "streets",
center: [-98.526, 35.467784],
logo: false,
zoom: 7
});
var toggle = new BasemapToggle({
map: map,
basemap: "hybrid"
}, "BasemapToggle");
toggle.startup();
var search = new Search({
map: map
}, "search");
search.startup();
var home = new HomeButton({
map: map
}, "HomeButton");
home.startup();
map.on("load", function(){
map.infoWindow.resize(250,100);
});
map.on("click", addPoint);
function addPoint(evt) {
var latitude = evt.mapPoint.getLatitude();
var longitude = evt.mapPoint.getLongitude();
map.infoWindow.setTitle("Coordinates");
map.infoWindow.setContent(
"Longitude: " + longitude.toFixed(3) +
"<br>Latitude: " + latitude.toFixed(3)
);
map.infoWindow.show(evt.mapPoint, map.getInfoWindowAnchor(evt.screenPoint));
}
});
</script>
</head>
<body>
<span id="messages">Click map to get coordinates.</span>
<div id="map" class="map">
<div id="BasemapToggle"></div>
<div id="search"></div>
<div id="HomeButton"></div>
</div>
</body>
</html>
