mirror of
https://github.com/Esri/offline-editor-js.git
synced 2025-12-15 15:20:05 +00:00
1211 lines
47 KiB
HTML
1211 lines
47 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<!--<link rel="shortcut icon" href="../images/favicon.ico">-->
|
|
|
|
<title>Offline-editor-js</title>
|
|
|
|
<!-- Bootstrap core CSS -->
|
|
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css"">
|
|
<link rel="stylesheet" href="../samples/widgets/modal/css/modal-popup.css">
|
|
<link rel="stylesheet" type="text/css" href="http://esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
|
|
|
|
<!-- Custom styles for this template -->
|
|
<link href="css/style.css" rel="stylesheet">
|
|
|
|
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
|
<!--[if lt IE 9]>
|
|
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
|
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
|
<![endif]-->
|
|
|
|
<style>
|
|
|
|
#mapDiv {
|
|
min-height: 300px;
|
|
max-height: 1000px;
|
|
}
|
|
|
|
pre {
|
|
overflow: auto;
|
|
word-wrap: normal;
|
|
white-space: pre;
|
|
font-family: Courier,"Courier New";
|
|
font-size: 13px;
|
|
background-color: #fee9cc;
|
|
}
|
|
|
|
pre.prettyprint {
|
|
border: 1px solid #cccccc !important;
|
|
}
|
|
|
|
#img-offline-indicator {
|
|
padding: 8px;
|
|
position: relative; float: right;
|
|
}
|
|
|
|
/* Override mod-popup default */
|
|
.mod-popup-stop-input {color: black;}
|
|
.span-pending {color: blue; padding-left: 1em;}
|
|
.voffset20px { margin-top: 20px; }
|
|
.floatRight { float: right}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<a class="hidden-xs" href="https://github.com/Esri/offline-editor-js">
|
|
<img style="position: absolute; top: 50; right: 0; border: 0; width:150px;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png" alt="Fork me on GitHub">
|
|
</a>
|
|
|
|
<header id="header"></header>
|
|
|
|
<!-- Main jumbotron for a primary marketing message or call to action -->
|
|
<div class="jumbotron">
|
|
<div class="container">
|
|
<h1>Getting Started</h1>
|
|
<p>Basic steps for working with <b>Editing geographic features</b> for offline.</p>
|
|
<!--<p><a class="btn btn-primary btn-lg" role="button">Samples »</a></p>-->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<!-- Example row of columns -->
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-12 col-lg-12">
|
|
|
|
<ul class="nav nav-pills">
|
|
<li class="active"><a href="#Step1" data-toggle="tab">Step 1</a></li>
|
|
<li><a href="#Step2" data-toggle="tab">Step 2</a></li>
|
|
<li><a href="#Step3" data-toggle="tab">Step 3</a></li>
|
|
<li><a href="#Step4" data-toggle="tab">Step 4</a></li>
|
|
</ul>
|
|
|
|
<div class="tab-content well">
|
|
<div class="tab-pane active" id="Step1">
|
|
<h3>Step 1: Fork or clone <i>offline-editor-js</i></h3>
|
|
<p>Here are the important directories to know:</p>
|
|
<ul>
|
|
<li><b>\dist</b> - concatenated library source and minified library files.</li>
|
|
<li><b>\samples</b> - examples that demonstrate the library's functionality.</li>
|
|
<li><b>\vendor</b> - contains IndexedDBShim and offline.js libraries</li>
|
|
</ul>
|
|
<br>
|
|
<a href="http://github.com/Esri/offline-editor-js"><button type="button" class="btn btn-md btn-success">Fork on GitHub</button></a>
|
|
</div>
|
|
<div class="tab-pane" id="Step2">
|
|
<h3>Step 2: Fill in the basics</h3>
|
|
<p>Add library references and build basic layout. Then test to make sure map loads.</p>
|
|
<br>
|
|
<pre class="prettyprint">
|
|
<code>
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
|
|
<title>Offline Features</title>
|
|
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
|
|
<link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css"">
|
|
<link rel="stylesheet" href="widgets/css/modal-popup.css">
|
|
<link rel="stylesheet" type="text/css" href="http://esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
|
|
<style>
|
|
#mapDiv {
|
|
min-height: 500px;
|
|
max-height: 1000px;
|
|
}
|
|
|
|
#img-offline-indicator {
|
|
padding: 8px;
|
|
position: relative; float: right;
|
|
}
|
|
|
|
/* Override mod-popup default */
|
|
.mod-popup-stop-input {color: black;}
|
|
.span-pending {color: blue; padding-left: 1em;}
|
|
.voffset20px { margin-top: 20px; }
|
|
.floatRight { float: right}
|
|
</style>
|
|
|
|
<!-- Include a reference to offline.js which detects online/offline conditions -->
|
|
<script src="../vendor/offline/offline.min.js"></script>
|
|
<script>
|
|
// Set how we pull in custom AMD modules
|
|
var path = location.pathname.replace(/[^\/]+$/, '');
|
|
var dojoConfig =
|
|
{
|
|
debug: true,
|
|
packages:[
|
|
{
|
|
name: "widgets",
|
|
location: path + "widgets/"
|
|
}]
|
|
}
|
|
|
|
// Set the online/offline detection options.
|
|
// More info at: http://github.hubspot.com/offline/docs/welcome/
|
|
Offline.options = {
|
|
checks: {
|
|
image: {
|
|
url: function() {
|
|
return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' +
|
|
(Math.floor(Math.random() * 1000000000));
|
|
}
|
|
},
|
|
active: 'image'
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
|
|
<script src="http://js.arcgis.com/3.11/"></script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="container voffset20px">
|
|
<div class="row">
|
|
<div class="col-xs-8">
|
|
<button class="btn btn-success" id="btn-online-offline">Go Offline</button>
|
|
<span class="span-pending">Pending Edits <span id="span-pending-edits" class="badge">0</span></span>
|
|
</div>
|
|
<div class="col-xs-4">
|
|
<button id="btn-state" class="btn btn-success btn-large floatRight">
|
|
<span id="state-span" class="glyphicon glyphicon-link"> Up</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="row voffset20px">
|
|
<div class="col-xs-12">
|
|
<div id="mapDiv"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Stub for modal popup -->
|
|
<div id="modal-popup"></div>
|
|
|
|
<script>
|
|
|
|
require([
|
|
"esri/map","esri/tasks/query",
|
|
"dojo/on","dojo/parser", "esri/renderers/SimpleRenderer",
|
|
"esri/symbols/SimpleMarkerSymbol","esri/Color",
|
|
"widgets/popup","esri/layers/FeatureLayer",
|
|
"//esri.github.com/bootstrap-map-js/src/js/bootstrapmap.js",
|
|
"../dist/offline-edit-src.js",
|
|
"dojo/domReady!"],
|
|
function(Map,Query,on,parser,SimpleRenderer,SimpleMarkerSymbol,
|
|
Color,ModalPopup,FeatureLayer,BootstrapMap){
|
|
|
|
var map, popup, editsStore;
|
|
var defaultSymbol;
|
|
var offlineFeaturesManager;
|
|
var btnOnlineOffline, btnState, pendingEdits;
|
|
var imgOfflineIndicator;
|
|
var closeBtn,saveBtn,deleteBtn,stopMainID,stopID,stopRoutes,stopNames;
|
|
|
|
initMap();
|
|
|
|
function initMap(){
|
|
if(map){
|
|
map.destroy();
|
|
}
|
|
|
|
map = BootstrapMap.create("mapDiv",{
|
|
basemap: "topo",
|
|
center: [-104.99,39.75], // longitude, latitude
|
|
zoom: 15
|
|
});
|
|
}
|
|
}
|
|
);
|
|
|
|
</script>
|
|
<!-- Bootstrap core JavaScript
|
|
================================================== -->
|
|
<!-- Placed at the end of the document so the pages load faster -->
|
|
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
|
|
</body>
|
|
</html>
|
|
|
|
</code>
|
|
</pre>
|
|
<div class="alert alert-info">NOTE: Replace paths with your references.</div>
|
|
</div>
|
|
<div class="tab-pane" id="Step3">
|
|
<h3>Step 3: Configure modal popup</h3>
|
|
<p>This initializes and configures the modal popup. Test to make sure map loads and popup displays.</p>
|
|
<br>
|
|
|
|
<pre class="prettyprint">
|
|
<code>
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
|
|
<title>Offline Features</title>
|
|
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
|
|
<link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css"">
|
|
<link rel="stylesheet" href="../samples/widgets/modal/css/modal-popup.css">
|
|
<link rel="stylesheet" type="text/css" href="http://esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
|
|
<style>
|
|
#mapDiv {
|
|
min-height: 500px;
|
|
max-height: 1000px;
|
|
}
|
|
|
|
#img-offline-indicator {
|
|
padding: 8px;
|
|
position: relative; float: right;
|
|
}
|
|
|
|
/* Override mod-popup default */
|
|
.mod-popup-stop-input {color: black;}
|
|
.span-pending {color: blue; padding-left: 1em;}
|
|
.voffset20px { margin-top: 20px; }
|
|
.floatRight { float: right}
|
|
</style>
|
|
|
|
<!-- Include a reference to offline.js which detects online/offline conditions -->
|
|
<script src="../vendor/offline/offline.min.js"></script>
|
|
<script>
|
|
// Set how we pull in custom AMD modules
|
|
var path = location.pathname.replace(/[^\/]+$/, '');
|
|
var dojoConfig =
|
|
{
|
|
debug: true,
|
|
packages:[
|
|
{
|
|
name: "widgets",
|
|
location: path + "../samples/widgets/"
|
|
}]
|
|
}
|
|
|
|
// Set the online/offline detection options.
|
|
// More info at: http://github.hubspot.com/offline/docs/welcome/
|
|
Offline.options = {
|
|
checks: {
|
|
image: {
|
|
url: function() {
|
|
return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' +
|
|
(Math.floor(Math.random() * 1000000000));
|
|
}
|
|
},
|
|
active: 'image'
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
|
|
<script src="http://js.arcgis.com/3.11/"></script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="container voffset20px">
|
|
<div class="row">
|
|
<div class="col-xs-8">
|
|
<button class="btn btn-success" id="btn-online-offline">Go Offline</button>
|
|
<span class="span-pending">Pending Edits <span id="span-pending-edits" class="badge">0</span></span>
|
|
</div>
|
|
<div class="col-xs-4">
|
|
<button id="btn-state" class="btn btn-success btn-large floatRight">
|
|
<span id="state-span" class="glyphicon glyphicon-link"> Up</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="row voffset20px">
|
|
<div class="col-xs-12">
|
|
<div id="mapDiv"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Stub for modal popup -->
|
|
<div id="modal-popup"></div>
|
|
|
|
<script>
|
|
|
|
require([
|
|
"esri/map","esri/tasks/query",
|
|
"dojo/on","dojo/parser", "esri/renderers/SimpleRenderer",
|
|
"esri/symbols/SimpleMarkerSymbol","esri/Color",
|
|
"widgets/modal/popup","esri/layers/FeatureLayer",
|
|
"//esri.github.com/bootstrap-map-js/src/js/bootstrapmap.js",
|
|
"../dist/offline-edit-src.js",
|
|
"dojo/domReady!"],
|
|
function(Map,Query,on,parser,SimpleRenderer,SimpleMarkerSymbol,
|
|
Color,ModalPopup,FeatureLayer,BootstrapMap) {
|
|
|
|
var map, popup, editsStore;
|
|
var defaultSymbol;
|
|
var offlineFeaturesManager;
|
|
var btnOnlineOffline, btnState, pendingEdits;
|
|
var imgOfflineIndicator;
|
|
var closeBtn,saveBtn,deleteBtn,stopMainID,stopID,stopRoutes,stopNames;
|
|
|
|
initVars();
|
|
initMap();
|
|
|
|
function initMap(){
|
|
if(map){
|
|
map.destroy();
|
|
}
|
|
|
|
map = BootstrapMap.create("mapDiv",{
|
|
basemap: "topo",
|
|
center: [-104.99,39.75], // longitude, latitude
|
|
zoom: 15
|
|
});
|
|
|
|
map.on("load",function(evt){
|
|
console.log("Map is loaded. Loading popup...")
|
|
window.setTimeout(function(){
|
|
popup.show();
|
|
},2000);
|
|
});
|
|
}
|
|
|
|
|
|
function initVars(){
|
|
|
|
editsStore = new O.esri.Edit.EditStore();
|
|
popup = new ModalPopup({animation: true, animationDuration: 1},"modal-popup");
|
|
popup.startup();
|
|
|
|
parser.parse();
|
|
|
|
// Check if browser state is online or offline
|
|
Offline.check();
|
|
Offline.on('up down', updateState );
|
|
|
|
|
|
btnOnlineOffline = document.getElementById("btn-online-offline");
|
|
imgOfflineIndicator = document.getElementById("state-span");
|
|
btnState = document.getElementById("btn-state");
|
|
pendingEdits = document.getElementById("span-pending-edits");
|
|
|
|
// Modify symbol size based on screen size.
|
|
// Bigger screens get smaller symbols. Smaller screens get larger symbols.
|
|
var width = window.innerWidth
|
|
|| document.documentElement.clientWidth
|
|
|| document.body.clientWidth;
|
|
|
|
var height = window.innerHeight
|
|
|| document.documentElement.clientHeight
|
|
|| document.body.clientHeight;
|
|
|
|
if (height >= 768 || width >= 1024) {
|
|
defaultSymbol= new SimpleMarkerSymbol().setStyle(
|
|
SimpleMarkerSymbol.STYLE_DIAMOND).setColor(
|
|
new Color([255,0,0,0.5])).setSize(20);
|
|
}
|
|
else{
|
|
defaultSymbol= new SimpleMarkerSymbol().setStyle(
|
|
SimpleMarkerSymbol.STYLE_DIAMOND).setColor(
|
|
new Color([255,0,0,0.5])).setSize(35);
|
|
}
|
|
|
|
// Variables for modal popup
|
|
closeBtn = document.getElementById("mod-popup-close-btn");
|
|
saveBtn = document.getElementById("mod-popup-save-btn");
|
|
deleteBtn = document.getElementById("mod-popup-delete-btn");
|
|
stopMainID = document.getElementById("stop-main-id");
|
|
stopID = document.getElementById("stop-id");
|
|
stopRoutes = document.getElementById("stop-routes");
|
|
stopNames = document.getElementById("stop-names");
|
|
|
|
}
|
|
|
|
function setModalPopupClickListeners(){
|
|
closeBtn.onclick = function(evt){
|
|
hideModalPopup();
|
|
}
|
|
|
|
saveBtn.onclick = function(evt) {
|
|
//TO-DO
|
|
}
|
|
|
|
}
|
|
|
|
function showModalPopup(graphic){
|
|
popup.graphic = graphic; // assign graphic to modPopup as a property.
|
|
popup.show();
|
|
}
|
|
|
|
function hideModalPopup(){
|
|
popup.hide();
|
|
}
|
|
|
|
// Force feature service offline
|
|
function goOnlineOffline(){
|
|
|
|
if(btnOnlineOffline.innerHTML == "Go Offline"){
|
|
toggleStateUp(false);
|
|
console.log("Map is offline");
|
|
}
|
|
else{
|
|
toggleStateUp(true);
|
|
console.log("Map is online");
|
|
}
|
|
}
|
|
|
|
// Set the UX to online or offline state
|
|
function toggleStateUp(state){
|
|
if(state){
|
|
btnOnlineOffline.innerHTML = "Go Offline";
|
|
offlineFeaturesManager.goOnline();
|
|
imgOfflineIndicator.className = "glyphicon glyphicon-link";
|
|
imgOfflineIndicator.innerHTML = " Up";
|
|
btnState.className = "btn btn-success btn-large floatRight";
|
|
}
|
|
else{
|
|
btnOnlineOffline.innerHTML = "Go Online";
|
|
offlineFeaturesManager.goOffline();
|
|
imgOfflineIndicator.className = "glyphicon glyphicon-thumbs-down";
|
|
imgOfflineIndicator.innerHTML = " Down";
|
|
btnState.className = "btn btn-danger btn-large floatRight";
|
|
}
|
|
}
|
|
|
|
// Automatically set the feature service online or offline.
|
|
function updateState(){
|
|
if(Offline.state === 'up'){
|
|
toggleStateUp(true);
|
|
}
|
|
else{
|
|
toggleStateUp(false);
|
|
}
|
|
}
|
|
}
|
|
);
|
|
|
|
</script>
|
|
<!-- Bootstrap core JavaScript
|
|
================================================== -->
|
|
<!-- Placed at the end of the document so the pages load faster -->
|
|
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
|
|
</body>
|
|
</html>
|
|
|
|
</code>
|
|
</pre>
|
|
<div class="alert alert-info">NOTE: Replace paths with your references.</div>
|
|
|
|
</div>
|
|
|
|
<div class="tab-pane" id="Step4">
|
|
<h3>Step 4: Configure offline editing.</h3>
|
|
<p>Enable the ability to store features (points, lines and polygons) while offline, and resync features when internet is restored.</p>
|
|
<br>
|
|
|
|
<ul id="myTab" class="nav nav-tabs">
|
|
<li class="active"><a href="#code" data-toggle="tab">Code</a></li>
|
|
<li class=""><a href="#mapTab" data-toggle="tab">Map</a></li>
|
|
</ul>
|
|
|
|
</br>
|
|
|
|
|
|
<div id="myTabContent" class="tab-content">
|
|
<div class="tab-pane fade in active" id="code">
|
|
<pre class="prettyprint">
|
|
<code>
|
|
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
|
|
<title>Offline Features</title>
|
|
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
|
|
<link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css"">
|
|
<link rel="stylesheet" href="../samples/widgets/modal/css/modal-popup.css">
|
|
<link rel="stylesheet" type="text/css" href="http://esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
|
|
<style>
|
|
#mapDiv {
|
|
min-height: 500px;
|
|
max-height: 1000px;
|
|
}
|
|
|
|
#img-offline-indicator {
|
|
padding: 8px;
|
|
position: relative; float: right;
|
|
}
|
|
|
|
/* Override mod-popup default */
|
|
.mod-popup-stop-input {color: black;}
|
|
.span-pending {color: blue; padding-left: 1em;}
|
|
.voffset20px { margin-top: 20px; }
|
|
.floatRight { float: right}
|
|
</style>
|
|
|
|
<!-- Include a reference to offline.js which detects online/offline conditions -->
|
|
<script src="../vendor/offline/offline.min.js"></script>
|
|
<script>
|
|
// Set how we pull in custom AMD modules
|
|
var path = location.pathname.replace(/[^\/]+$/, '');
|
|
var dojoConfig =
|
|
{
|
|
debug: true,
|
|
packages:[
|
|
{
|
|
name: "widgets",
|
|
location: path + "../samples/widgets/"
|
|
}]
|
|
}
|
|
|
|
// Set the online/offline detection options.
|
|
// More info at: http://github.hubspot.com/offline/docs/welcome/
|
|
Offline.options = {
|
|
checks: {
|
|
image: {
|
|
url: function() {
|
|
return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' +
|
|
(Math.floor(Math.random() * 1000000000));
|
|
}
|
|
},
|
|
active: 'image'
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
|
|
<script src="http://js.arcgis.com/3.11/"></script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="container voffset20px">
|
|
<div class="row">
|
|
<div class="col-xs-8">
|
|
<button class="btn btn-success" id="btn-online-offline">Go Offline</button>
|
|
<span class="span-pending">Pending Edits <span id="span-pending-edits" class="badge">0</span></span>
|
|
</div>
|
|
<div class="col-xs-4">
|
|
<button id="btn-state" class="btn btn-success btn-large floatRight">
|
|
<span id="state-span" class="glyphicon glyphicon-link"> Up</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="row voffset20px">
|
|
<div class="col-xs-12">
|
|
<div id="mapDiv"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Stub for modal popup -->
|
|
<div id="modal-popup"></div>
|
|
|
|
<script>
|
|
|
|
require([
|
|
"esri/map","esri/tasks/query",
|
|
"dojo/on","dojo/parser", "esri/renderers/SimpleRenderer",
|
|
"esri/symbols/SimpleMarkerSymbol","esri/Color",
|
|
"widgets/modal/popup","esri/layers/FeatureLayer",
|
|
"//esri.github.com/bootstrap-map-js/src/js/bootstrapmap.js",
|
|
"../dist/offline-edit-src.js",
|
|
"dojo/domReady!"],
|
|
function(Map,Query,on,parser,SimpleRenderer,SimpleMarkerSymbol,
|
|
Color,ModalPopup,FeatureLayer,BootstrapMap) {
|
|
|
|
var map, popup, editsStore;
|
|
var defaultSymbol;
|
|
var offlineFeaturesManager;
|
|
var btnOnlineOffline, btnState, pendingEdits;
|
|
var imgOfflineIndicator;
|
|
var closeBtn,saveBtn,deleteBtn,stopMainID,stopID,stopRoutes,stopNames;
|
|
|
|
initVars();
|
|
initMap();
|
|
|
|
function initMap(){
|
|
if(map){
|
|
map.destroy();
|
|
}
|
|
|
|
map = BootstrapMap.create("mapDiv",{
|
|
basemap: "topo",
|
|
center: [-104.99,39.75], // longitude, latitude
|
|
zoom: 15
|
|
});
|
|
|
|
|
|
busStopFeatureLayer = new FeatureLayer("http://services.arcgis.com/IZtlGBUe4KTzLOl4/arcgis/rest/services/BPX_RTD_BusStops2/FeatureServer/0", {
|
|
mode: FeatureLayer.MODE_SNAPSHOT,
|
|
outFields: ["OBJECTID","BSID","ROUTES","STOPNAME"]
|
|
});
|
|
|
|
//Set the graphics to red boxes to make it easy to click on them
|
|
//on a mobile device.
|
|
busStopFeatureLayer.setRenderer(new SimpleRenderer(defaultSymbol));
|
|
busStopFeatureLayer.on("update-end",function(evt){
|
|
|
|
// Now we can enable the button click listener
|
|
on(btnOnlineOffline,"click",goOnlineOffline);
|
|
|
|
initOfflineFeaturesMgr();
|
|
setFeatureLayerClickHandler();
|
|
setModalPopupClickListeners();
|
|
});
|
|
|
|
map.addLayer(busStopFeatureLayer);
|
|
}
|
|
|
|
|
|
function initVars(){
|
|
|
|
editsStore = new O.esri.Edit.EditStore();
|
|
popup = new ModalPopup({animation: true, animationDuration: 1},"modal-popup");
|
|
popup.startup();
|
|
|
|
parser.parse();
|
|
|
|
// Check if browser state is online or offline
|
|
Offline.check();
|
|
Offline.on('up down', updateState );
|
|
|
|
|
|
btnOnlineOffline = document.getElementById("btn-online-offline");
|
|
imgOfflineIndicator = document.getElementById("state-span");
|
|
btnState = document.getElementById("btn-state");
|
|
pendingEdits = document.getElementById("span-pending-edits");
|
|
|
|
// Modify symbol size based on screen size.
|
|
// Bigger screens get smaller symbols. Smaller screens get larger symbols.
|
|
var width = window.innerWidth
|
|
|| document.documentElement.clientWidth
|
|
|| document.body.clientWidth;
|
|
|
|
var height = window.innerHeight
|
|
|| document.documentElement.clientHeight
|
|
|| document.body.clientHeight;
|
|
|
|
if (height >= 768 || width >= 1024) {
|
|
defaultSymbol= new SimpleMarkerSymbol().setStyle(
|
|
SimpleMarkerSymbol.STYLE_DIAMOND).setColor(
|
|
new Color([255,0,0,0.5])).setSize(20);
|
|
}
|
|
else{
|
|
defaultSymbol= new SimpleMarkerSymbol().setStyle(
|
|
SimpleMarkerSymbol.STYLE_DIAMOND).setColor(
|
|
new Color([255,0,0,0.5])).setSize(35);
|
|
}
|
|
|
|
// Variables for modal popup
|
|
closeBtn = document.getElementById("mod-popup-close-btn");
|
|
saveBtn = document.getElementById("mod-popup-save-btn");
|
|
deleteBtn = document.getElementById("mod-popup-delete-btn");
|
|
stopMainID = document.getElementById("stop-main-id");
|
|
stopID = document.getElementById("stop-id");
|
|
stopRoutes = document.getElementById("stop-routes");
|
|
stopNames = document.getElementById("stop-names");
|
|
|
|
}
|
|
|
|
/**
|
|
* ************************************
|
|
* OFFLINE FEATURE SERVICE HANDLER CODE
|
|
* ************************************
|
|
*/
|
|
|
|
function initOfflineFeaturesMgr(){
|
|
offlineFeaturesManager = new O.esri.Edit.OfflineFeaturesManager();
|
|
|
|
// IMPORTANT!!!
|
|
// A proxy page may be required to upload attachments.
|
|
// If you are using a CORS enabled server you may be able to set the proxyPath to null.
|
|
// Refer to "Using the Proxy Page" for more information:
|
|
//https://developers.arcgis.com/en/javascript/jshelp/ags_proxy.html
|
|
offlineFeaturesManager.proxyPath = null;
|
|
|
|
offlineFeaturesManager.on(offlineFeaturesManager.events.EDITS_ENQUEUED, updatePendingEditStatus);
|
|
offlineFeaturesManager.on(offlineFeaturesManager.events.EDITS_SENT, updatePendingEditStatus);
|
|
offlineFeaturesManager.on(offlineFeaturesManager.events.ALL_EDITS_SENT, updatePendingEditStatus);
|
|
|
|
offlineFeaturesManager.extend(busStopFeatureLayer);
|
|
console.log("offlineFeaturesManager initialized.");
|
|
|
|
Offline.check();
|
|
Offline.on('up down', updateState);
|
|
}
|
|
|
|
// Display modal popup when someone clicks on a feature
|
|
// and load the fields with data from the feature service.
|
|
function setFeatureLayerClickHandler(){
|
|
busStopFeatureLayer.on("click", function(evt) {
|
|
currentFeature = evt.graphic
|
|
|
|
var query = new Query();
|
|
query.objectIds = [evt.graphic.attributes.OBJECTID];
|
|
busStopFeatureLayer.selectFeatures(query,FeatureLayer.SELECTION_NEW,
|
|
function(evt){
|
|
console.log("Success: " + JSON.stringify(evt[0].attributes));
|
|
showModalPopup(evt[0]);
|
|
var atts = evt[0].attributes
|
|
stopID.value = atts.OBJECTID;
|
|
stopMainID.value = atts.BSID;
|
|
stopNames.value = atts.STOPNAME;
|
|
stopRoutes.value = atts.ROUTES;
|
|
},function(err){
|
|
console.log("ERROR " + JSON.stringify(err));
|
|
});
|
|
}.bind(this));
|
|
}
|
|
|
|
function updatePendingEditStatus(){
|
|
if( editsStore.hasPendingEdits())
|
|
{
|
|
var edits = editsStore.retrieveEditsQueue();
|
|
pendingEdits.innerHTML = edits.length;
|
|
}
|
|
else
|
|
{
|
|
pendingEdits.innerHTML = 0;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* ************************************
|
|
* MODAL POPUP HANDLER CODE
|
|
* ************************************
|
|
*/
|
|
|
|
function setModalPopupClickListeners(){
|
|
closeBtn.onclick = function(evt){
|
|
hideModalPopup();
|
|
}
|
|
|
|
saveBtn.onclick = function(evt){
|
|
|
|
popup.graphic.attributes.ROUTES = stopRoutes.value;
|
|
popup.graphic.attributes.STOPNAME = stopNames.value;
|
|
|
|
busStopFeatureLayer.applyEdits(null,[popup.graphic],null,function(result){
|
|
console.log("Successfully saved changes to: " +
|
|
popup.graphic.attributes.STOPNAME);
|
|
hideModalPopup();
|
|
},
|
|
function(err){
|
|
alert("There was a problem while trying to save: " +
|
|
popup.graphic.attributes.STOPNAME);
|
|
})
|
|
}
|
|
|
|
deleteBtn.onclick = function(evt){
|
|
busStopFeatureLayer.applyEdits(null,null,[popup.graphic],function(result){
|
|
console.log("Successfully deleted: " + popup.graphic.attributes.STOPNAME);
|
|
hideModalPopup();
|
|
},
|
|
function(err){
|
|
alert("There was a problem while trying to delete: " +
|
|
popup.graphic.attributes.STOPNAME);
|
|
})
|
|
}
|
|
|
|
}
|
|
|
|
function showModalPopup(graphic){
|
|
popup.graphic = graphic; // assign graphic to modPopup as a property.
|
|
popup.show();
|
|
}
|
|
|
|
function hideModalPopup(){
|
|
popup.hide();
|
|
}
|
|
|
|
/**
|
|
* ************************************
|
|
* GO OFFLINE/ONLINE HANDLER CODE
|
|
* ************************************
|
|
*/
|
|
|
|
// Force feature service offline
|
|
function goOnlineOffline(){
|
|
|
|
if(btnOnlineOffline.innerHTML == "Go Offline"){
|
|
toggleStateUp(false);
|
|
console.log("Map is offline");
|
|
}
|
|
else{
|
|
toggleStateUp(true);
|
|
console.log("Map is online");
|
|
}
|
|
}
|
|
|
|
// Set the UX to online or offline state
|
|
function toggleStateUp(state){
|
|
if(state){
|
|
btnOnlineOffline.innerHTML = "Go Offline";
|
|
offlineFeaturesManager.goOnline();
|
|
imgOfflineIndicator.className = "glyphicon glyphicon-link";
|
|
imgOfflineIndicator.innerHTML = " Up";
|
|
btnState.className = "btn btn-success btn-large floatRight";
|
|
}
|
|
else{
|
|
btnOnlineOffline.innerHTML = "Go Online";
|
|
offlineFeaturesManager.goOffline();
|
|
imgOfflineIndicator.className = "glyphicon glyphicon-thumbs-down";
|
|
imgOfflineIndicator.innerHTML = " Down";
|
|
btnState.className = "btn btn-danger btn-large floatRight";
|
|
}
|
|
}
|
|
|
|
// Automatically set the feature service online or offline.
|
|
function updateState(){
|
|
if(Offline.state === 'up'){
|
|
toggleStateUp(true);
|
|
}
|
|
else{
|
|
toggleStateUp(false);
|
|
}
|
|
}
|
|
}
|
|
);
|
|
|
|
</script>
|
|
<!-- Bootstrap core JavaScript
|
|
================================================== -->
|
|
<!-- Placed at the end of the document so the pages load faster -->
|
|
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
|
|
</body>
|
|
</html>
|
|
|
|
</code>
|
|
</pre>
|
|
<div class="alert alert-info">NOTE: Replace paths with your references.</div>
|
|
</div>
|
|
|
|
<div class="tab-pane fade in" id="mapTab">
|
|
<div class="row">
|
|
<div class="col-xs-8">
|
|
<button class="btn btn-success" id="btn-online-offline">Go Offline</button>
|
|
<span class="span-pending">Pending Edits <span id="span-pending-edits" class="badge">0</span></span>
|
|
</div>
|
|
<div class="col-xs-4">
|
|
<button id="btn-state" class="btn btn-success btn-large floatRight"><span id="state-span" class="glyphicon glyphicon-link"> Up</span></button>
|
|
</div>
|
|
</div>
|
|
<div class="row voffset20px">
|
|
<div class="col-xs-12">
|
|
<div id="mapDiv"></div>
|
|
</div>
|
|
</div>
|
|
<div id="modal-popup"></div>
|
|
</div>
|
|
</div><!-- id="code" -->
|
|
</div><!-- id="myTabContent" -->
|
|
</div><!-- id="step4" -->
|
|
|
|
</br>
|
|
</div><!-- class="tab-content well" -->
|
|
</div><!-- class="col-sm-12 col-md-12 col-lg-12" -->
|
|
<hr>
|
|
</div> <!-- /container -->
|
|
|
|
<!-- mapping code -->
|
|
<script src="../vendor/offline/offline.min.js"></script>
|
|
<script>
|
|
|
|
// Set how we pull in custom AMD modules
|
|
var path = location.pathname.replace(/[^\/]+$/, '');
|
|
var dojoConfig =
|
|
{
|
|
debug: true,
|
|
packages:[
|
|
{
|
|
name: "widgets",
|
|
location: path + "../samples/widgets/"
|
|
}]
|
|
}
|
|
|
|
// Set the online/offline detection options.
|
|
// More info at: http://github.hubspot.com/offline/docs/welcome/
|
|
Offline.options = {
|
|
checks: {
|
|
image: {
|
|
url: function() {
|
|
return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' +
|
|
(Math.floor(Math.random() * 1000000000));
|
|
}
|
|
},
|
|
active: 'image'
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
|
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
|
|
<script src="http://js.arcgis.com/3.11/"></script>
|
|
|
|
<script>
|
|
|
|
$(document).ready(function() {
|
|
$("#header").load("../demo/header.html");
|
|
});
|
|
|
|
|
|
require([
|
|
"esri/map","esri/tasks/query",
|
|
"dojo/on","dojo/parser", "esri/renderers/SimpleRenderer",
|
|
"esri/symbols/SimpleMarkerSymbol","esri/Color",
|
|
"widgets/modal/popup","esri/layers/FeatureLayer",
|
|
"//esri.github.com/bootstrap-map-js/src/js/bootstrapmap.js",
|
|
"../dist/offline-edit-src.js",
|
|
"dojo/domReady!"],
|
|
function(Map,Query,on,parser,SimpleRenderer,SimpleMarkerSymbol,Color,ModalPopup,FeatureLayer,BootstrapMap) {
|
|
|
|
var map, popup, editsStore;
|
|
var defaultSymbol;
|
|
var offlineFeaturesManager;
|
|
var btnOnlineOffline, btnState, pendingEdits;
|
|
var imgOfflineIndicator;
|
|
var closeBtn,saveBtn,deleteBtn,stopMainID,stopID,stopRoutes,stopNames;
|
|
|
|
initVars();
|
|
$(document).ready(function () {
|
|
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
|
|
if (e.target.text === "Map") {
|
|
showMap();
|
|
}
|
|
});
|
|
});
|
|
|
|
function showMap(){
|
|
if(map){
|
|
map.destroy();
|
|
}
|
|
|
|
map = BootstrapMap.create("mapDiv",{
|
|
basemap: "topo", // comment out this basemap!
|
|
center: [-104.99,39.75], // longitude, latitude
|
|
zoom: 15
|
|
});
|
|
|
|
busStopFeatureLayer = new FeatureLayer("http://services.arcgis.com/IZtlGBUe4KTzLOl4/arcgis/rest/services/BPX_RTD_BusStops2/FeatureServer/0", {
|
|
mode: FeatureLayer.MODE_SNAPSHOT,
|
|
outFields: ["OBJECTID","BSID","ROUTES","STOPNAME"]
|
|
});
|
|
|
|
//Set the graphics to red boxes to make it easy to click on them
|
|
//on a mobile device.
|
|
busStopFeatureLayer.setRenderer(new SimpleRenderer(defaultSymbol));
|
|
busStopFeatureLayer.on("update-end",function(evt){
|
|
|
|
// Now we can enable the button click listener
|
|
on(btnOnlineOffline,"click",goOnlineOffline);
|
|
|
|
initOfflineFeaturesMgr();
|
|
setFeatureLayerClickHandler();
|
|
setModalPopupClickListeners();
|
|
});
|
|
|
|
map.addLayer(busStopFeatureLayer);
|
|
}
|
|
|
|
function initVars(){
|
|
|
|
editsStore = new O.esri.Edit.EditStore();
|
|
popup = new ModalPopup({animation: true, animationDuration: 1},"modal-popup");
|
|
popup.startup();
|
|
|
|
parser.parse();
|
|
|
|
// Check if browser state is online or offline
|
|
Offline.check();
|
|
Offline.on('up down', updateState );
|
|
|
|
|
|
btnOnlineOffline = document.getElementById("btn-online-offline");
|
|
imgOfflineIndicator = document.getElementById("state-span");
|
|
btnState = document.getElementById("btn-state");
|
|
pendingEdits = document.getElementById("span-pending-edits");
|
|
|
|
// Modify symbol size based on screen size.
|
|
// Bigger screens get smaller symbols. Smaller screens get larger symbols.
|
|
var width = window.innerWidth
|
|
|| document.documentElement.clientWidth
|
|
|| document.body.clientWidth;
|
|
|
|
var height = window.innerHeight
|
|
|| document.documentElement.clientHeight
|
|
|| document.body.clientHeight;
|
|
|
|
if (height >= 768 || width >= 1024) {
|
|
defaultSymbol= new SimpleMarkerSymbol().setStyle(
|
|
SimpleMarkerSymbol.STYLE_DIAMOND).setColor(
|
|
new Color([255,0,0,0.5])).setSize(20);
|
|
}
|
|
else{
|
|
defaultSymbol= new SimpleMarkerSymbol().setStyle(
|
|
SimpleMarkerSymbol.STYLE_DIAMOND).setColor(
|
|
new Color([255,0,0,0.5])).setSize(35);
|
|
}
|
|
|
|
// Variables for modal popup
|
|
closeBtn = document.getElementById("mod-popup-close-btn");
|
|
saveBtn = document.getElementById("mod-popup-save-btn");
|
|
deleteBtn = document.getElementById("mod-popup-delete-btn");
|
|
stopMainID = document.getElementById("stop-main-id");
|
|
stopID = document.getElementById("stop-id");
|
|
stopRoutes = document.getElementById("stop-routes");
|
|
stopNames = document.getElementById("stop-names");
|
|
|
|
}
|
|
|
|
function initOfflineFeaturesMgr(){
|
|
offlineFeaturesManager = new O.esri.Edit.OfflineFeaturesManager();
|
|
|
|
// IMPORTANT!!!
|
|
// A proxy page may be required to upload attachments.
|
|
// If you are using a CORS enabled server you may be ablew to set the proxyPath to null.
|
|
// Refer to "Using the Proxy Page" for more information: https://developers.arcgis.com/en/javascript/jshelp/ags_proxy.html
|
|
offlineFeaturesManager.proxyPath = null;
|
|
|
|
offlineFeaturesManager.on(offlineFeaturesManager.events.EDITS_ENQUEUED, updatePendingEditStatus);
|
|
offlineFeaturesManager.on(offlineFeaturesManager.events.EDITS_SENT, updatePendingEditStatus);
|
|
offlineFeaturesManager.on(offlineFeaturesManager.events.ALL_EDITS_SENT, updatePendingEditStatus);
|
|
|
|
offlineFeaturesManager.extend(busStopFeatureLayer);
|
|
console.log("offlineFeaturesManager initialized.");
|
|
|
|
Offline.check();
|
|
Offline.on('up down', updateState);
|
|
}
|
|
|
|
/**
|
|
* Display modal popup when someone clicks on a feature
|
|
*/
|
|
function setFeatureLayerClickHandler(){
|
|
busStopFeatureLayer.on("click", function(evt) {
|
|
currentFeature = evt.graphic
|
|
|
|
var query = new Query();
|
|
query.objectIds = [evt.graphic.attributes.OBJECTID];
|
|
busStopFeatureLayer.selectFeatures(query,FeatureLayer.SELECTION_NEW,
|
|
function(evt){
|
|
console.log("Success: " + JSON.stringify(evt[0].attributes));
|
|
showModalPopup(evt[0]);
|
|
var atts = evt[0].attributes
|
|
stopID.value = atts.OBJECTID;
|
|
stopMainID.value = atts.BSID;
|
|
stopNames.value = atts.STOPNAME;
|
|
stopRoutes.value = atts.ROUTES;
|
|
},function(err){
|
|
console.log("ERROR " + JSON.stringify(err));
|
|
});
|
|
}.bind(this));
|
|
}
|
|
|
|
function setModalPopupClickListeners(){
|
|
closeBtn.onclick = function(evt){
|
|
hideModalPopup();
|
|
}
|
|
|
|
saveBtn.onclick = function(evt){
|
|
|
|
popup.graphic.attributes.ROUTES = stopRoutes.value;
|
|
popup.graphic.attributes.STOPNAME = stopNames.value;
|
|
|
|
busStopFeatureLayer.applyEdits(null,[popup.graphic],null,function(result){
|
|
console.log("Successfully saved changes to: " + popup.graphic.attributes.STOPNAME);
|
|
hideModalPopup();
|
|
},
|
|
function(err){
|
|
alert("There was a problem while trying to save: " + popup.graphic.attributes.STOPNAME);
|
|
})
|
|
}
|
|
|
|
deleteBtn.onclick = function(evt){
|
|
busStopFeatureLayer.applyEdits(null,null,[popup.graphic],function(result){
|
|
console.log("Successfully deleted: " + popup.graphic.attributes.STOPNAME);
|
|
hideModalPopup();
|
|
},
|
|
function(err){
|
|
alert("There was a problem while trying to delete: " + popup.graphic.attributes.STOPNAME);
|
|
})
|
|
}
|
|
}
|
|
|
|
function showModalPopup(graphic){
|
|
popup.graphic = graphic; // assign graphic to modPopup as a property.
|
|
popup.show();
|
|
}
|
|
|
|
function hideModalPopup(){
|
|
popup.hide();
|
|
}
|
|
|
|
function updatePendingEditStatus(){
|
|
if( editsStore.hasPendingEdits())
|
|
{
|
|
var edits = editsStore.retrieveEditsQueue();
|
|
pendingEdits.innerHTML = edits.length;
|
|
}
|
|
else
|
|
{
|
|
pendingEdits.innerHTML = 0;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Force the tileLayer between online and offline
|
|
*/
|
|
function goOnlineOffline(){
|
|
|
|
if(btnOnlineOffline.innerHTML == "Go Offline"){
|
|
toggleStateUp(false);
|
|
console.log("Map is offline");
|
|
}
|
|
else{
|
|
toggleStateUp(true);
|
|
console.log("Map is online");
|
|
}
|
|
}
|
|
|
|
function toggleStateUp(state){
|
|
if(state){
|
|
btnOnlineOffline.innerHTML = "Go Offline";
|
|
offlineFeaturesManager.goOnline();
|
|
imgOfflineIndicator.className = "glyphicon glyphicon-link";
|
|
imgOfflineIndicator.innerHTML = " Up";
|
|
btnState.className = "btn btn-success btn-large floatRight";
|
|
}
|
|
else{
|
|
btnOnlineOffline.innerHTML = "Go Online";
|
|
offlineFeaturesManager.goOffline();
|
|
imgOfflineIndicator.className = "glyphicon glyphicon-thumbs-down";
|
|
imgOfflineIndicator.innerHTML = " Down";
|
|
btnState.className = "btn btn-danger btn-large floatRight";
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Set the map online or offline.
|
|
*/
|
|
function updateState(){
|
|
if(Offline.state === 'up'){
|
|
toggleStateUp(true);
|
|
}
|
|
else{
|
|
toggleStateUp(false);
|
|
}
|
|
}
|
|
}
|
|
);
|
|
</script>
|
|
|
|
<!-- Bootstrap core JavaScript
|
|
================================================== -->
|
|
<!-- Placed at the end of the document so the pages load faster -->
|
|
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
|
|
<!-- add syntax highlighting to code snippts -->
|
|
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
|
|
</body>
|
|
</html> |