mirror of
https://github.com/Esri/offline-editor-js.git
synced 2025-12-15 15:20:05 +00:00
440 lines
18 KiB
HTML
440 lines
18 KiB
HTML
<!--
|
|
Sample demonstrates basic offline editing functionality for points, lines and polygons.
|
|
-->
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
|
|
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
|
|
<title>Offline Editing Sample - Basic points, lines, polygons</title>
|
|
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">
|
|
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
|
|
<style>
|
|
html, body {
|
|
height: 100%;
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow:hidden;
|
|
font-family: Helvetica;
|
|
}
|
|
.btn1{
|
|
width: 100%;
|
|
padding: 4px;
|
|
font-size: medium;
|
|
-moz-border-radius: 4px;
|
|
-webkit-border-radius: 4px;
|
|
}
|
|
#header, #info {
|
|
border:solid 2px #462d44;
|
|
background-color: #000000 !important;
|
|
background:#fff;
|
|
color:#ffffff;
|
|
-moz-border-radius: 4px;
|
|
border-radius: 4px;
|
|
font-family: sans-serif;
|
|
font-size: 1.1em;
|
|
padding-left:20px;
|
|
}
|
|
#buttons, #offlineInfo {
|
|
border:solid 2px #462d44;
|
|
background-color: #000000 !important;
|
|
background:#fff;
|
|
color:#ffffff;
|
|
-moz-border-radius: 4px;
|
|
border-radius: 4px;
|
|
font-family: sans-serif;
|
|
font-size: 1.1em;
|
|
}
|
|
#offlineIndicator{
|
|
font-size: medium;
|
|
text-align: center;
|
|
background-color: green;
|
|
-moz-border-radius: 4px;
|
|
border-radius: 4px;
|
|
padding: 4px;
|
|
}
|
|
#map {
|
|
padding:1px;
|
|
border:solid 2px #444;
|
|
-moz-border-radius: 4px;
|
|
border-radius: 4px;
|
|
}
|
|
#rightPane {
|
|
border:none;
|
|
padding: 0;
|
|
width:228px;
|
|
}
|
|
#leftPane {
|
|
padding:1px;
|
|
border:solid 2px #444;
|
|
background-color: #000000;
|
|
-moz-border-radius: 4px;
|
|
border-radius: 4px;
|
|
width:220px;
|
|
}
|
|
.templatePicker {
|
|
border: solid 2px #444;
|
|
}
|
|
#editInfo, #historyTextArea,#pendingEdits,#pendingTextArea{
|
|
height: 300px;
|
|
background-color: #000000;
|
|
color: #ffffff;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="claro">
|
|
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="gutters:true, design:'headline'" style="width:100%;height:100%;">
|
|
<div data-dojo-type="dijit/layout/ContentPane" id="header" data-dojo-props="region:'top'">Offline Editing Demo: Click and drag graphic to map. Use ctrl or cmd + click on graphic to delete. Double click on graphic to edit vertices. </div>
|
|
<!--<div id="info" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">Storage used: 0 MBs</div>-->
|
|
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
|
|
<div id="rightPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
|
|
<div id="templatePickerDiv"></div>
|
|
</div>
|
|
<div id="leftPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'">
|
|
<div id="offlineInfo" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
|
|
<div id="offlineIndicator"><img id="offlineImg" src="../samples/img/32-Link.png" alt="Internet Connectivity" /></div>
|
|
</div>
|
|
<div id="info" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">Storage used: 0 MBs</div>
|
|
<div id="pendingEdits" data-dojo-type="dijit/layout/ContentPane" >
|
|
<div id="pendingEditsHeader" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">Pending Edits</div>
|
|
<textarea id="pendingTextArea" style="overflow:hidden !important" readonly wrap="hard"></textarea>
|
|
</div>
|
|
<div id="editInfo" data-dojo-type="dijit/layout/ContentPane" >
|
|
<div id="historyHeader" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">History</div>
|
|
<textarea id="historyTextArea" readonly wrap="hard"></textarea>
|
|
</div>
|
|
<div id="buttons" data-dojo-type="dijit/layout/ContentPane" >
|
|
<button class="btn1" style="background-color: red" onclick="getLocalStorage()">Get localStorage</button>
|
|
<button class="btn1" style="background-color: red" onclick="offlineStore._deleteTempLocalStore();updatePendingTextArea();">Delete localStorage</button>
|
|
<button class="btn1" style="background-color: red" onclick="getIndex()" >Get Index</button>
|
|
<button class="btn1" style="background-color: red" onclick="offlineStore._deleteLocalStoreIndex();updateHistoryTextArea();" >Delete Index</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
var locationPath = location.pathname.replace(/\/[^/]+$/, "");
|
|
var dojoConfig = {
|
|
paths: {
|
|
tiles: locationPath + "/../lib/tiles",
|
|
edit: locationPath + "/../lib/edit",
|
|
vendor: locationPath + "/../vendor"
|
|
}
|
|
}
|
|
</script>
|
|
<script src="http://js.arcgis.com/3.7/"></script>
|
|
<script>
|
|
"use strict"
|
|
|
|
var map;
|
|
var offlineStore;
|
|
var vertices;
|
|
var updateFlag = false;
|
|
var _logValue = "";
|
|
var _historyLog = "";
|
|
|
|
require([
|
|
"esri/map",
|
|
"esri/geometry/Point",
|
|
"esri/geometry/Polygon",
|
|
"esri/geometry/Polyline",
|
|
"esri/toolbars/draw",
|
|
"esri/toolbars/edit",
|
|
"esri/graphic",
|
|
"esri/config",
|
|
"esri/layers/FeatureLayer",
|
|
"esri/symbols/SimpleMarkerSymbol",
|
|
"esri/symbols/SimpleLineSymbol",
|
|
"esri/symbols/SimpleFillSymbol",
|
|
"esri/dijit/editing/TemplatePicker",
|
|
"esri/dijit/AttributeInspector",
|
|
"dojo/_base/array",
|
|
"dojo/_base/event",
|
|
"dojo/_base/lang",
|
|
"dojo/parser",
|
|
"dijit/registry",
|
|
"edit/OfflineStore",
|
|
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
|
|
"dijit/form/Button", "dojo/domReady!"
|
|
], function(
|
|
Map, Point, Polygon, Polyline, Draw, Edit, Graphic, esriConfig,
|
|
FeatureLayer,
|
|
SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
|
|
TemplatePicker, AttributeInspector,
|
|
arrayUtils, event, lang, parser, registry,
|
|
OfflineStore
|
|
) {
|
|
parser.parse();
|
|
|
|
var selectionSymbol;
|
|
// refer to "Using the Proxy Page" for more information: https://developers.arcgis.com/en/javascript/jshelp/ags_proxy.html
|
|
esriConfig.defaults.io.proxyUrl = "../lib/proxy.php";
|
|
// This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications.
|
|
esriConfig.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
|
|
|
|
map = new Map("map", {
|
|
basemap: "streets",
|
|
center: [-83.244, 42.581],
|
|
zoom: 15
|
|
});
|
|
|
|
map.on("layers-add-result", initEditing);
|
|
var headerDiv = document.getElementById("info");
|
|
var landusePointLayer = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer/6", {
|
|
mode: FeatureLayer.MODE_SNAPSHOT,
|
|
outFields: ["*"]
|
|
});
|
|
var landuseLineLayer = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer/8", {
|
|
mode: FeatureLayer.MODE_SNAPSHOT,
|
|
outFields: ["*"]
|
|
});
|
|
var landusePolygonLayer = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer/9", {
|
|
mode: FeatureLayer.MODE_SNAPSHOT,
|
|
outFields: ["*"]
|
|
});
|
|
map.addLayers([landusePointLayer, landuseLineLayer, landusePolygonLayer]);
|
|
|
|
function initEditing(evt) {
|
|
console.log("initEditing", evt);
|
|
|
|
var currentLayer = null;
|
|
var layers = arrayUtils.map(evt.layers, function(result) {
|
|
return result.layer;
|
|
});
|
|
console.log("layers", layers);
|
|
//////////
|
|
try{
|
|
offlineStore = new OfflineStore(map);
|
|
}
|
|
catch(err)
|
|
{
|
|
console.log(err);
|
|
alert(err);
|
|
}
|
|
console.log(getStorageInfo());
|
|
headerDiv.innerHTML = getStorageInfo();
|
|
|
|
try{
|
|
document.addEventListener("offlineEditEvent",function(evt){
|
|
var message = evt.detail.message;
|
|
switch(evt.detail.type){
|
|
case "internetStatusChangeEvent":
|
|
if(message == true){
|
|
document.getElementById("offlineImg").src = "../samples/img/32-Link.png";
|
|
document.getElementById("offlineIndicator").style.backgroundColor = "green";
|
|
}
|
|
else{
|
|
document.getElementById("offlineImg").src = "../samples/img/32-Alert.png";
|
|
document.getElementById("offlineIndicator").style.backgroundColor = "yellow";
|
|
}
|
|
break;
|
|
case "indexUpdateEvent":
|
|
headerDiv.innerHTML = getStorageInfo();
|
|
updateHistoryTextArea();
|
|
break;
|
|
case "pendingEditEvent":
|
|
if(message != null){
|
|
updatePendingTextArea();
|
|
}
|
|
headerDiv.innerHTML = getStorageInfo();
|
|
break;
|
|
case "duplicateEditEvent":
|
|
alert("Duplicate edit event");
|
|
console.log("duplicate event attempt");
|
|
break;
|
|
case "deleteItemFromTempStoreEvent":
|
|
updatePendingTextArea();
|
|
headerDiv.innerHTML = getStorageInfo();
|
|
break;
|
|
case "editCompleteEvent":
|
|
updatePendingTextArea();
|
|
break;
|
|
}
|
|
},false);
|
|
document.addEventListener("windowErrorEvent",function(evt){
|
|
alert("Error: " + evt.detail.message);
|
|
},
|
|
false);
|
|
}
|
|
catch(err){
|
|
console.log("Attempting to set events listeners: " + err.toString());
|
|
}
|
|
//////////
|
|
var editToolbar = new Edit(map);
|
|
editToolbar.on("deactivate", function(evt) {
|
|
if(updateFlag == true){
|
|
applyEdits(vertices.graphic,vertices.layer,offlineStore.enum().UPDATE);
|
|
updateFlag = false;
|
|
}
|
|
else{
|
|
applyEdits(evt.graphic,currentLayer,offlineStore.enum().UPDATE);
|
|
}
|
|
});
|
|
|
|
map.on("click", function(evt){
|
|
var state = editToolbar.getCurrentState();
|
|
if(state.isModified){
|
|
updateFlag = true;
|
|
editToolbar.deactivate();
|
|
}
|
|
});
|
|
|
|
arrayUtils.forEach(layers, function(layer) {
|
|
var editingEnabled = false;
|
|
layer.on("dbl-click", function(evt) {
|
|
event.stop(evt);
|
|
if (editingEnabled === false) {
|
|
editingEnabled = true;
|
|
vertices = new offlineStore.verticesObject(evt.graphic,layer);
|
|
editToolbar.activate(Edit.EDIT_VERTICES , evt.graphic);
|
|
} else {
|
|
currentLayer = this;
|
|
editToolbar.deactivate();
|
|
editingEnabled = false;
|
|
}
|
|
});
|
|
layer.on("click", function(evt) {
|
|
event.stop(evt);
|
|
if (evt.ctrlKey === true || evt.metaKey === true) { //delete feature if ctrl key is depressed
|
|
try{
|
|
applyEdits(evt.graphic,layer,offlineStore.enum().DELETE);
|
|
}
|
|
catch(err){
|
|
console.log("error " + err.toString());
|
|
}
|
|
|
|
currentLayer = this;
|
|
editToolbar.deactivate();
|
|
editingEnabled=false;
|
|
}
|
|
});
|
|
});
|
|
|
|
var templatePicker = new TemplatePicker({
|
|
featureLayers: layers,
|
|
rows: "auto",
|
|
columns: 2,
|
|
grouping: true,
|
|
style: "height: auto; overflow: auto;"
|
|
}, "templatePickerDiv");
|
|
|
|
templatePicker.startup();
|
|
|
|
var drawToolbar = new Draw(map);
|
|
var selectedTemplate;
|
|
|
|
templatePicker.on("selection-change", function() {
|
|
if( templatePicker.getSelected() ) {
|
|
selectedTemplate = templatePicker.getSelected();
|
|
}
|
|
switch (selectedTemplate.featureLayer.geometryType) {
|
|
case "esriGeometryPoint":
|
|
drawToolbar.activate(Draw.POINT);
|
|
break;
|
|
case "esriGeometryPolyline":
|
|
drawToolbar.activate(Draw.POLYLINE);
|
|
break;
|
|
case "esriGeometryPolygon":
|
|
drawToolbar.activate(Draw.POLYGON);
|
|
break;
|
|
}
|
|
});
|
|
|
|
drawToolbar.on("draw-end", function(evt) {
|
|
drawToolbar.deactivate();
|
|
editToolbar.deactivate();
|
|
var newAttributes = lang.mixin({}, selectedTemplate.template.prototype.attributes);
|
|
var newGraphic = new Graphic(evt.geometry, null, newAttributes);
|
|
|
|
applyEdits(newGraphic,selectedTemplate.featureLayer,offlineStore.enum().ADD);
|
|
});
|
|
|
|
function applyEdits(graphic,layer,operation)
|
|
{
|
|
offlineStore.applyEdits(graphic,layer,operation, function(count,result,id)
|
|
{
|
|
if( result.success ) {
|
|
updatePendingTextArea();
|
|
}
|
|
if( result.duplicate ) {
|
|
alert("Attempt to enter a duplicate edit.");
|
|
}
|
|
headerDiv.innerHTML = "Storage Used: " + offlineStore.getlocalStorageUsed() + " MBs";
|
|
});
|
|
}
|
|
|
|
function getStorageInfo(){
|
|
return "Storage Used: " + offlineStore.getlocalStorageUsed() + " MBs";
|
|
}
|
|
}
|
|
});
|
|
|
|
function updatePendingTextArea(){
|
|
var logText = [];
|
|
var graphicsArr = offlineStore.getStore();
|
|
if(graphicsArr != null){
|
|
var length = graphicsArr.length;
|
|
for(var i = 0; i < length; i++){
|
|
var objectid = null;
|
|
var symbolname = null;
|
|
var graphic = graphicsArr[i].graphic;
|
|
var layerId = graphicsArr[i].layer;
|
|
var enumValue = graphicsArr[i].enumValue;
|
|
// var date = graphicsArr[i].date;
|
|
var geometryType = graphic.geometry.type;
|
|
if(graphic.hasOwnProperty("attributes")){
|
|
|
|
if(graphic.attributes.hasOwnProperty("symbolname") == true){
|
|
symbolname = graphic.attributes.symbolname;
|
|
}
|
|
|
|
if(graphic.attributes.hasOwnProperty("objectid")){
|
|
objectid = graphic.attributes.objectid;
|
|
}
|
|
}
|
|
logText.push(enumValue + " " + geometryType + " " + objectid + ", symbolname: " + symbolname + ", layer: " + layerId);
|
|
}
|
|
}
|
|
document.getElementById("pendingTextArea").innerHTML = logText.join("\n");
|
|
}
|
|
|
|
/**
|
|
* Sends actual changes to the update log
|
|
* @param evt
|
|
*/
|
|
function updateHistoryTextArea(){
|
|
var index = offlineStore.getLocalStoreIndex();
|
|
document.getElementById("historyTextArea").innerHTML = index? index.join("\n") : "nothing";
|
|
}
|
|
|
|
function getDateHMS(){
|
|
var date = new Date();
|
|
var hh = date.getHours();
|
|
var mm = date.getMinutes();
|
|
var ss = date.getSeconds();
|
|
hh = hh < 10 ? "0" + hh : hh;
|
|
mm = mm < 10 ? "0" + mm : mm;
|
|
ss = ss < 10 ? "0" + ss : ss;
|
|
var dateHMS = (date.getMonth()+1) + "/"+ date.getDate()
|
|
+ "/" + date.getFullYear() + " "
|
|
+ hh + ":"
|
|
+ mm + ":"
|
|
+ ss;
|
|
return dateHMS;
|
|
}
|
|
|
|
function getLocalStorage(){
|
|
alert(offlineStore._getTempLocalStore())
|
|
console.log("LocalStorage: " + offlineStore._getTempLocalStore());
|
|
}
|
|
|
|
function getIndex(){
|
|
alert(offlineStore.getLocalStoreIndex())
|
|
console.log("index: " + offlineStore.getLocalStoreIndex());
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |