mirror of
https://github.com/Esri/offline-editor-js.git
synced 2026-02-07 14:26:22 +00:00
Andy
commit
994cf89f84
25
README.md
25
README.md
@ -1,7 +1,7 @@
|
||||
offline-editor-js
|
||||
=================
|
||||
|
||||
A prototype JavaScript toolkit for using the ArcGIS API for JavaScript offline. It manages both editing and tiles in an offline mode. It's still a work-in-progress so if you have suggestions open an issue or if you want to make a pull request we welcome your proposed modifications.
|
||||
A prototype JavaScript toolkit for using the ArcGIS API for JavaScript offline. It offers both lightweight editing and tile management capabilities while offline or intermittently offline. It's still a work-in-progress so if you have suggestions open an issue or if you want to make a pull request we welcome your proposed modifications.
|
||||
|
||||
*IMPORTANT:* If you want a full, robust offline solution then you should be using our ArcGIS Runtime SDKs for .NET, WPF, Java, iOS, Android and Qt.
|
||||
|
||||
@ -10,8 +10,10 @@ This repo contains the following libraries:
|
||||
- `/edit`: handles vector features and stores adds, updates and deletes while offline. Resync's edits with server once connection is reestablished
|
||||
* `offlineFeaturesManager` - Extends and overrides a feature layer.
|
||||
* `editsStore` - Provides static helper methods for working with the offline data store.
|
||||
* `attachmentsStore` - Provides limited support for attachments.
|
||||
- `/tiles`: stores portions of tiled maps client-side and uses the cached tiles when device is offline
|
||||
* `offlineTilesEnabler` Extends and overrides a tiled map service.
|
||||
* `offlineTilesEnabler` Extends and overrides a tiled map service from ArcGIS Online or for partial offline use.
|
||||
* `OfflineTilesEnablerLayer` Extends any Esri tiled basemap service for a web app that has a requirement for browser reload and/or restart. This library should be used in conjunction with an application cache coding pattern.
|
||||
- `/tpk`: lets you work with TPK files.
|
||||
* `TPKLayer` - parses a TPK file and displays it as a tiled map layer.
|
||||
- `/utils`: contains various helper libraries.
|
||||
@ -28,7 +30,7 @@ The following workflow is currently supported for both both features and tiles:
|
||||
|
||||
4) Return online when you want to resync edits.
|
||||
|
||||
Using an [application manifest](https://developer.mozilla.org/en-US/docs/HTML/Using_the_application_cache) allows you to reload and restart the application while offline. The application manifest let's you store .html, .js, .css and image files locally.
|
||||
Using an [application manifest](https://developer.mozilla.org/en-US/docs/HTML/Using_the_application_cache) allows you to reload and restart the application while offline. The application manifest lets you store .html, .js, .css and image files locally.
|
||||
|
||||
__Attachment Support__: Attachments are supported with some limitations. See documentation [here](./doc/attachments.md)
|
||||
|
||||
@ -48,7 +50,7 @@ Extends and overrides a tiled map service. Provides the ability to customize the
|
||||
|
||||
##TPKLayer
|
||||
|
||||
Extends TileMapServiceLayer. You can display TPK files with this library.
|
||||
Extends TileMapServiceLayer. You can display TPK files with this library. TPK's are binary tile package files. Go [here](http://resources.arcgis.com/en/help/main/10.1/index.html#//00170000017w000000) for more information on how to create a TPK file.
|
||||
|
||||
* __Click [here](doc/tpklayer.md) to see the full API doc for `TPKLayer`__
|
||||
|
||||
@ -57,7 +59,7 @@ Extends TileMapServiceLayer. You can display TPK files with this library.
|
||||
* [Learn more about using the `tile` library](doc/howtousetiles.md)
|
||||
* [Learn more about using the `edit` library](doc/howtouseeditlibrary.md)
|
||||
* [Learn more about using the `tpk` library](doc/howtousetpklibrary.md)
|
||||
* [Learn more abuut using an application cache with this library](doc/howtouseappcache.md)
|
||||
* [Learn more about using an application cache with this library](doc/howtouseappcache.md)
|
||||
|
||||
|
||||
##Setup Instructions
|
||||
@ -71,8 +73,8 @@ Extends TileMapServiceLayer. You can display TPK files with this library.
|
||||
##Samples
|
||||
* `appcache-features.html` - shows how to work with the application manifest, tiles and features.
|
||||
* `appcache-tiles.html` - shows how to work with the application manifest and map tiles.
|
||||
* `attachments-editor.html` - demonstrates how to work with this library and feature attachments.
|
||||
* `military-offline.html` - shows working with points, lines and polygons locally.
|
||||
* `attachments-editor.html` - demonstrates how to work with this library using feature attachments.
|
||||
* ~~`military-offline.html`~~ - renamed `draw-pointlinepoly-offline.html` shows working with points, lines and polygons locally.
|
||||
* `tpklayer.html` - shows how to work with TPK files.
|
||||
* `tiles-indexed-db.html` - shows how to work with storing tiles locally.
|
||||
* `Gruntfile.js` - a node.js app and its associated `package.json` file to help with creating an application manifest file.
|
||||
@ -81,19 +83,20 @@ Extends TileMapServiceLayer. You can display TPK files with this library.
|
||||
##Dependencies
|
||||
|
||||
* ArcGIS API for JavaScript (v3.8+)
|
||||
* NOTE: browser limitations and technical dependencies. The offline capabilities in this toolkit depend on psuedo-persistent HTML5 capabilities being present in the browser. Go [here](doc/dependencies.md) for a detailed breakdown of the information.
|
||||
* NOTE: browser limitations and technical dependencies. The offline capabilities in this toolkit depend on certain HTML5 capabilities being present in the browser. Go [here](doc/dependencies.md) for a detailed breakdown of the information.
|
||||
* We offer browser support for Chrome and Safari only, at this time. Some of the capabilities in the repository will not work on Internet Explorer. We continue to evaluate IE's capabilities as new releases become available to try and identify a point where we might be able to support it.
|
||||
|
||||
* Sub-modules (see `/vendor` directory)
|
||||
|
||||
* [offline.js](https://github.com/hubspot/offline) - it allows detection of the online/offline condition and provides events to hook callbacks on when this condition changes
|
||||
* [IndexedDBShim](https://github.com/axemclion/IndexedDBShim) - polyfill to simulate indexed db functionality in browsers/platforms where it is not supported (notably iOS Safari, PhoneGap, Android Chrome)
|
||||
- IMPORTANT: There is a know [issue](https://github.com/axemclion/IndexedDBShim/issues/115) with IndexedDBShim on Safari. The workaround is to switch from using /dist/IndexedDBShim.min.js to just using IndexedDBShim.js and then modify line #1467 to a more appropriate size that will meet all your storage needs, for example: ```var DEFAULT_DB_SIZE = 24 * 1024 * 1024```
|
||||
* [IndexedDBShim](https://github.com/axemclion/IndexedDBShim) - polyfill to simulate indexedDB functionality in browsers/platforms where it is not supported (notably desktop Safari and iOS Safari)
|
||||
- IMPORTANT: There are known [issues](https://github.com/axemclion/IndexedDBShim/issues/115) with IndexedDBShim on Safari. For Safari, the storage error workaround is to switch from using /dist/IndexedDBShim.min.js to just using IndexedDBShim.js and then search for and modify the line that defines the value for `DEFAULT_DB_SIZE`. Set this to more appropriate size that will meet all your storage needs, for example: ```var DEFAULT_DB_SIZE = 24 * 1024 * 1024```
|
||||
* [jasmine.async](https://github.com/derickbailey/jasmine.async.git) - library to help implementing tests of async functionality (used in tests)
|
||||
|
||||
* Non sub-module based libraries
|
||||
* [FileSaver.js](https://github.com/Esri/offline-editor-js/blob/master/lib/tiles/README.md) - library to assist with uploading and downloading of files containing tile information.
|
||||
* [grunt-manifest](https://github.com/gunta/grunt-manifest) node.js library to assist with the creation of manifest files.
|
||||
* [zip](http://gildas-lormeau.github.io/zip.js/) A library for zipping and unzipping files.
|
||||
* [zip](http://gildas-lormeau.github.io/zip.js/) A library for zipping and unzipping files.
|
||||
* [xml2json](https://code.google.com/p/x2js/) A library for converting XML to JSON. Seems to handle complex XML.
|
||||
|
||||
## Resources
|
||||
|
||||
@ -3,11 +3,11 @@ Tips on using application cache
|
||||
|
||||
If you have a requirement to reload your application or restart the browser while offline then you will need to use the [application cache](http://appcachefacts.info/). Some developers also use application caches to speed up page reload performance. For example, Google uses an application cache when load their main web page.
|
||||
|
||||
The application cache will allow you to store any file that is required for offline use. The list includes html files, JavaScript libraries, CSS and images. Any file that your application requires to run normally will have to be referenced in the application cache.
|
||||
The application cache, also sometimes referred to as the 'manifest file', will allow you to store any file that is required for offline use. The list of acceptable files includes html, JavaScript libraries, CSS and images. Any file that your application requires to run normally will have to be referenced in the application cache.
|
||||
|
||||
Once an application is stored in the application cache it will be available the next time an application restarts.
|
||||
Once an application and its associated files are stored in the application cache it will be available from the cache the next time an application restarts.
|
||||
|
||||
## Using AppCaches with your ArcGIS web app
|
||||
## Using application caches with your ArcGIS web app
|
||||
|
||||
**Step 1** Make sure you are using an optimized build of the ArcGIS API for JavaScript. You can create an optimized build at [http://jso.arcgis.com/](http://jso.arcgis.com/). This will create a single file that contains all the necessary modules for your app. There are options to host the build via CDN or locally. Either approach will work.
|
||||
|
||||
@ -22,7 +22,7 @@ NOTE: You cannot use the regular CDN for the ArcGIS API for JavaScript because t
|
||||
|
||||
```
|
||||
|
||||
**Step 4** Be sure to include and use the `/utils/appCacheManager.js` library as a module in your application. This will enable you to monitor what's going on in the application cache and capture specific events. Here is a psuedo code example of how to instantiate it:
|
||||
**Step 4** Be sure to include and use the `/utils/appCacheManager.js` library as a module in your application. This will enable you to monitor what's going on in the application cache and capture specific events. For example if you want to know when the cache file has completely finalized its loading process then you can listen for the CACHE_LOADED event. Here is a psuedo code example of how to instantiate it:
|
||||
|
||||
```js
|
||||
|
||||
@ -36,11 +36,13 @@ NOTE: You cannot use the regular CDN for the ArcGIS API for JavaScript because t
|
||||
In the `/samples` directory there are two examples, `appcache-features.html` and `appcache-tiles.html` that demonstrate how to use tiles, features and the appCacheManager with the application cache.
|
||||
|
||||
###Configuring your web server
|
||||
Your web server must be able to serve up the MIME TYPE `TEXT/cache-manifest`. If this is missing there's a really good chance that the application cache file won't be served up to your app.
|
||||
Your web server must be able to serve up the MIME TYPE `TEXT/cache-manifest`. If this is missing there's a really good chance that the application cache file won't be served up to your app.
|
||||
|
||||
If you have your web server set up to serve no-cache headers, you should temporarily disable that feature. Some browsers will refuse to accept the application cache file if it is served via a no-cache header.
|
||||
|
||||
### Clearing the application cache in a browser
|
||||
|
||||
When you do testing with an application cache, any time you make a change to your application HTML, CSS or JS you will need to delete the existing application cache. Otherwise, any changes you make will not be reflected in the app.
|
||||
When you do testing with an application cache, any time you make a change to your application HTML, CSS or JS you will need to delete the existing application cache. Otherwise, any changes you make will not be reflected in the app.
|
||||
|
||||
**Simply deleting your web cache the normal way won't clear an application cache!**
|
||||
|
||||
@ -48,6 +50,8 @@ In Chrome you can navigate to chrome://appcache-internals/ then select the appro
|
||||
|
||||
In Safari iPhone and iPad go to settings and select "Clear Cookies and Data."
|
||||
|
||||
Safari on desktop can be alot more tricky. Simply attempting Develop > Empty Caches may not work. On a Mac you will have to: close your browser, manually delete the .db file by going to /<username>/library/Caches/com.Apple.Safari and move any item ending in .db to the trash, then restart browser. If this doesn't work then try restarting your machine. Yep, it's an awful workflow and it's been a known bug in Safari dating back to atleast version 6.
|
||||
|
||||
If you want to test on Firefox then try Tools > Options > Advanced > Network > Offline data > Clear Now. More info is available [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache#Storage_location_and_clearing_the_offline_cache).
|
||||
|
||||
As for IE, this library doesn't currently support any versions.
|
||||
|
||||
@ -31,6 +31,7 @@ define([
|
||||
ONLINE: "online", // all edits will directly go to the server
|
||||
OFFLINE: "offline", // edits will be enqueued
|
||||
RECONNECTING: "reconnecting", // sending stored edits to the server
|
||||
attachmentsStore: null, // indexedDB for storing attachments
|
||||
|
||||
// manager emits event when...
|
||||
events: {
|
||||
@ -503,7 +504,7 @@ define([
|
||||
this._replayStoredEdits(function(success,responses)
|
||||
{
|
||||
var result = { features: { success:success, responses: responses} };
|
||||
if( this.attachmentsStore )
|
||||
if( this.attachmentsStore != null )
|
||||
{
|
||||
console.log("sending attachments");
|
||||
this._sendStoredAttachments(function(success, responses)
|
||||
@ -836,6 +837,17 @@ define([
|
||||
if(optimizedEdits.hasOwnProperty(layerUrl))
|
||||
{
|
||||
layer = this._featureLayers[ layerUrl ];
|
||||
|
||||
// If the layer has attachments then check to see if the attachmentsStore has been initialized
|
||||
if(this.attachmentsStore == null && layer.hasAttachments){
|
||||
console.log("ERROR: you need to run OfflineFeaturesManager.initAttachments(). Check the Attachments doc for more info.")
|
||||
throw new Error("OfflineFeaturesManager: Attachments aren't initialized.");
|
||||
}
|
||||
|
||||
// Assign the attachmentsStore to the layer as a private var so we can access it from
|
||||
// the promises applyEdits() method.
|
||||
layer._attachmentsStore = this.attachmentsStore;
|
||||
|
||||
layerEdits = optimizedEdits[layerUrl];
|
||||
|
||||
console.assert(Object.keys(layerEdits).length !== 0);
|
||||
@ -894,7 +906,9 @@ define([
|
||||
layer.onEditsComplete = layer.__onEditsComplete; delete layer.__onEditsComplete;
|
||||
layer.onBeforeApplyEdits = layer.__onBeforeApplyEdits; delete layer.__onBeforeApplyEdits;
|
||||
var newObjectIds = addResults.map(function(r){ return r.objectId; });
|
||||
if( layer.hasAttachments && tempObjectIds.length > 0)
|
||||
|
||||
// We use a different pattern if the attachmentsStore is valid and the layer has attachments
|
||||
if( layer._attachmentsStore != null && layer.hasAttachments && tempObjectIds.length > 0)
|
||||
{
|
||||
layer._replaceFeatureIds(tempObjectIds,newObjectIds,function(success)
|
||||
{
|
||||
|
||||
@ -355,7 +355,7 @@ define([
|
||||
var tilingScheme = new TilingScheme(this);
|
||||
store.getAllTiles(function(url,img,err)
|
||||
{
|
||||
if(url)
|
||||
if(url && url.indexOf(layer.url) == 0)
|
||||
{
|
||||
var components = url.split("/");
|
||||
var level = parseInt(components[ components.length - 3],10);
|
||||
@ -368,7 +368,10 @@ define([
|
||||
}
|
||||
else
|
||||
{
|
||||
callback(null,err);
|
||||
if(!url)
|
||||
{
|
||||
callback(null,err);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
@ -673,8 +676,7 @@ define([
|
||||
*/
|
||||
_getTileInfoPrivate: function(url, callback){
|
||||
var req = new XMLHttpRequest();
|
||||
var urlTag = "?" + url + "?f=pjson";
|
||||
var url = this.offline.proxyPath? this.offline.proxyPath + urlTag : urlTag;
|
||||
var url = this.offline.proxyPath? this.offline.proxyPath + "?" + url + "?f=pjson" : url + "?f=pjson";
|
||||
req.open("GET", url, true);
|
||||
req.onload = function()
|
||||
{
|
||||
|
||||
@ -124,7 +124,7 @@ define([
|
||||
return tileid;
|
||||
};
|
||||
|
||||
callback(true);
|
||||
callback && callback(true);
|
||||
}
|
||||
}.bind(this));
|
||||
}
|
||||
@ -255,24 +255,39 @@ define([
|
||||
*/
|
||||
layer.getTilePolygons = function(callback) // callback(Polygon polygon) or callback(null, error)
|
||||
{
|
||||
var components, level, col, row, cellId, polygon;
|
||||
|
||||
var store = this.offline.store;
|
||||
var tilingScheme = new TilingScheme(this);
|
||||
store.getAllTiles(function(url,img,err)
|
||||
{
|
||||
if(url)
|
||||
if(url && url.indexOf(layer.url) == 0)
|
||||
{
|
||||
var components = url.split("/");
|
||||
var level = parseInt(components[ components.length - 3],10);
|
||||
var col = parseInt(components[ components.length - 2],10);
|
||||
var row = parseInt(components[ components.length - 1],10);
|
||||
var cellId = [row,col];
|
||||
var polygon = tilingScheme.getCellPolygonFromCellId(cellId, level);
|
||||
//if( level == 15)
|
||||
callback(polygon);
|
||||
if(url.indexOf("_alllayers") != -1)
|
||||
{
|
||||
// V101/LAYERS/_alllayers/L01/R0C18C0B10
|
||||
components = url.split("/");
|
||||
level = parseInt(components[ components.length - 2].slice(1),10);
|
||||
col = parseInt( components[ components.length -1].substring(1,5), 16);
|
||||
row = parseInt( components[ components.length -1].substring(6,10), 16);
|
||||
}
|
||||
else
|
||||
{
|
||||
components = url.split("/");
|
||||
level = parseInt(components[ components.length - 3],10);
|
||||
col = parseInt(components[ components.length - 2],10);
|
||||
row = parseInt(components[ components.length - 1],10);
|
||||
}
|
||||
cellId = [row,col];
|
||||
polygon = tilingScheme.getCellPolygonFromCellId(cellId, level);
|
||||
callback(polygon);
|
||||
}
|
||||
else
|
||||
{
|
||||
callback(null,err);
|
||||
if(!url)
|
||||
{
|
||||
callback(null,err);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
@ -60,7 +60,6 @@ module.exports = function(grunt) {
|
||||
timestamp: true
|
||||
},
|
||||
src: [
|
||||
"*.html",
|
||||
"../samples/images/*.png",
|
||||
"../samples/css/*.css",
|
||||
"../vendor/IndexedDBShim/dist/*.js",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
CACHE MANIFEST
|
||||
# This manifest was generated by grunt-manifest HTML5 Cache Manifest Generator
|
||||
# Time: Wed Jun 11 2014 13:42:14 GMT-0600 (MDT)
|
||||
# Time: Tue Jun 17 2014 11:23:22 GMT-0600 (MDT)
|
||||
|
||||
CACHE:
|
||||
# manifest-generator, version: 0.0.1
|
||||
@ -34,14 +34,6 @@ http://js.arcgis.com/3.9/js/esri/dijit/images/ajax-loader.gif
|
||||
# required local html
|
||||
# /xyz/style.css
|
||||
# /img/1.png
|
||||
appcache-features.html
|
||||
appcache-tiles.html
|
||||
attachments-editor-online.html
|
||||
attachments-editor.html
|
||||
military-offline.html
|
||||
service-inspector.html
|
||||
tiles-indexed-db.html
|
||||
tpk-layer.html
|
||||
../samples/images/blue-pin.png
|
||||
../samples/images/red-pin.png
|
||||
../samples/css/modular-popup.css
|
||||
|
||||
@ -259,6 +259,8 @@
|
||||
console.log("Tile Layer Loaded.");
|
||||
},_isOnline);
|
||||
|
||||
tileLayer.offline.proxyPath = null;
|
||||
|
||||
var map = new Map("map",{
|
||||
center: [-104.98,39.74], // long, lat
|
||||
zoom: 8,
|
||||
|
||||
@ -32,14 +32,6 @@ http://js.arcgis.com/3.9/js/esri/dijit/images/ajax-loader.gif
|
||||
# required local html
|
||||
# /xyz/style.css
|
||||
# /img/1.png
|
||||
appcache-features.html
|
||||
appcache-tiles.html
|
||||
attachments-editor-online.html
|
||||
attachments-editor.html
|
||||
military-offline.html
|
||||
service-inspector.html
|
||||
tiles-indexed-db.html
|
||||
tpk-layer.html
|
||||
../samples/images/blue-pin.png
|
||||
../samples/images/red-pin.png
|
||||
../vendor/IndexedDBShim/dist/IndexedDBShim.min.js
|
||||
|
||||
@ -157,6 +157,8 @@ require(["esri/map","utils/appCacheManager","tiles/OfflineTilesEnablerLayer","do
|
||||
console.log("Offline tile lib is enabled. Application state is: " + Offline.state);
|
||||
},_isOnline);
|
||||
|
||||
tileLayer.offline.proxyPath = null;
|
||||
|
||||
map.on("load",function(evt){
|
||||
init();
|
||||
|
||||
|
||||
@ -1,87 +0,0 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
|
||||
on iOS devices-->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
|
||||
<title>SanFrancisco311 - Incidents</title>
|
||||
|
||||
<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
|
||||
<style>
|
||||
html, body { height: 100%; width: 100%; margin: 0; overflow: hidden; }
|
||||
#map { height: 100%; padding: 0;}
|
||||
#footer { height: 2em; text-align: center; font-size: 1.1em; padding: 0.5em; }
|
||||
.dj_ie .infowindow .window .top .right .user .content { position: relative; }
|
||||
.dj_ie .simpleInfoWindow .content {position: relative;}
|
||||
</style>
|
||||
|
||||
<script src="http://js.arcgis.com/3.8/"></script>
|
||||
<script>
|
||||
var map;
|
||||
|
||||
require([
|
||||
"esri/map",
|
||||
"esri/layers/FeatureLayer",
|
||||
"esri/dijit/editing/AttachmentEditor",
|
||||
"esri/config",
|
||||
|
||||
"dojo/parser", "dojo/dom",
|
||||
|
||||
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
|
||||
], function(
|
||||
Map, FeatureLayer, AttachmentEditor, esriConfig,
|
||||
parser, dom
|
||||
) {
|
||||
parser.parse();
|
||||
// a proxy page is required to upload attachments
|
||||
// refer to "Using the Proxy Page" for more information: https://developers.arcgis.com/en/javascript/jshelp/ags_proxy.html
|
||||
esriConfig.defaults.io.proxyUrl = "/proxy";
|
||||
|
||||
map = new Map("map", {
|
||||
basemap: "streets",
|
||||
center: [-122.427, 37.769],
|
||||
zoom: 17
|
||||
});
|
||||
map.on("load", mapLoaded);
|
||||
|
||||
function mapLoaded() {
|
||||
var featureLayer = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/SanFrancisco/311Incidents/FeatureServer/0",{
|
||||
mode: FeatureLayer.MODE_ONDEMAND
|
||||
});
|
||||
|
||||
map.infoWindow.setContent("<div id='content' style='width:100%'></div>");
|
||||
map.infoWindow.resize(350,200);
|
||||
var attachmentEditor = new AttachmentEditor({}, dom.byId("content"));
|
||||
attachmentEditor.startup();
|
||||
|
||||
featureLayer.on("click", function(evt) {
|
||||
var objectId = evt.graphic.attributes[featureLayer.objectIdField];
|
||||
map.infoWindow.setTitle(objectId);
|
||||
attachmentEditor.showAttachments(evt.graphic,featureLayer);
|
||||
map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
|
||||
});
|
||||
map.addLayer(featureLayer);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div data-dojo-type="dijit/layout/BorderContainer"
|
||||
data-dojo-props="design:'headline'"
|
||||
style="width:100%;height:100%;">
|
||||
|
||||
<div id="map"
|
||||
data-dojo-type="dijit/layout/ContentPane"
|
||||
data-dojo-props="region:'center'"></div>
|
||||
|
||||
<div id="footer"
|
||||
data-dojo-type="dijit/layout/ContentPane"
|
||||
data-dojo-props="region:'bottom'">
|
||||
Click point to view/create/delete attachments.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -147,15 +147,15 @@
|
||||
<form role="form">
|
||||
<div class="form-group">
|
||||
<label class="control-label" for="minLevel">Min Zoom Level (farthest from ground)</label>
|
||||
<input type="number" id="minLevel" name"minLevel" class="form-control" value=1 min=0 max=19>
|
||||
<input type="number" id="minLevel" name="minLevel" class="form-control" value=1 min=0 max=19 />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label" for="currentLevel">Current Zoom Level</label>
|
||||
<input type="number" id="currentLevel" name"currentLevel" class="form-control" value=19 min=0 max=19>
|
||||
<input type="number" id="currentLevel" name="currentLevel" class="form-control" value=19 min=0 max=19 />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label" for="maxLevel">Max Zoom Level (closer to ground)</label>
|
||||
<input type="number" id="maxLevel" name"maxLevel" class="form-control" value=19 min=0 max=19>
|
||||
<input type="number" id="maxLevel" name"maxLevel" class="form-control" value=19 min=0 max=19 />
|
||||
</div>
|
||||
</form>
|
||||
<table id="tile-count-table" class="table table-striped table-condensed table-hover">
|
||||
@ -320,7 +320,7 @@ require(
|
||||
map = response.map;
|
||||
try{
|
||||
// Bind to map
|
||||
BootstrapMap.bindTo(map);
|
||||
BootstrapMap.create(map);
|
||||
}
|
||||
catch(err){
|
||||
console.log("boot " + err.toString())
|
||||
@ -376,6 +376,12 @@ require(
|
||||
function initEvents()
|
||||
{
|
||||
map.on('extent-change',debouncer.debounceMap(function(){
|
||||
var zoomLevel = map.getLevel();
|
||||
dojo.byId('currentLevel').value = zoomLevel;
|
||||
var low = Math.max(basemapLayer.minLevel, zoomLevel - 3);
|
||||
var high = Math.min(basemapLayer.maxLevel, zoomLevel + 4)
|
||||
dojo.byId('minLevel').value = low;
|
||||
dojo.byId('maxLevel').value = high;
|
||||
updateTileCountEstimation();
|
||||
},250));
|
||||
|
||||
@ -387,8 +393,17 @@ require(
|
||||
on(dojo.byId('minLevel'),'change', updateTileCountEstimation);
|
||||
on(dojo.byId('maxLevel'),'change', updateTileCountEstimation);
|
||||
|
||||
dojo.byId('minLevel').value = basemapLayer.minLevel = basemapLayer.tileInfo.lods[0].level;
|
||||
dojo.byId('maxLevel').value = basemapLayer.maxLevel = basemapLayer.tileInfo.lods[basemapLayer.tileInfo.lods.length-1].level;
|
||||
var currentLevel = map.getLevel();
|
||||
if(currentLevel - 3 < 0){
|
||||
dojo.byId('minLevel').value = currentLevel;
|
||||
}
|
||||
else{
|
||||
dojo.byId('minLevel').value = currentLevel - 3;
|
||||
}
|
||||
|
||||
basemapLayer.minLevel = basemapLayer.tileInfo.lods[0].level;
|
||||
basemapLayer.maxLevel = basemapLayer.tileInfo.lods[basemapLayer.tileInfo.lods.length-1].level;
|
||||
updateMinMaxLayerInfo();
|
||||
}
|
||||
|
||||
function initOffline()
|
||||
@ -399,7 +414,8 @@ require(
|
||||
{
|
||||
if(success)
|
||||
{
|
||||
basemapLayer.offline.proxyPath = window.proxyPath || "../lib/resource-proxy/proxy.php";
|
||||
//basemapLayer.offline.proxyPath = window.proxyPath || "../lib/resource-proxy/proxy.php";
|
||||
basemapLayer.offline.proxyPath = null; //We are using CORS
|
||||
on(dojo.byId('prepare-for-offline-btn'),'click', prepareForOffline);
|
||||
on(dojo.byId('cancel-btn'),'click', cancel);
|
||||
on(dojo.byId('delete-all-tiles-btn'),'click', deleteAllTiles);
|
||||
@ -414,6 +430,14 @@ require(
|
||||
esri.show(dojo.byId('ready-to-download-ui'));
|
||||
esri.hide(dojo.byId('downloading-ui'));
|
||||
updateOfflineUsage();
|
||||
|
||||
// Hack to correctly set _lastTileUrl. It needs to be set for the tile size
|
||||
// estimation to work properly.
|
||||
var cellArray = basemapLayer.getTileUrlsByExtent(map.extent,map.getLevel());
|
||||
var uriFragment = cellArray[0].split("/MapServer/");
|
||||
var rebuiltURI = uriFragment[0] + "/MapServer/tile/" + uriFragment[1];
|
||||
basemapLayer._lastTileUrl = rebuiltURI;
|
||||
|
||||
updateTileCountEstimation();
|
||||
}
|
||||
else
|
||||
@ -485,20 +509,21 @@ require(
|
||||
});
|
||||
}
|
||||
|
||||
function updateMinMaxLayerInfo(){
|
||||
var zoomLevel = map.getLevel();
|
||||
dojo.byId('currentLevel').value = zoomLevel;
|
||||
var low = Math.max(basemapLayer.minLevel, zoomLevel - 3);
|
||||
var high = Math.min(basemapLayer.maxLevel, zoomLevel + 4)
|
||||
dojo.byId('minLevel').value = low;
|
||||
dojo.byId('maxLevel').value = high;
|
||||
}
|
||||
|
||||
function updateTileCountEstimation()
|
||||
{
|
||||
console.log('updating');
|
||||
var zoomLevel = map.getLevel();
|
||||
dojo.byId('currentLevel').value = zoomLevel;
|
||||
|
||||
var minLevel = parseInt(dojo.byId('minLevel').value);
|
||||
var maxLevel = parseInt(dojo.byId('maxLevel').value);
|
||||
|
||||
if( maxLevel > zoomLevel + 4 || maxLevel > basemapLayer.maxLevel)
|
||||
{
|
||||
maxLevel = Math.min(basemapLayer.maxLevel, zoomLevel + 4);
|
||||
dojo.byId('maxLevel').value = maxLevel;
|
||||
}
|
||||
var minLevel = dojo.byId('minLevel').value;
|
||||
var maxLevel = dojo.byId('maxLevel').value;
|
||||
|
||||
var totalEstimation = { tileCount:0, sizeBytes:0 }
|
||||
|
||||
@ -513,7 +538,7 @@ require(
|
||||
totalEstimation.tileCount += levelEstimation.tileCount;
|
||||
totalEstimation.sizeBytes += levelEstimation.sizeBytes;
|
||||
|
||||
if( levelEstimation.tileCount > 1)
|
||||
if( levelEstimation.tileCount > 0)
|
||||
{
|
||||
var rowContent = [levelEstimation.level, levelEstimation.tileCount, Math.round(levelEstimation.sizeBytes / 1024 / 1024 * 100) / 100 + " Mb"]
|
||||
rowContent = "<td>" + rowContent.join("</td><td>") + "</td>";
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user