From 03cfea63051a834a996e3fea703505a04d76d250 Mon Sep 17 00:00:00 2001 From: Andy Gup Date: Thu, 2 Oct 2014 17:53:41 -0600 Subject: [PATCH] initial stubs --- demo/getstarted-editing.html | 718 +++++++++++++++++------------------ 1 file changed, 359 insertions(+), 359 deletions(-) diff --git a/demo/getstarted-editing.html b/demo/getstarted-editing.html index b75afd2..3cb8a93 100644 --- a/demo/getstarted-editing.html +++ b/demo/getstarted-editing.html @@ -85,456 +85,456 @@

Getting Started

-

Basic steps for working with Editing of geographic features for offline.

+

Basic steps for working with Editing geographic features for offline.

- -
-
+ +
+
- + -
-
-

Step 1: Fork or clone offline-editor-js

-

Here are the important directories to know:

-
    -
  • \dist - concatenated library source and minified library files.
    • -
  • \samples - examples that demonstrate the library's functionality.
    • -
  • \vendor - contains IndexedDBShim and offline.js libraries
    • -
-
- -
-
-

Step 2: Fill in the basics

-

Add the basic library references. Then test to make sure map loads.

-
+
+
+

Step 1: Fork or clone offline-editor-js

+

Here are the important directories to know:

+
    +
  • \dist - concatenated library source and minified library files.
    • +
  • \samples - examples that demonstrate the library's functionality.
    • +
  • \vendor - contains IndexedDBShim and offline.js libraries
    • +
+
+ +
+
+

Step 2: Fill in the basics

+

Add the basic library references. Then test to make sure map loads.

+ 
                         
-                            <!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>Simple Map</title>
-                            <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
-                            <style>
-                            html, body, #map {
-                            height: 100%;
-                            width: 100%;
-                            margin: 0;
-                            padding: 0;
-                            }
-                            body {
-                            background-color: #000000;
-                            overflow: hidden;
-                            font-family: "Trebuchet MS";
-                            }
-                            </style>
+<!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>Simple Map</title>
+    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
+    <style>
+        html, body, #map {
+            height: 100%;
+            width: 100%;
+            margin: 0;
+            padding: 0;
+        }
+        body {
+            background-color: #000000;
+            overflow: hidden;
+            font-family: "Trebuchet MS";
+        }
+    </style>
 
-                            <!-- Include a reference to offline.js which detects online/offline conditions -->
-                            <script src="../vendor/offline/offline.min.js"></script>
-                            <script>
-                            // 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?_=' +
+    <!-- Include a reference to offline.js which detects online/offline conditions -->
+    <script src="../vendor/offline/offline.min.js"></script>
+    <script>
+        // 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>
+                    }
+                },
+                active: 'image'
+            }
+        }
+    </script>
 
-                            <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
-                            <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
+    <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
+    <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
 
-                            <script src="http://js.arcgis.com/3.10/"></script>
-                            </head>
+    <script src="http://js.arcgis.com/3.10/"></script>
+</head>
 
-                            <body>
-                            <div id="map"></div>
+<body>
+    <div id="map"></div>
 
-                            <script>
-                            var map;
+    <script>
+        var map;
 
-                            // Make sure to reference the tiles library within the require statement!
-                            require(["esri/map","../dist/offline-tiles-advanced-min.js", "dojo/domReady!"], function(Map) {
-                            map = new Map("map", {
-                            basemap: "topo",
-                            center: [-122.45, 37.75], // longitude, latitude
-                            zoom: 13
-                            });
-                            });
-                            </script>
-                            </body>
-                            </html>
+        // Make sure to reference the tiles library within the require statement!
+        require(["esri/map","../dist/offline-tiles-advanced-min.js", "dojo/domReady!"], function(Map) {
+            map = new Map("map", {
+                basemap: "topo",
+                center: [-122.45, 37.75], // longitude, latitude
+                zoom: 13
+            });
+        });
+    </script>
+</body>
+</html>
-
NOTE: Replace paths with your references.
-
-
-

Step 3: Configure tiled basemap to work offline

-

This initializes the offline-editor-js library. Test to make sure map loads.

-
+
NOTE: Replace paths with your references.
+
+
+

Step 3: Configure tiled basemap to work offline

+

This initializes the offline-editor-js library. Test to make sure map loads.

+ 
                         
-                            <!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>Simple Map</title>
-                            <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
-                            <style>
-                            html, body, #map {
-                            height: 100%;
-                            width: 100%;
-                            margin: 0;
-                            padding: 0;
-                            }
-                            body {
-                            background-color: #000000;
-                            overflow: hidden;
-                            font-family: "Trebuchet MS";
-                            }
-                            </style>
+<!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>Simple Map</title>
+    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
+    <style>
+        html, body, #map {
+            height: 100%;
+            width: 100%;
+            margin: 0;
+            padding: 0;
+        }
+        body {
+            background-color: #000000;
+            overflow: hidden;
+            font-family: "Trebuchet MS";
+        }
+    </style>
 
-                            <!-- Include a reference to offline.js which detects online/offline conditions -->
-                            <script src="../vendor/offline/offline.min.js"></script>
-                            <script>
-                            // 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?_=' +
+    <!-- Include a reference to offline.js which detects online/offline conditions -->
+    <script src="../vendor/offline/offline.min.js"></script>
+    <script>
+        // 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>
+                    }
+                },
+                active: 'image'
+            }
+        }
+    </script>
 
-                            <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
-                            <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
+    <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
+    <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
 
-                            <script src="http://js.arcgis.com/3.10/"></script>
-                            </head>
+    <script src="http://js.arcgis.com/3.10/"></script>
+</head>
 
-                            <body>
-                            <div id="map"></div>
+<body>
+    <div id="map"></div>
 
-                            <script>
-                            var map;
+    <script>
+        var map;
 
-                            // Make sure to reference the offline tiles library within the require statement!
-                            require(["esri/map","../dist/offline-tiles-advanced-min.js", "dojo/domReady!"], function(Map) {
+        // Make sure to reference the offline tiles library within the require statement!
+        require(["esri/map","../dist/offline-tiles-advanced-min.js", "dojo/domReady!"], function(Map) {
 
-                            // Check if browser state is online or offline
-                            Offline.check();
-                            Offline.on('up down', updateState );
+            // Check if browser state is online or offline
+            Offline.check();
+            Offline.on('up down', updateState );
 
-                            // Initialize Esri.Map
-                            map = new Map("map", {
-                            //basemap: "topo", // comment out this basemap!
-                            center: [-122.45, 37.75], // longitude, latitude
-                            zoom: 13
-                            });
+            // Initialize Esri.Map
+            map = new Map("map", {
+                //basemap: "topo", // comment out this basemap!
+                center: [-122.45, 37.75], // longitude, latitude
+                zoom: 13
+            });
 
-                            // Now we initialize a topo tiled basemap service to be offline-enabled.
-                            tileLayer = O.esri.Tiles.OfflineTileEnablerLayer(
+            // Now we initialize a topo tiled basemap service to be offline-enabled.
+            tileLayer = O.esri.Tiles.OfflineTileEnablerLayer(
                             "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer",
                             function(evt){
-                            console.log("Offline tile lib enabled. App is: " + Offline.state);
+                                console.log("Offline tile lib enabled. App is: " + Offline.state);
                             },
                             true);
 
-                            // Add our offline tile layer to the map instead of using the default basemap!
-                            map.addLayer(tileLayer);
+            // Add our offline tile layer to the map instead of using the default basemap!
+            map.addLayer(tileLayer);
 
-                            // Set the tileLayer online or offline.
-                            // When set to offline, the map will look for tiles in the tiles database
-                            function updateState(){
-                            if(Offline.state === 'up'){
-                            if(typeof tileLayer != "undefined") tileLayer.goOnline();
-                            }
-                            else{
-                            if(typeof tileLayer != "undefined") tileLayer.goOffline();
-                            }
-                            }
+            // Set the tileLayer online or offline.
+            // When set to offline, the map will look for tiles in the tiles database
+            function updateState(){
+                if(Offline.state === 'up'){
+                    if(typeof tileLayer != "undefined") tileLayer.goOnline();
+                }
+                else{
+                    if(typeof tileLayer != "undefined") tileLayer.goOffline();
+                }
+            }
 
-                            });
-                            </script>
-                            </body>
-                            </html>
+        });
+    </script>
+</body>
+</html>
-
NOTE: Replace paths with your references.
+
NOTE: Replace paths with your references.
-
+
-
-

Step 4: Configure tiles download.

-

Enable the ability to download tiles as well the ability to toggle online and offline.

-
+
+

Step 4: Configure tiles download.

+

Enable the ability to download tiles as well the ability to toggle online and offline.

+
- + -
+
-
-
-
+                    

+                        

+                        
                             
 
-                                <!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>Simple Map</title>
-                                <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
-                                <style>
-                                html, body, #map {
-                                height: 100%;
-                                width: 100%;
-                                margin: 0;
-                                padding: 0;
-                                }
-                                body {
-                                background-color: #000000;
-                                overflow: hidden;
-                                font-family: "Trebuchet MS";
-                                }
-                                </style>
+<!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>Simple Map</title>
+    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
+    <style>
+        html, body, #map {
+            height: 100%;
+            width: 100%;
+            margin: 0;
+            padding: 0;
+        }
+        body {
+            background-color: #000000;
+            overflow: hidden;
+            font-family: "Trebuchet MS";
+        }
+    </style>
 
-                                <!-- Include a reference to offline.js which detects online/offline conditions -->
-                                <script src="../vendor/offline/offline.min.js"></script>
-                                <script>
-                                // 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>
+    <!-- Include a reference to offline.js which detects online/offline conditions -->
+    <script src="../vendor/offline/offline.min.js"></script>
+    <script>
+        // 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>
 
-                                <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
-                                <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
+    <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
+    <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
 
-                                <script src="http://js.arcgis.com/3.10/"></script>
-                                </head>
+    <script src="http://js.arcgis.com/3.10/"></script>
+</head>
 
-                                <body>
+<body>
 
-                                <!-- Create two buttons -->
-                                <button class="basic-btn" id="btn-get-tiles">1. Download Tiles</button>
-                                <button class="basic-btn" id="btn-online-offline">2. Go Offline</button>
-                                <button class="basic-btn" id="btn-pan-left">3. Pan left</button>
+    <!-- Create two buttons -->
+    <button class="basic-btn" id="btn-get-tiles">1. Download Tiles</button>
+    <button class="basic-btn" id="btn-online-offline">2. Go Offline</button>
+    <button class="basic-btn" id="btn-pan-left">3. Pan left</button>
 
-                                <div id="map"></div>
+    <div id="map"></div>
 
-                                <script>
-                                var map;
+    <script>
+        var map;
 
-                                // Make sure to reference the offline tiles library within the require statement!
-                                require(["esri/map","dojo/on","../dist/offline-tiles-advanced-min.js", "dojo/domReady!"],
-                                function(Map,on){
+        // Make sure to reference the offline tiles library within the require statement!
+        require(["esri/map","dojo/on","../dist/offline-tiles-advanced-min.js", "dojo/domReady!"],
+        function(Map,on){
 
-                                // Check if browser state is online or offline
-                                Offline.check();
-                                Offline.on('up down', updateState );
+            // Check if browser state is online or offline
+            Offline.check();
+            Offline.on('up down', updateState );
 
-                                // For cancelling the download of tiles
-                                var _wantToCancel;
+            // For cancelling the download of tiles
+            var _wantToCancel;
 
-                                // Set up min and max boundaries for retrieving tiles
-                                var minZoomAdjust = -1, maxZoomAdjust = 1, mMinZoom, mMaxZoom;
+            // Set up min and max boundaries for retrieving tiles
+            var minZoomAdjust = -1, maxZoomAdjust = 1, mMinZoom, mMaxZoom;
 
-                                // Set up button click listeners.
-                                var btnGetTiles = document.getElementById("btn-get-tiles");
-                                var btnOnlineOffline = document.getElementById("btn-online-offline");
-                                var btnPanLeft = document.getElementById("btn-pan-left");
+            // Set up button click listeners.
+            var btnGetTiles = document.getElementById("btn-get-tiles");
+            var btnOnlineOffline = document.getElementById("btn-online-offline");
+            var btnPanLeft = document.getElementById("btn-pan-left");
 
-                                on(btnGetTiles,"click",downloadTiles);
-                                on(btnOnlineOffline,"click",goOnlineOffline);
-                                on(btnPanLeft,"click",panLeft);
+            on(btnGetTiles,"click",downloadTiles);
+            on(btnOnlineOffline,"click",goOnlineOffline);
+            on(btnPanLeft,"click",panLeft);
 
-                                // Initialize Esri.Map
-                                map = new Map("map", {
-                                //basemap: "topo", // comment out this basemap!
-                                center: [-122.45, 37.75], // longitude, latitude
-                                zoom: 13
-                                });
+            // Initialize Esri.Map
+            map = new Map("map", {
+                //basemap: "topo", // comment out this basemap!
+                center: [-122.45, 37.75], // longitude, latitude
+                zoom: 13
+            });
 
-                                // Now we initialize a topo tiled basemap service to be offline-enabled.
-                                tileLayer = O.esri.Tiles.OfflineTileEnablerLayer(
-                                "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer",
-                                function(evt){
+            // Now we initialize a topo tiled basemap service to be offline-enabled.
+            tileLayer = O.esri.Tiles.OfflineTileEnablerLayer(
+                            "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer",
+                            function(evt){
                                 console.log("Offline tile lib enabled. App is: " + Offline.state);
-                                },
-                                true);
+                            },
+                            true);
 
-                                // Set the min and max zoom levels for when retrieving tiles
-                                // This helps manage the amount of database space used.
-                                map.on("load",function(evt){
-                                tileLayer.getMaxZoom(function(result){
-                                mMaxZoom = result;
-                                });
-                                tileLayer.getMinZoom(function(result){
-                                mMinZoom = result;
-                                });
-                                })
+            // Set the min and max zoom levels for when retrieving tiles
+            // This helps manage the amount of database space used.
+            map.on("load",function(evt){
+                tileLayer.getMaxZoom(function(result){
+                    mMaxZoom = result;
+                });
+                tileLayer.getMinZoom(function(result){
+                    mMinZoom = result;
+                });
+            })
 
-                                // Add our offline tile layer to the map instead of using the default basemap!
-                                map.addLayer(tileLayer);
+            // Add our offline tile layer to the map instead of using the default basemap!
+            map.addLayer(tileLayer);
 
-                                function downloadTiles(){
+            function downloadTiles(){
 
-                                // First we need to empty the database.
-                                tileLayer.deleteAllTiles(function(success,err){
+                // First we need to empty the database.
+                tileLayer.deleteAllTiles(function(success,err){
 
-                                var zoom = getMinMaxZoom();
-                                var extent = tileLayer.getExtentBuffer(0,map.extent);
+                    var zoom = getMinMaxZoom();
+                    var extent = tileLayer.getExtentBuffer(0,map.extent);
 
-                                // Begin downloading tiles
-                                tileLayer.prepareForOffline(zoom.min, zoom.max, extent, function(progress){
-                                console.log("downloading tiles...");
-                                if(progress.hasOwnProperty("countNow")){
-                                var percent = Math.floor(progress.countNow / progress.countMax * 100);
-                                btnGetTiles.innerHTML = 'Saving to phone ' + percent + "% - Tap to Cancel";
-                                }
+                    // Begin downloading tiles
+                    tileLayer.prepareForOffline(zoom.min, zoom.max, extent, function(progress){
+                        console.log("downloading tiles...");
+                        if(progress.hasOwnProperty("countNow")){
+                            var percent = Math.floor(progress.countNow / progress.countMax * 100);
+                            btnGetTiles.innerHTML = 'Saving to phone ' + percent + "% - Tap to Cancel";
+                        }
 
-                                if( progress.finishedDownloading )
-                                {
-                                btnGetTiles.innerHTML = "Saving to phone 100% - Tap to Cancel";
+                        if( progress.finishedDownloading )
+                        {
+                            btnGetTiles.innerHTML = "Saving to phone 100% - Tap to Cancel";
 
-                                if( progress.cancelRequested )
-                                {
+                            if( progress.cancelRequested )
+                            {
                                 alert("Tile download was cancelled");
-                                }
-                                else
-                                {
+                            }
+                            else
+                            {
                                 alert("Tile download complete");
-                                }
+                            }
 
-                                btnGetTiles.innerHTML = '1. Download Tiles';
-                                }
-                                return _wantToCancel; //determines if a cancel request has been issued
-                                });
-                                });
-                                }
+                            btnGetTiles.innerHTML = '1. Download Tiles';
+                        }
+                        return _wantToCancel; //determines if a cancel request has been issued
+                    });
+                });
+            }
 
-                                // Force the tileLayer between online and offline
-                                function goOnlineOffline(){
-                                if(btnOnlineOffline.innerHTML == "2. Go Offline"){
-                                btnOnlineOffline.innerHTML = "2. Go Online";
-                                tileLayer.goOffline();
-                                document.body.style.backgroundColor = "red";
-                                console.log("tileLayer is offline");
-                                }
-                                else{
-                                btnOnlineOffline.innerHTML = "2. Go Offline";
-                                tileLayer.goOnline();
-                                document.body.style.backgroundColor = "black";
-                                console.log("tileLayer is online");
-                                }
-                                }
+            // Force the tileLayer between online and offline
+            function goOnlineOffline(){
+                if(btnOnlineOffline.innerHTML == "2. Go Offline"){
+                    btnOnlineOffline.innerHTML = "2. Go Online";
+                    tileLayer.goOffline();
+                    document.body.style.backgroundColor = "red";
+                    console.log("tileLayer is offline");
+                }
+                else{
+                    btnOnlineOffline.innerHTML = "2. Go Offline";
+                    tileLayer.goOnline();
+                    document.body.style.backgroundColor = "black";
+                    console.log("tileLayer is online");
+                }
+            }
 
 
-                                // Set the tileLayer online or offline.
-                                // When set to offline, the map will look for tiles in the tiles database
-                                function updateState(){
-                                if(Offline.state === 'up'){
-                                if(typeof tileLayer != "undefined") tileLayer.goOnline();
-                                }
-                                else{
-                                if(typeof tileLayer != "undefined") tileLayer.goOffline();
-                                }
-                                }
+            // Set the tileLayer online or offline.
+            // When set to offline, the map will look for tiles in the tiles database
+            function updateState(){
+                if(Offline.state === 'up'){
+                    if(typeof tileLayer != "undefined") tileLayer.goOnline();
+                }
+                else{
+                    if(typeof tileLayer != "undefined") tileLayer.goOffline();
+                }
+            }
 
-                                // Utility function to validate min and max zoom settings of the map
-                                function getMinMaxZoom(){
+            // Utility function to validate min and max zoom settings of the map
+            function getMinMaxZoom(){
 
-                                var zoom = {};
-                                var min = tileLayer.getLevel() + minZoomAdjust;
-                                var max = tileLayer.getLevel() + maxZoomAdjust;
-                                zoom.max = Math.min(mMaxZoom, max);  //prevent errors by setting the tile layer floor
-                                zoom.min = Math.max(mMinZoom, min);   //prevent errors by setting the tile layer ceiling
+                var zoom = {};
+                var min = tileLayer.getLevel() + minZoomAdjust;
+                var max = tileLayer.getLevel() + maxZoomAdjust;
+                zoom.max = Math.min(mMaxZoom, max);  //prevent errors by setting the tile layer floor
+                zoom.min = Math.max(mMinZoom, min);   //prevent errors by setting the tile layer ceiling
 
-                                return zoom;
-                                }
+                return zoom;
+            }
 
-                                function panLeft(){
-                                map.panLeft();
-                                }
+            function panLeft(){
+                map.panLeft();
+            }
 
-                                });
-                                </script>
-                                </body>
-                                </html>
+        });
+    </script>
+</body>
+</html>
 
                             
                         

-
NOTE: Replace paths with your references.

-

+                        
NOTE: Replace paths with your references.

+                        

 
-

-    

-        

-            

-                
-                
-                
-            

-            
-        

-    

-    

-        

-            

-        

-    

+                        

+                            

+                                

+                                    

+                                        
+                                        
+                                        
+                                    

+                                    
+                                

+                            

+                            

+                                

+                                    

+                                

+                            

 
-

-

-
-
+
+
+
+
-
-
-
-
+
+
+
+