How can I use the editor widget on an iPad?

ChrisSergent · ‎12-08-2014

I want to be able to touch on the editor template chooser and then touch on an iPad to create a new point to edit. Is there a way to do this with this widget on an iPad?

Here is my current code that works on a pc:

<!DOCTYPE html>

<html>

<head>

<title>Decatur Graphics Editor</title>

<style>

html, body, #mapDiv

{

padding:0;

margin:0;

height:100%;

width:100%;

position:absolute;

z-index:0;

}

/* Editor style begin */

#templatePickerPane {

width: 250px;

height:260px;

overflow: hidden;

z-index:50;

top:50%;

right:0%;

position:absolute;

}

#panelHeader

{

background-color: #92A661;

border-bottom: solid 1px #92A860;

color: #FFF;

font-size: 18px;

height: 50px;

line-height: 22px;

margin: 0;

overflow: hidden;

padding: 10px 10px 10px 10px;

}

#editorDiv

{

background-color:White;

padding:10px;

}

.esriEditor .templatePicker

{

padding-bottom: 5px;

padding-top: 5px;

height: 120px;

border-radius: 0px 0px 4px 4px;

border: solid 1px #92A661;

}

.dj_ie .infowindow .window .top .right .user .content, .dj_ie .simpleInfoWindow .content

{

position: relative;

}

/* Editor Style End */

#closeEditor

{

position:absolute;

right:5%;

}

#editor

{

height:20px;

width:20px;

position:absolute;

top:285px;

left:20px;

z-index:50;

padding: 5px 6px 6px 6px;

background-color:#f9f8f8;

border-radius:5px;

visibility:visible;

}

</style>

var map;

require(["esri/map", "esri/config",

"esri/geometry/Extent",

"esri/dijit/editing/Editor",

"esri/layers/ArcGISDynamicMapServiceLayer",

"esri/layers/ArcGISTiledMapServiceLayer",

"esri/layers/FeatureLayer",

"esri/SnappingManager",

"esri/tasks/GeometryService",

"esri/toolbars/draw",

"dojo/dom",

"dojo/keys",

"dojo/on",

"dojo/parser",

"dojo/_base/array",

"dojo/i18n!esri/nls/jsapi",

"dojo/dnd/Moveable",

"dojo/domReady!"], function (Map, esriConfig, Extent, Editor, ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer,

FeatureLayer, SnappingManager, GeometryService, Draw, dom, keys, on, parser, arrayUtils, i18n, Moveable

) {

parser.parse();

//snapping is enabled for this sample - change the tooltip to reflect this

i18n.toolbars.draw.start += "<br/>Press <b>CTRL</b> to enable snapping";

i18n.toolbars.draw.addPoint += "<br/>Press <b>CTRL</b> to enable snapping";

/* The proxy comes before all references to web services */

/* Files required for security are proxy.config, web.config and proxy.ashx

- set security in Manager to Private, available to selected users and select Allow access to all users who are logged in

(Roles are not required)

/*

The proxy section is defined on the ESRI sample. I have included it as

part of the documentation reads that the measuring will not work.

I thought that might be important.

*/

// Proxy Definition Begin

//identify proxy page to use if the toJson payload to the geometry service is greater than 2000 characters.

//If this null or not available the project and lengths operation will not work.

// Otherwise it will do a http post to the proxy.

esriConfig.defaults.io.proxyUrl = "proxy.ashx";

esriConfig.defaults.io.alwaysUseProxy = true;

// Proxy Definition End

// declare geometry service

esriConfig.defaults.geometryService = new GeometryService("http://maps.decaturil.gov/arcgis/rest/services/Utilities/Geometry/GeometryServer");

// set custom extent

var initialExtent = new Extent({

"xmin": 777229.03,

"ymin": 1133467.92,

"xmax": 848340.14,

"ymax": 1185634.58,

"spatialReference": {

"wkid": 3435

}

});

// create map and set slider style to small

map = new Map("mapDiv", {

showAttribution: false,

sliderStyle: "small",

extent: initialExtent,

logo:false

});

// Starts initEditing after the feature layer(s) have been added

map.on("layers-add-result", initEditing);

// add imagery

var tiled = new ArcGISTiledMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Aerial_2014_Tiled/MapServer");

map.addLayer(tiled);

// set operational layers

var operationalLayer = new ArcGISDynamicMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Public/InternetVector/MapServer", { "opacity": 0.5 });

// add operational layers

map.addLayer(operationalLayer);

// add point feature layer for editing

var pointFeatureLayer = new FeatureLayer("http://maps.decaturil.gov/arcgis/rest/services/Test/FeatureServer/0", {

mode: FeatureLayer.MODE_ONDEMAND,

outFields: ["*"]

});

map.addLayers([pointFeatureLayer]);

// sizes the edit window

map.infoWindow.resize(400, 300);

// settings for the editor widget

function initEditing(event) {

var featureLayerInfos = arrayUtils.map(event.layers, function (layer) {

return {

"featureLayer": layer.layer

};

});

var settings = {

map: map,

layerInfos: featureLayerInfos,

toolbarVisible:true,

enableUndoRedo :true,

maxUndoOperations:20

};

var params = {

settings: settings

};

var editorWidget = new Editor(params, 'editorDiv');

editorWidget.startup();

var options = { snapKey: keys.copyKey };

map.enableSnapping(options);

}

// Allow editor to move with mouse

on(Moveable(dom.byId("templatePickerPane")), "onmousedown", function () {

var dnd = new Moveable(dom.byId("templatePickerPane"));

});

// Hide editor

on(dom.byId("closeEditor"), "click", function () {

document.getElementById("templatePickerPane").style.visibility = 'hidden';

});

// Show Editor

on(dom.byId("showEditorWidget"), "click", function () {

document.getElementById("templatePickerPane").style.visibility = 'visible';

});

}

);

</script>

</head>

</div>

<p>Default Editor <input type="image" id="closeEditor" src="images/close.ico" alt="Close Editor" title="Close Editor" /></p>

</div>

</div>

</body>

</html>

ChrisSergent · ‎12-09-2014

I was trying to get moveable to work with dojo so I could drag the editor widget, but this made it so I could not use the editor widget. I instead used jQuery punch and was able to allow the editor widget to drag. Mystery solved.