<!DOCTYPE html> <html> <head> <title>...</title> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/claro/claro.css"> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } #map{ padding:0; } </style> <script type="text/javascript">var djConfig = {parseOnLoad: true};</script> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1"></script> <script type="text/javascript"> dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("esri.map"); var map; var drag = {}; function init() { var initExtent = new esri.geometry.Extent({"xmin":-13632648,"ymin":4542594,"xmax":-13621699,"ymax":4546875,"spatialReference":{"wkid":102100}}); map = new esri.Map("map",{extent:initExtent}); var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"); map.addLayer(basemap); var resizeTimer; dojo.connect(map, 'onLoad', function(theMap) { map.addLayer(new esri.layers.GraphicsLayer({ id: 'ctrl_drag' })); dojo.connect(dijit.byId('map'), 'resize', function() { clearTimeout(resizeTimer); resizeTimer = setTimeout( function() { map.resize(); map.reposition(); }, 500); }); // listen to various events to draw a graphic when the ctrl key is held down dojo.connect(map, "onMouseDragStart", drag_start); dojo.connect(map, "onMouseDragEnd", drag_stop); dojo.connect(map, "onMouseDrag", dragging); // IE doesn't play nice attaching onkeyup/onkeydown to the window object... var key_event_handle = dojo.isIE ? dojo.query('body')[0] : window; dojo.connect(key_event_handle, "onkeydown", function(evt) { if (evt.ctrlKey || evt.keyCode == 17) { map.disablePan(); } }); dojo.connect(key_event_handle, "onkeyup", function(evt) { if (evt.ctrlKey || evt.keyCode == 17) { map.enablePan(); } }); }); } function drag_start(evt) { if (evt.ctrlKey) { map.getLayer('ctrl_drag').clear(); if (check_drag_graphic()) { delete drag.drag_graphic; } drag.start = evt.mapPoint; } } function drag_stop(evt) { if (evt.ctrlKey) { drag.stop = evt.mapPoint; build_rect(); } } function dragging(evt) { if (evt.ctrlKey || evt.keyCode == 17) { drag.stop = evt.mapPoint; build_rect(); } } function build_rect() { var xmin = drag.start.x < drag.stop.x ? drag.start.x : drag.stop.x; var ymin = drag.start.y < drag.stop.y ? drag.start.y : drag.stop.y; var xmax = drag.start.x > drag.stop.x ? drag.start.x : drag.stop.x; var ymax = drag.start.y > drag.stop.y ? drag.start.y : drag.stop.y; var box = new esri.geometry.Extent({ 'xmin': xmin, 'ymin': ymin, 'xmax': xmax, 'ymax': ymax, 'spatialReference': map.spatialReference }); if (check_drag_graphic()) { map.getLayer('ctrl_drag').graphics[0].setGeometry(box); } else { drag.drag_graphic = new esri.Graphic(box, new esri.symbol.SimpleFillSymbol()); map.getLayer('ctrl_drag').add(drag.drag_graphic); } } function check_drag_graphic() { if (drag.hasOwnProperty('drag_graphic')) { return true; } else { return false; } } dojo.addOnLoad(init); </script> </head> <body class="claro"> <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width: 100%; height: 100%; margin: 0;"> <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden;"> </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.
