Last active
December 12, 2015 01:48
-
-
Save odoe/4693902 to your computer and use it in GitHub Desktop.
ArcGIS JS API Drawtoolbar example for mobile that provides a little bit more feedback for the user on a touch device.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no"> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9"> | |
| <title>Maps Toolbar</title> | |
| <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dojox/mobile/themes/iPhone/iPhone.css"> | |
| <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dojox/mobile/themes/buttons.css"> | |
| <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css"> | |
| <style> | |
| html, body { | |
| height: 100%; | |
| width: 100%; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| </style> | |
| <script>var dojoConfig = { parseOnLoad : true }</script> | |
| <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3compact"></script> | |
| <script> | |
| /** | |
| odoe - | |
| Slightly modified version of this sample. | |
| http://help.arcgis.com/EN/webapi/javascript/arcgis/jssamples/#sample/mobile_drawtoolbar | |
| Because I like the openlayers type of editor, I think adding some feedback points for the user while they are drawing | |
| lines and polygons provides a bit of a better user experience. Especially when they click their start point, you don't | |
| really know where you clicked on the map. If you have ever tried drawing lines/polygons on a map on a mobile/tablet | |
| device, you know that drawing the first couple of points isn't very intuitive. | |
| **/ | |
| dojo.require("esri.map"); | |
| dojo.require("esri.toolbars.draw"); | |
| dojo.require("esri.toolbars.edit"); | |
| dojo.require("esri.tasks.geometry"); | |
| dojo.require("dojox.mobile.parser"); | |
| dojo.require("dojox.mobile"); | |
| dojo.require("dojox.mobile.Button"); | |
| dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat"); | |
| var map, toolbar, editToolbar, drawToolActive, gs, sketchGraphics; | |
| function init() { | |
| //onorientationchange doesn't always fire in a timely manner in Android so check for both orientationchange and resize | |
| var supportsOrientationChange = "onorientationchange" in window, orientationEvent = supportsOrientationChange ? "orientationchange" : "resize"; | |
| window.addEventListener(orientationEvent, function() { | |
| orientationChanged(); | |
| }, false); | |
| esri.config.defaults.io.proxyUrl = "/arcgisserver/apis/javascript/proxy/proxy.ashx"; | |
| map = new esri.Map("map", { | |
| basemap: "streets", | |
| center: [-15.469, 36.428], | |
| zoom: 3 | |
| }); | |
| // odoe - add a sketch array to hold some feedback points for the user | |
| sketchGraphics = []; | |
| dojo.connect(map, "onLoad", createToolbar); | |
| gs = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"); | |
| } | |
| function createToolbar(map) { | |
| toolbar = new esri.toolbars.Draw(map); | |
| dojo.connect(toolbar, "onActivate", function() { | |
| drawToolActive = true; | |
| }); | |
| dojo.connect(toolbar, "onDrawEnd", checkGeometry); | |
| editToolbar = new esri.toolbars.Edit(map); | |
| //Activate the toolbar when you click on a graphic | |
| dojo.connect(editToolbar, "onDeactivate", function(tool, graphic) { | |
| var geometry = graphic.geometry; | |
| if(geometry.type === "polygon" && esri.geometry.polygonSelfIntersecting(geometry)) { | |
| gs.simplify([geometry], function(geometries) { | |
| graphic.setGeometry(geometries[0]); | |
| }); | |
| } | |
| }); | |
| dojo.connect(map.graphics, "onClick", function(evt) { | |
| if(drawToolActive === false) { | |
| dojo.stopEvent(evt); | |
| editToolbar.activate(esri.toolbars.Edit.MOVE | esri.toolbars.Edit.SCALE | esri.toolbars.Edit.ROTATE | esri.toolbars.Edit.EDIT_VERTICES, evt.graphic); | |
| } | |
| }); | |
| //deactivate the toolbar when you click outside a graphic | |
| dojo.connect(map, "onClick", function(evt) { | |
| editToolbar.deactivate(); | |
| // odoe - if the drawtool is active, add a point where the user touched the screen to provide a little feedback. | |
| if (drawToolActive) { | |
| var mp = evt.mapPoint; | |
| var sym = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 16, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 0, 0, 1])); | |
| var g = new esri.Graphic(mp, sym); | |
| sketchGraphics.push(g); // odoe - add skecth graphic | |
| map.graphics.add(g); | |
| } | |
| }); | |
| } | |
| function checkGeometry(geometry) { | |
| if(geometry.type === "polygon" && esri.geometry.polygonSelfIntersecting(geometry)) { | |
| gs.simplify([geometry], function(geometries) { | |
| addToMap(geometries[0]); | |
| }); | |
| } else { | |
| addToMap(geometry); | |
| } | |
| } | |
| function addToMap(geometry) { | |
| drawToolActive = false; | |
| var symbol; | |
| switch (geometry.type) { | |
| case "point": | |
| symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1), new dojo.Color([0, 255, 0, 0.25])); | |
| break; | |
| case "polyline": | |
| symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 3); | |
| break; | |
| case "polygon": | |
| symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25])); | |
| break; | |
| case "extent": | |
| symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25])); | |
| break; | |
| case "multipoint": | |
| symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND, 20, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 0, 0]), 1), new dojo.Color([255, 255, 0, 0.5])); | |
| break; | |
| } | |
| var graphic = new esri.Graphic(geometry, symbol); | |
| map.graphics.add(graphic); | |
| // odoe - clear sketch graphics | |
| for (var i = 0, g; g = sketchGraphics[i]; i++) { | |
| map.graphics.remove(g); | |
| } | |
| sketchGraphics = []; | |
| toolbar.deactivate(); | |
| map.showZoomSlider(); | |
| } | |
| function orientationChanged() { | |
| if(map) { | |
| map.reposition(); | |
| map.resize(); | |
| } | |
| } | |
| dojo.ready(init); | |
| </script> | |
| </head> | |
| <body> | |
| <h1 dojoType="dojox.mobile.Heading">Draw And Edit Toolbar</h1> | |
| <div id="header" style="height:58px;padding-top:5px;"> | |
| <button dojoType="dojox.mobile.Button" onClick="toolbar.activate(esri.toolbars.Draw.POINT);map.hideZoomSlider();dojo.byId('info').innerHTML = 'Tap to add a point';"> | |
| Point | |
| </button> | |
| <button dojoType="dojox.mobile.Button" onClick="toolbar.activate(esri.toolbars.Draw.POLYLINE);map.hideZoomSlider();dojo.byId('info').innerHTML = 'Tap to start draw, double tap to complete';"> | |
| Polyline | |
| </button> | |
| <button dojoType="dojox.mobile.Button" onClick="toolbar.activate(esri.toolbars.Draw.POLYGON);map.hideZoomSlider();dojo.byId('info').innerHTML = 'Tap to start draw, double tap to complete';"> | |
| Polygon | |
| </button> | |
| <div id="info"></div> | |
| </div> | |
| <div id="map" style="border:solid 2px #587498;width:100%;height:100%;"></div> | |
| </body> | |
| </html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment