Add library references and build basic layout. Then test to make sure map loads.
+Add library references and build basic layout. Then test to make sure map loads. + A full working version of this step is included in /demo/samples/editing-step1.html.
@@ -98,9 +99,9 @@
<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" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
+ <link rel="stylesheet" href="//js.arcgis.com/3.13/esri/css/esri.css">
+ <link rel="stylesheet" href="../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 {
@@ -121,7 +122,7 @@
</style>
<!-- Include a reference to offline.js which detects online/offline conditions -->
- <script src="../vendor/offline/offline.min.js"></script>
+ <script src="../../vendor/offline/offline.min.js"></script>
<script>
// Set how we pull in custom AMD modules
var path = location.pathname.replace(/[^\/]+$/, '');
@@ -131,7 +132,7 @@
packages:[
{
name: "widgets",
- location: path + "widgets/"
+ location: path + "../widgets/modal/"
}]
}
@@ -150,8 +151,7 @@
}
</script>
- <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
- <script src="http://js.arcgis.com/3.11/"></script>
+ <script src="//js.arcgis.com/3.13/"></script>
</head>
<body>
@@ -179,52 +179,55 @@
<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){
+ 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;
+ var map, popup, editsStore;
+ var defaultSymbol;
+ var offlineFeaturesManager;
+ var btnOnlineOffline, btnState, pendingEdits;
+ var imgOfflineIndicator;
+ var closeBtn,saveBtn,deleteBtn,stopMainID,stopID,stopRoutes,stopNames;
- initMap();
+ initMap();
- function initMap(){
+ function initMap(){
- map = BootstrapMap.create("mapDiv",{
- basemap: "topo",
- center: [-104.99,39.75], // longitude, latitude
- zoom: 15
- });
+ 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>
+<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
+<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
- This initializes and configures the modal popup. Test to make sure map loads and popup displays.
+This initializes and configures the modal popup. Test to make sure map loads and popup displays. + You'll notice the buttons on the popup don't work yet. We'll fix that in the Step 3. + A full working version of this step is included in /demo/samples/editing-step2.html.
@@ -235,9 +238,9 @@ require([
<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" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
+ <link rel="stylesheet" href="//js.arcgis.com/3.13/esri/css/esri.css">
+ <link rel="stylesheet" href="../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 {
@@ -258,7 +261,7 @@ require([
</style>
<!-- Include a reference to offline.js which detects online/offline conditions -->
- <script src="../vendor/offline/offline.min.js"></script>
+ <script src="../../vendor/offline/offline.min.js"></script>
<script>
// Set how we pull in custom AMD modules
var path = location.pathname.replace(/[^\/]+$/, '');
@@ -268,7 +271,7 @@ require([
packages:[
{
name: "widgets",
- location: path + "../samples/widgets/"
+ location: path + "../widgets/modal/"
}]
}
@@ -287,8 +290,7 @@ require([
}
</script>
- <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
- <script src="http://js.arcgis.com/3.11/"></script>
+ <script src="//js.arcgis.com/3.13/"></script>
</head>
<body>
@@ -316,174 +318,175 @@ require([
<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) {
+ 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;
+ var map, popup, editsStore;
+ var defaultSymbol;
+ var offlineFeaturesManager;
+ var btnOnlineOffline, btnState, pendingEdits;
+ var imgOfflineIndicator;
+ var closeBtn,saveBtn,deleteBtn,stopMainID,stopID,stopRoutes,stopNames;
- initVars();
- initMap();
+ initVars();
+ initMap();
- function initMap(){
+ function initMap(){
- map = BootstrapMap.create("mapDiv",{
- basemap: "topo",
- center: [-104.99,39.75], // longitude, latitude
- zoom: 15
- });
+ 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);
+ map.on("load",function(evt){
+ console.log("Map is loaded. Loading popup...")
+ window.setTimeout(function(){
+ popup.show();
+ },2000);
+ });
}
- // 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 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 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");
+ function showModalPopup(graphic){
+ popup.graphic = graphic; // assign graphic to modPopup as a property.
+ popup.show();
}
- else{
- toggleStateUp(true);
- console.log("Map is online");
+
+ 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);
+ }
}
}
-
- // 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>
+<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
+<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
- Enable the ability to store features (points, lines and polygons) while offline, and resync features when internet is restored.
+Enable the ability to store features (points, lines and polygons) while offline, and resync features when internet is restored. + A full working version of this step is included in /demo/samples/editing-step3.html.