This will get you started. It should work! I highlighted the code I add in red. Take note in the function projectToWebMercator(evt) the first line of code clears your map graphics - map.graphics.clear(); ----- This will clear all your predefined graphic points so if you don't want this to happen then comment it out.
<!doctype html>
<html lang="en">
<head>
<script language=JavaScript> var message="Please Choose your coordinates!"; function clickIE4(){ if (event.button==2){ alert(message); return false; } } function clickNS4(e){ if (document.layers||document.getElementById&&!document.all){ if (e.which==2||e.which==3){ alert(message); return false; } } } if (document.layers){ document.captureEvents(Event.MOUSEDOWN); document.onmousedown=clickNS4; } else if (document.all&&!document.getElementById){ document.onmousedown=clickIE4; } document.oncontextmenu=new Function("alert(message);return false") </script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title></title>
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/esri/dijit/css/Popup.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
#map{ margin: 0; padding: 0; }
</style>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5"></script>
<script>
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
var map;
function init() {
var initExtent = new esri.geometry.Extent({"xmin":-13114922,"ymin":-5500000,"xmax":9292585,"ymax":10351408, "spatialReference":{"wkid":102100}});
map = new esri.Map("map",{extent:initExtent});
var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer");
map.addLayer(basemap);
gsvc = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
dojo.connect(map, "onClick", projectToWebMercator);
dojo.connect(map, "onLoad", function() {
var points = {
"points": [[-122.63,45.51],[-122.56,45.51],[-122.56,45.55],[-122.62,45.00],[77,19]],
"spatialReference": ({ "wkid": 4326 })
};
var mp = new esri.geometry.Multipoint(points);
var wm_mp = esri.geometry.geographicToWebMercator(mp);
var sms = new esri.symbol.SimpleMarkerSymbol();
var infoTemplate = new esri.InfoTemplate("Bob","Lives in the USA");
var graphic = new esri.Graphic(wm_mp, sms, '', infoTemplate);
map.graphics.add(graphic);
var points = {
"points": [[85,45.51],[-5,45.51],[45,45.55],[20,45.00],[20,19]],
"spatialReference": ({ "wkid": 4326 })
};
var mp = new esri.geometry.Multipoint(points);
var wm_mp = esri.geometry.geographicToWebMercator(mp);
var sms = new esri.symbol.SimpleMarkerSymbol();
var infoTemplate = new esri.InfoTemplate("Jack","Lives in the USA");
var graphic = new esri.Graphic(wm_mp, sms, '', infoTemplate);
map.graphics.add(graphic);
dojo.connect(map.graphics, "onMouseOver", function(evt) {
var g = evt.graphic;
map.infoWindow.setContent(g.getContent());
map.infoWindow.setTitle(g.getTitle());
map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));
});
dojo.connect(map.graphics, "onMouseOut", function() {map.infoWindow.hide();} );
dojo.connect(map, "onMouseMove", function(evt) {
var mp = esri.geometry.webMercatorToGeographic(evt.mapPoint);
dojo.byId("spanCoords").innerHTML = mp.x + ", " + mp.y;
dojo.byId("spanCoords").innerHTML = (Math.round(mp.x * 10000) / 10000) + ", " + (Math.round(mp.y * 10000) / 10000);
});
});
}
function projectToWebMercator(evt) {
map.graphics.clear();
var point = evt.mapPoint;
var symbol = new esri.symbol.SimpleMarkerSymbol().setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND);
var graphic = new esri.Graphic(point, symbol);
var outSR = new esri.SpatialReference({ wkid: 102113});
map.graphics.add(graphic);
gsvc.project([ point ], outSR, function(projectedPoints) {
pt = projectedPoints[0];
graphic.setInfoTemplate(new esri.InfoTemplate("Coordinates",
"<p> X: " + pt.x +
"<br/> Y: " + pt.y +
"</p>" +
"<input type='button' value='Convert back to LatLong' onclick='projectToLatLong();' />" +
"<div id='latlong'></div>"));
map.infoWindow
.setTitle(graphic.getTitle())
.setContent(graphic.getContent())
.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
});
}
function projectToLatLong() {
var outSR = new esri.SpatialReference({ wkid: 4326});
gsvc.project([ pt ], outSR, function(projectedPoints) {
pt = projectedPoints[0];
dojo.byId("latlong").innerHTML = " Latitude = " + pt.y + "<br/> Longitude = " + pt.x;
});
}
dojo.ready(init);
</script>
</head>
<div style="position: absolute; bottom: 5px; left: 5px; z-index: 8999; padding: 5px; background-color: #ADD8E6;">
Current Coordinates (Latitude, Longitude): <span id="spanCoords"></span>
</div>
<body class="tundra">
<div data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="design:'headline',gutters:false"
style="width: 100%; height: 100%; margin: 0;">
<div id="map"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'center'">
</div>
</div>
</body>
</html>
Please mark as answered if I answered your question...or give a point if I helped out.Jay