<!doctype html> <html lang="en"> <head> <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, gsvc; 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, "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); }); dojo.connect(map, "onClick", function projectToLatLong(e) { var outSR = new esri.SpatialReference({ wkid: 4326 }); gsvc.project([e.mapPoint], outSR, function(projectedPoints) { console.log("project callback: ", projectedPoints); pt = projectedPoints[0]; // dojo.byId("latlong").innerHTML = " Latitude = " + pt.y + "<br/> Longitude = " + pt.x; console.log("Latitude = " + pt.y + " 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>
Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
