├── .jshintrc
├── CONTRIBUTING.md
├── README.md
├── html
    ├── data
    │   ├── canada.json
    │   ├── load_feature_service.html
    │   ├── load_flickr_json.html
    │   ├── load_geojson.html
    │   ├── query_feature_service.html
    │   ├── search_by_distance.html
    │   ├── usa.json
    │   └── webmapbyid.html
    ├── directions
    │   ├── directions.html
    │   ├── directions_widget.html
    │   ├── drivetime.html
    │   ├── routes_and_barriers.html
    │   └── traffic.html
    ├── geocoding
    │   ├── geosearch.html
    │   ├── geosearch_category.html
    │   ├── geosearch_widget.html
    │   └── reversegeocode.html
    ├── graphics
    │   ├── graphics.html
    │   ├── graphics_marker.html
    │   └── graphics_toolbar.html
    ├── maps
    │   ├── basemap_watercolor.html
    │   ├── basemaps.html
    │   ├── basemaps_widget.html
    │   └── basemaptour.html
    ├── misc
    │   ├── autocenter.html
    │   ├── geolocation.html
    │   └── show_panel.html
    └── symbols
    │   ├── symbols_lines.html
    │   ├── symbols_polygons.html
    │   └── symbols_pts.html
├── images
    ├── black-dot-small.png
    ├── blue-dot-small.png
    ├── blue-pin-blank.png
    ├── blue-pin-house.png
    ├── blue-pin-radius.png
    ├── blue-pin-star.png
    ├── blue-pin.png
    ├── brown-pin-blank.png
    ├── brown-pin-house.png
    ├── brown-pin-start.png
    ├── favicon.ico
    ├── green-dot-small.png
    ├── green-pin-blank.png
    ├── green-pin-house.png
    ├── green-pin-star.png
    ├── green-pin.png
    ├── grey-pin-blank.png
    ├── grey-pin-house.png
    ├── grey-pin-star.png
    ├── orange-dot-small.png
    ├── orange-pin-blank.png
    ├── orange-pin-house.png
    ├── orange-pin-radius.png
    ├── orange-pin-star.png
    ├── orange-pin.png
    ├── progress.gif
    ├── purple-pin-blank.png
    ├── purple-pin-house.png
    ├── purple-pin-star.png
    ├── purple-pin.png
    ├── red-dot-small.png
    ├── red-pin-blank.png
    ├── red-pin-house.png
    ├── red-pin-star.png
    ├── red-pin.png
    ├── yellow-pin-blank.png
    ├── yellow-pin-house.png
    └── yellow-pin-start.png
├── index.html
├── js
    ├── oauth
    │   ├── oAuthHelper.js
    │   └── oauth-callback.html
    ├── terraformer-arcgis-parser
    │   ├── .bower.json
    │   ├── .gitignore
    │   ├── .npmingnore
    │   ├── Gruntfile.js
    │   ├── README.md
    │   ├── bower.json
    │   ├── package.json
    │   ├── spec
    │   │   └── arcgisSpec.js
    │   ├── terraformer-arcgis-parser.js
    │   └── terraformer-arcgis-parser.min.js
    └── terraformer
    │   ├── .bower.json
    │   ├── .gitignore
    │   ├── .npmignore
    │   ├── .travis.yml
    │   ├── LICENSE
    │   ├── README.md
    │   ├── bower.json
    │   ├── gruntfile.js
    │   ├── package.json
    │   ├── terraformer.js
    │   └── terraformer.min.js
├── license.txt
└── quickstart-map-js.png


/.jshintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |     // JSHint Configuration, esri jsapi
 3 |     // Modified from [jshint web defaults][1].
 4 |     // Differences between the default and our file are noted
 5 |     // Options that are commented out completely are uneccesary or problematic for our codebase
 6 |     // [1] : https://github.com/jshint/jshint/blob/2.x/examples/.jshintrc
 7 |     // See http://jshint.com/docs/ for more details
 8 | 
 9 |     "maxerr"        : 10,       // {int} Maximum error before stopping ** Get ALL the errors **
10 | 
11 |     // Enforcing - true = enforce this rule, false = don't enforce this rule
12 |     "bitwise"       : true,     // true: Prohibit bitwise operators (&, |, ^, etc.)
13 |     "camelcase"     : false,    // true: Identifiers must be in camelCase
14 |     "curly"         : true,     // true: Require {} for every new block or scope
15 |     "eqeqeq"        : false,    // true: Require triple equals (===) for comparison ** Just use triples with undefined, null, false, 0 and 1 **
16 |     "es3"           : true,     // true: Adhere to ECMAScript 3 specification ** Still needed until IE8 support is dropped **
17 |     "forin"         : true,     // true: Require filtering for..in loops with obj.hasOwnProperty() ** Still needed until IE8 support is dropped **
18 |     "immed"         : true,     // true: Require immediate invocations to be wrapped in parens e.g. `(function () { } ());` ** Avoids confusion and minification errors **
19 |     "latedef"       : false,    // true: Require variables/functions to be defined before being used
20 |     "newcap"        : true,     // true: Require capitalization of all constructor functions e.g. `new F()` ** Coding style enforcement **
21 |     "noarg"         : true,     // true: Prohibit use of `arguments.caller` and `arguments.callee`
22 |     "noempty"       : true,     // true: Prohibit use of empty blocks
23 |     "nonew"         : true,     // true: Prohibit use of constructors for side-effects (without assignment) ** Coding style enforcement **
24 |     "plusplus"      : false,    // true: Prohibit use of `++` & `--`
25 |     "quotmark"      : true,     // Quotation mark consistency: ** Use the same style. Doubles should be used in most cases **
26 |                                 //   false    : do nothing (default)
27 |                                 //   true     : ensure whatever is used is consistent
28 |                                 //   "single" : require single quotes
29 |                                 //   "double" : require double quotes
30 |     "undef"         : true,     // true: Require all non-global variables to be declared (prevents global leaks)
31 |     "unused"        : "vars",   // true: Require all defined variables be used
32 |     "strict"        : false,    // true: Requires all functions run in ES5 Strict Mode ** Dojo style and existing codebase conflicts **
33 |     "trailing"      : false,    // true: Prohibit trailing whitespaces
34 |     //"indent"        : 4,        // {int} Number of spaces to use for indentation
35 |     //"maxparams"     : false,    // {int} Max number of formal params allowed per function
36 |     //"maxdepth"      : false,    // {int} Max depth of nested blocks (within functions)
37 |     //"maxstatements" : false,    // {int} Max number statements per function
38 |     //"maxcomplexity" : false,    // {int} Max cyclomatic complexity per function
39 |     //"maxlen"        : false,    // {int} Max number of characters per line
40 | 
41 |     // Relaxing - false = continue to enforce this rule, true = don't enforce this rule (relax it)
42 |     "asi"           : false,     // true: Tolerate Automatic Semicolon Insertion (no semicolons)
43 |     "boss"          : false,     // true: Tolerate assignments where comparisons would be expected
44 |     "debug"         : false,     // true: Allow debugger statements e.g. browser breakpoints.
45 |     "eqnull"        : true,      // true: Tolerate use of `== null`
46 |     "es5"           : false,     // true: Allow ES5 syntax (ex: getters and setters)
47 |     "esnext"        : false,     // true: Allow ES.next (ES6) syntax (ex: `const`)
48 |     "moz"           : false,     // true: Allow Mozilla specific syntax (extends and overrides esnext features)
49 |                                  // (ex: `for each`, multiple try/catch, function expression…)
50 |     "evil"          : false,     // true: Tolerate use of `eval` and `new Function()`
51 |     "expr"          : false,     // true: Tolerate `ExpressionStatement` as Programs
52 |     "funcscope"     : true,      // true: Tolerate defining variables inside control statements ** Other variable checks keep use from abusing this **
53 |     "globalstrict"  : false,     // true: Allow global "use strict" (also enables 'strict')
54 |     "iterator"      : false,     // true: Tolerate using the `__iterator__` property
55 |     "lastsemic"     : false,     // true: Tolerate omitting a semicolon for the last statement of a 1-line block
56 |     "laxbreak"      : false,     // true: Tolerate possibly unsafe line breakings
57 |     "laxcomma"      : false,     // true: Tolerate comma-first style coding
58 |     "loopfunc"      : true,      // true: Tolerate functions being defined in loops ** Almost required in some callback & promise style code **
59 |     "multistr"      : false,     // true: Tolerate multi-line strings
60 |     "proto"         : false,     // true: Tolerate using the `__proto__` property
61 |     "scripturl"     : true,      // true: Tolerate script-targeted URLs ** If this is being used, there is probably a good reason **
62 |     "smarttabs"     : false,     // true: Tolerate mixed tabs/spaces when used for alignment
63 |     "shadow"        : false,     // true: Allows re-define variables later in code e.g. `var x=1; x=2;`
64 |     "sub"           : false,     // true: Tolerate using `[]` notation when it can still be expressed in dot notation
65 |     "supernew"      : false,     // true: Tolerate `new function () { ... };` and `new Object;`
66 |     "validthis"     : true,      // true: Tolerate using this in a non-constructor function ** We don't run in `strict mode` & coding style conflicts **
67 | 
68 |     // Environments
69 |     "browser"       : true,     // Web Browser (window, document, etc)
70 |     "devel"         : true,     // Development/debugging (alert, confirm, etc)
71 |     "couch"         : false,    // CouchDB
72 |     "dojo"          : false,    // Dojo Toolkit ** Don't use global dojo objects. Use AMD style coding **
73 |     "jquery"        : false,    // jQuery
74 |     "mootools"      : false,    // MooTools
75 |     "node"          : false,    // Node.js
76 |     "nonstandard"   : false,    // Widely adopted globals (escape, unescape, etc)
77 |     "prototypejs"   : false,    // Prototype and Scriptaculous
78 |     "rhino"         : false,    // Rhino
79 |     "worker"        : false,    // Web Workers ** Make a jshint comment when this is `true` **
80 |     "wsh"           : false,    // Windows Scripting Host
81 |     "yui"           : false,    // Yahoo User Interface
82 | 
83 |     // Legacy ** According to jshint docs, these options are NOT to be used or relied on. Removing them.
84 |     //"nomen"         : false,    // true: Prohibit dangling `_` in variables
85 |     //"onevar"        : false,    // true: Allow only one `var` statement per function
86 |     //"passfail"      : false,    // true: Stop on first error
87 |     //"white"         : false,    // true: Check against strict whitespace and indentation rules
88 | 
89 |     // Custom Globals - additional predefined global variables
90 |     // Using both `predef` and `globals` to support tools with older jshint parsers
91 |     "predef"        : [
92 |         "define",
93 |         "require"
94 |     ],
95 |     "globals"       : { // ** `false` = don't allow variable to be redefined locally
96 |         "define": false,
97 |         "require": false
98 |     }
99 | }


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | Esri welcomes contributions from anyone and everyone. Please see our [guidelines for contributing](https://github.com/esri/contributing).
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # quickstart-map-js
  2 | 
  3 | A simple set of examples that illustrate how to accomplish different mapping (and GIS) tasks with the [ArcGIS API for JavaScript](http://developers.arcgis.com) and [ArcGIS Online Services](https://developers.arcgis.com/en/features/). Also, learn how to style your apps nicely with the [Bootstrap 3.x framework](http://getbootstrap.com).
  4 | 
  5 | [View the samples](http://esri.github.com/quickstart-map-js/index.html)
  6 | 
  7 | ![App](https://raw.github.com/Esri/quickstart-map-js/master/quickstart-map-js.png)
  8 | 
  9 | ## Features
 10 | * Basemaps - Set different basemaps interactively
 11 | * Geolocation - Find and display your geolocation
 12 | * Place Finding - Find places or geocode an address
 13 | * Geocode - Forward and reverse geocoding
 14 | * Directions - Get directions, use direction widgets, multi-directions with barriers
 15 | * Graphics - Draw points, lines and polygons
 16 | * Maps - Load and auto resize and center maps
 17 | * Cloud - Draw and query features stored in the ArcGIS Online cloud
 18 | * Data - Load JSON services
 19 | * Popups - Format and position info windows and your own map pins
 20 | * Map Pins - You can use new Esri markers for point locations
 21 | 
 22 | NOTE: All examples are built with [Bootstrap 3.x styles](http://getbootstrap.com). To build fully responsive maps for all devices, see [Bootstrap-map-js](http://github.com/esri/bootstrap-map-js).
 23 | 
 24 | ## Instructions
 25 | 
 26 | 1. Fork and then clone the repo. 
 27 | 2. Try the examples locally or try them [here](http://esri.github.com/quickstart-map-js/index.html).
 28 | 
 29 | NOTE: You should just be able to cut-and-paste and run the examples in JSFiddle!
 30 | 
 31 | ## Example
 32 | 
 33 | ``` HTML
 34 | <!DOCTYPE html>
 35 | <html>
 36 | <head>
 37 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 38 |   <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">   
 39 |   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
 40 |   <title>Basemaps</title>
 41 |   <link rel="shortcut icon" href="//esri.github.io/quickstart-map-js/images/favicon.ico">
 42 |   <!-- ArcGIS API for JavaScript CSS-->
 43 |   <link rel="stylesheet" href="//js.arcgis.com/3.10/js/esri/css/esri.css">
 44 |   <!-- Web Framework CSS - Bootstrap (getbootstrap.com) and Bootstrap-map-js (github.com/esri/bootstrap-map-js) -->
 45 |   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
 46 |   <link rel="stylesheet" href="//esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
 47 |   <style>
 48 |     html, body, #mapDiv {
 49 |       height: 100%;
 50 |       width: 100%;
 51 |     }
 52 |   </style>
 53 | 
 54 |   <!-- ArcGIS API for JavaScript library references -->
 55 |   <script src="//js.arcgis.com/3.10compact"></script>
 56 |   <script>
 57 |     require(["esri/map", 
 58 |       "dojo/on", 
 59 |       "dojo/dom", 
 60 |       "dojo/domReady!"], 
 61 |       function(Map, on, dom) {
 62 |         // Create map
 63 |         var map = new Map("mapDiv",{ 
 64 |           basemap: "gray",
 65 |           center: [-122.69, 45.52],
 66 |           zoom: 3
 67 |         });
 68 | 
 69 |         // Wire UI Events
 70 |         on(dom.byId("btnStreets"),"click", function() { 
 71 |           map.setBasemap("streets");
 72 |         });
 73 |         on(dom.byId("btnSatellite"),"click", function() { 
 74 |           map.setBasemap("satellite");
 75 |         });
 76 |         on(dom.byId("btnHybrid"),"click", function() { 
 77 |           map.setBasemap("hybrid");
 78 |         });
 79 |         on(dom.byId("btnTopo"),"click", function() { 
 80 |           map.setBasemap("topo");
 81 |         });
 82 |         on(dom.byId("btnGray"),"click", function() { 
 83 |           map.setBasemap("gray");
 84 |         });
 85 |         on(dom.byId("btnNatGeo"),"click", function() { 
 86 |           map.setBasemap("national-geographic");
 87 |         });
 88 |     });
 89 |   </script>   
 90 | </head>
 91 |   <body>
 92 |     <div class="panel panel-primary panel-fixed">
 93 |       <div class="panel-heading">
 94 |         <h3 class="panel-title">Basemaps</h3>
 95 |       </div>
 96 |       <div class="panel-body">
 97 |         <div class="btn-toolbar">
 98 |           <div class="btn-group">
 99 |             <button id="btnStreets" class="btn btn-default">Streets</button>
100 |             <button id="btnSatellite" class="btn btn-default">Satellite</button>
101 |             <button id="btnHybrid" class="btn btn-default">Hybrid</button>
102 |             <button id="btnTopo" class="btn btn-default">Topo</button>
103 |           </div>  
104 |         </div>
105 |         <div class="btn-toolbar">
106 |           <div class="btn-group">
107 |             <button id="btnGray" class="btn btn-default">Gray</button>
108 |             <button id="btnNatGeo" class="btn btn-default">National Geographic</button>
109 |           </div>  
110 |         </div>
111 |       </div>
112 |     </div>
113 |     <div id="mapDiv"></div>
114 |   </body>
115 | </html>
116 | ```
117 | 
118 | ## Requirements
119 | 
120 | * Notepad or your favorite HTML editor
121 | * Web browser with access to the Internet
122 | * All samples reference:
123 | 
124 | [Bootstrap 3.x: Web Framework CSS](http://getbootstrap.com)
125 | ```
126 | //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css
127 | ```
128 | 
129 | [Bootstrap-map-js: Map, Popup and Dijit CSS](http://github.com/esri/bootstrap-map-js)
130 | ```
131 | //esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css
132 | ```
133 | 
134 | ## Resources
135 | 
136 | * [ArcGIS for JavaScript API Resource Center](http://developers.arcgis.com)
137 | * [ArcGIS Blog](http://blogs.esri.com/esri/arcgis/)
138 | * [twitter@esri](http://twitter.com/esri)
139 | 
140 | ## Issues
141 | 
142 | Find a bug or want to request a new feature?  Please let us know by submitting an issue.  Thank you!
143 | 
144 | * Directions - Uses OAuth and requires you to sign up for a [free ArcGIS Developer Subscription](https://developers.arcgis.com/en/sign-up/) to use the app.
145 | 
146 | ## Contributing
147 | 
148 | Anyone and everyone is welcome to contribute. Please see our [guidelines for contributing](https://github.com/esri/contributing).
149 | 
150 | ## Licensing
151 | Copyright 2013 Esri
152 | 
153 | Licensed under the Apache License, Version 2.0 (the "License");
154 | you may not use this file except in compliance with the License.
155 | You may obtain a copy of the License at
156 | 
157 |    http://www.apache.org/licenses/LICENSE-2.0
158 | 
159 | Unless required by applicable law or agreed to in writing, software
160 | distributed under the License is distributed on an "AS IS" BASIS,
161 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
162 | See the License for the specific language governing permissions and
163 | limitations under the License.
164 | 
165 | A copy of the license is available in the repository's [license.txt]( https://raw.github.com/Esri/quickstart-map-js/master/license.txt) file.
166 | 
167 | [](Esri Tags: ArcGIS Web Mapping QuickStart)
168 | [](Esri Language: JavaScript)
169 | 


--------------------------------------------------------------------------------
/html/data/load_feature_service.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html> 
  2 | <html>  
  3 | <head> 
  4 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5 |   <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
  6 |   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  7 |   <title>Load Feature Service</title>  
  8 |   <link rel="shortcut icon" href="//esri.github.io/quickstart-map-js/images/favicon.ico">
  9 |   <!-- ArcGIS API for JavaScript CSS-->
 10 |   <link rel="stylesheet" href="//js.arcgis.com/3.10/js/esri/css/esri.css">
 11 |   <!-- Web Framework CSS - Bootstrap (getbootstrap.com) and Bootstrap-map-js (github.com/esri/bootstrap-map-js) -->
 12 |   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
 13 |   <link rel="stylesheet" href="//esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
 14 |   <style>
 15 |     html, body, #mapDiv {
 16 |       height: 100%;
 17 |       width: 100%;
 18 |     }
 19 |   </style>
 20 | 
 21 |   <!-- ArcGIS API for JavaScript library references -->
 22 |   <script src="//js.arcgis.com/3.10compact"></script>
 23 |   <script>
 24 |     require(["esri/map",
 25 |       "esri/layers/graphics", 
 26 |       "esri/layers/FeatureLayer", 
 27 |       "esri/InfoTemplate", 
 28 |       "esri/graphicsUtils",
 29 |       "dojo/keys",
 30 |       "dojo/on", 
 31 |       "dojo/dom", 
 32 |       "dojo/domReady!"], 
 33 |       function(Map, Graphics, FeatureLayer, InfoTemplate, graphicsUtils, keys, on, dom) {
 34 |         "use strict"
 35 |         
 36 |         // Create map
 37 |         var map = new Map("mapDiv", { 
 38 |           basemap: "gray",
 39 |           center: [-28,40],
 40 |           zoom: 3
 41 |         }); 
 42 | 
 43 |         // Set popup
 44 |         var popup = map.infoWindow;
 45 |         popup.highlight = false;
 46 |         popup.titleInBody = false;
 47 |         popup.domNode.className += " light";
 48 |         
 49 |         // Wire map events
 50 |         map.on("layer-add-result", layerAdded);
 51 | 
 52 |         // Wire UI events
 53 |         on(dom.byId("btnAdd"), "click", addFeatureService);        
 54 |         on(dom.byId("btnRemove"), "click", removeFeatureService);      
 55 |         on(dom.byId("inputUrl"), "keydown", function(event) {
 56 |           if (event.keyCode === keys.ENTER) {
 57 |             addFeatureService();
 58 |           }
 59 |         });
 60 | 
 61 |         var featureLayer;
 62 | 
 63 |         // Create a feature layer to get feature service
 64 |         function addFeatureService() {
 65 |           removeFeatureService();
 66 |           var infoTemplate = new InfoTemplate("Feature Data", "${*}");
 67 |           var url = dom.byId("inputUrl").value.trim();    
 68 |           featureLayer = new FeatureLayer(url, {
 69 |             mode: FeatureLayer.MODE_ONDEMAND,
 70 |             outFields: ["*"],
 71 |             infoTemplate: infoTemplate
 72 |           });
 73 |           map.addLayer(featureLayer);
 74 |           
 75 |         }
 76 |         // Remove existing service
 77 |         function removeFeatureService() {
 78 |           if (featureLayer) {
 79 |             map.removeLayer(featureLayer);
 80 |             map.infoWindow.hide();
 81 |           }
 82 |         }
 83 |         // Listen for enter key
 84 |         function addService_onKeyPress(e) {
 85 |           if (e.keyCode == 13 || e.keyCode == "13") {
 86 |             addFeatureService();
 87 |           }
 88 |         }
 89 |         // Zoom to layer and update url
 90 |         function layerAdded(layer) {
 91 |           if (typeof layer.error !== 'undefined') {
 92 |             alert("Feature service could not be loaded. Check URL.");
 93 |           } else {
 94 |             if (featureLayer){
 95 |               var layerUpdated = featureLayer.on("update-end", function(result) {
 96 |                 // Zoom to all of the features   
 97 |                 var extent = graphicsUtils.graphicsExtent(result.target.graphics);   
 98 |                 map.setExtent(extent);
 99 |                 // Only do this once
100 |                 layerUpdated.remove();
101 |                 dom.byId("inputUrl").value = result.target.url;    
102 |               });
103 |             }
104 |           }
105 |         }
106 |     });
107 |   </script>
108 | </head>
109 | <body>
110 |    <div class="panel panel-primary panel-fixed">
111 |     <div class="panel-heading">
112 |       <h3 class="panel-title">Load Feature Service</h3>
113 |     </div>
114 |     <div class="panel-body">
115 |       <p>ArcGIS REST endpoint:</p>
116 |       <div class="form-group">
117 |         <textarea id="inputUrl" class="form-control" rows="3" 
118 |           placeholder="http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/Bike_Parking/FeatureServer/0"  
119 |           value="http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/Bike_Parking/FeatureServer/0">http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/Bike_Parking/FeatureServer/0
120 |         </textarea>
121 |       </div>
122 |       <button id="btnAdd" class="btn btn-success">Add</button>
123 |       <button id="btnRemove" class="btn btn-default">Remove</button>
124 |     </div>
125 |   </div>
126 |   <div id="mapDiv"></div>
127 | </body>
128 | </html>
129 | 


--------------------------------------------------------------------------------
/html/data/load_flickr_json.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5 |   <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">   
  6 |   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  7 |   <title>Load JSON Service</title>
  8 |   <link rel="shortcut icon" href="//esri.github.io/quickstart-map-js/images/favicon.ico">
  9 |   <!-- ArcGIS API for JavaScript CSS-->
 10 |   <link rel="stylesheet" href="//js.arcgis.com/3.10/js/esri/css/esri.css">
 11 |   <!-- Web Framework CSS - Bootstrap (getbootstrap.com) and Bootstrap-map-js (github.com/esri/bootstrap-map-js) -->
 12 |   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
 13 |   <link rel="stylesheet" href="//esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
 14 | 
 15 |   <style>
 16 |     html, body, #mapDiv {
 17 |       height: 100%;
 18 |       width: 100%;
 19 |     }  
 20 |    .esriPopup img {
 21 |       max-width: 200px;
 22 |       max-height: 133px;
 23 |     }
 24 |   </style>
 25 | 
 26 |   <!-- ArcGIS API for JavaScript library references -->
 27 |   <script src="//js.arcgis.com/3.10compact"></script>
 28 |   <script>
 29 |     require(["esri/map",
 30 |       "esri/dijit/PopupTemplate",
 31 |       "esri/symbols/PictureMarkerSymbol",
 32 |       "esri/geometry/Point", 
 33 |       "esri/graphic", 
 34 |       "esri/graphicsUtils",
 35 |       "esri/request",
 36 |       "dojo/on", 
 37 |       "dojo/keys",
 38 |       "dojo/_base/fx", 
 39 |       "dojo/fx/easing",
 40 |       "dojo/dom-style",
 41 |       "dojo/dom", 
 42 |       "dojo/domReady!"], 
 43 |       function(Map, PopupTemplate, PictureMarkerSymbol, Point, Graphic, GraphicsUtils, Request, on, keys, fx, easing, domStyle, dom) {
 44 |         "use strict"
 45 | 
 46 |         // Create map
 47 |         var map = new Map("mapDiv",{ 
 48 |           basemap: "gray",
 49 |           center: [-40.69, 45.52],
 50 |           zoom: 3
 51 |         });
 52 | 
 53 |         // Set popup
 54 |         var popup = map.infoWindow;
 55 |         popup.highlight = false;
 56 |         popup.titleInBody = false;
 57 |         popup.domNode.style.marginTop = "-20px";  
 58 |         popup.domNode.className += " light";
 59 |         
 60 | 
 61 |         // Wire UI Events
 62 |         on(dom.byId("btnGo"), "click", loadPhotos);
 63 |         on(dom.byId("inputSearchTags"), "keydown", function(event) {
 64 |           if (event.keyCode === keys.ENTER) {
 65 |             loadPhotos();
 66 |           }
 67 |         });
 68 | 
 69 |         function showInfoWindow(graphic) {
 70 |           if (map.infoWindow.selectedIndex === -1 || graphic !== map.infoWindow.features[map.infoWindow.selectedIndex]) {
 71 |             map.infoWindow.setFeatures([graphic]);
 72 |             map.infoWindow.show(graphic.geometry);
 73 |           }
 74 |         }
 75 | 
 76 |         // Map loaded
 77 |         map.on("load", function () {
 78 |           // Manually show popup instead of using template
 79 |           map.graphics.on("click", function (e) {
 80 |             showInfoWindow(e.graphic);
 81 |           });
 82 | 
 83 |           map.graphics.on("mouse-over", function (e) {
 84 |             showInfoWindow(e.graphic);           
 85 |           });
 86 | 
 87 |           map.infoWindow.on("selection-change", function () {
 88 |               domStyle.set(map.infoWindow.domNode, "opacity", 0);
 89 |               fx.fadeIn({node: map.infoWindow.domNode, 
 90 |                 duration:350,
 91 |                 easing: easing.quadIn}).play();
 92 |           });
 93 |         });
 94 | 
 95 |         // Popup reposition when extent changes
 96 |         map.on("extent-change", function(e) {
 97 |           if (map.infoWindow.isShowing) {
 98 |             map.infoWindow.reposition();
 99 |           }
100 |         });
101 | 
102 |         // Get symbol
103 |         var symbol = new createPictureSymbol("http://esri.github.io/quickstart-map-js/images/blue-pin.png", 0, 12, 13, 24);
104 | 
105 |         // Request to Flickr service
106 |         function loadPhotos(){
107 |           clearGraphics();
108 |           var flickrPhotos = Request({
109 |             url: "http://api.flickr.com/services/feeds/geo",
110 |             content:{
111 |                 format:"json",
112 |                 tagmode: "any",
113 |                 tags: dom.byId("inputSearchTags").value
114 |             },
115 |             callbackParamName: "jsoncallback"
116 |           });
117 |           flickrPhotos.then(addPhotos);
118 |         }
119 | 
120 |         // Create graphics for each Flickr item
121 |         function addPhotos(data){
122 |           // Format popup content
123 |           var template = new PopupTemplate({
124 |             title: "<b>{title}</b>",
125 |             description:"{description}"
126 |           });
127 |           for (var i in data.items) {
128 |             var item = data.items[i];
129 |             var loc = new Point(item.longitude, item.latitude);
130 |             map.graphics.add(new Graphic(loc, symbol, item, template));
131 |           }
132 |           var extent = GraphicsUtils.graphicsExtent(map.graphics.graphics).expand(1.5);   
133 |           map.setExtent(extent);
134 |         }
135 | 
136 | 
137 |         function createPictureSymbol(url, xOffset, yOffset, xWidth, yHeight) {
138 |           return new PictureMarkerSymbol(
139 |           {
140 |             "angle": 0,
141 |             "xoffset": xOffset, "yoffset": yOffset, "type": "esriPMS",
142 |             "url": url,  
143 |             "contentType": "image/png",
144 |             "width":xWidth, "height": yHeight
145 |           });
146 |         }
147 | 
148 |         function clearGraphics() {
149 |           map.graphics.clear();
150 |           map.infoWindow.hide();
151 |         }
152 |     });
153 |   </script>   
154 | </head>
155 |   <body>
156 |     <div class="panel panel-primary panel-fixed">
157 |       <div class="panel-heading">
158 |         <h3 class="panel-title">Load JSON Service</h3>
159 |       </div>
160 |       <div class="panel-body">
161 |         <p>Search Flickr and add results as graphics.</p>
162 |         <div class="input-group"> 
163 |           <input type="text" class="form-control" id="inputSearchTags" placeholder="world cuisine" value="world cuisine">
164 |           <span class="input-group-btn">
165 |             <button id="btnGo" class="btn btn-success">Go!</button>
166 |           </span>
167 |         </div>
168 |       </div>
169 |     </div>
170 |     <div id="mapDiv"></div>
171 |   </body>
172 | </html>
173 | 


--------------------------------------------------------------------------------
/html/data/load_geojson.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html> 
  2 | <html>  
  3 | <head> 
  4 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5 |   <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
  6 |   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  7 |   <title>Load GeoJSON</title>  
  8 |   <link rel="shortcut icon" href="//esri.github.io/quickstart-map-js/images/favicon.ico">
  9 |   <!-- ArcGIS API for JavaScript CSS-->
 10 |   <link rel="stylesheet" href="//js.arcgis.com/3.10/js/esri/css/esri.css">
 11 |   <!-- Web Framework CSS - Bootstrap (getbootstrap.com) and Bootstrap-map-js (github.com/esri/bootstrap-map-js) -->
 12 |   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
 13 |   <link rel="stylesheet" href="//esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
 14 |   <style>
 15 |     html, body, #mapDiv {
 16 |       height: 100%;
 17 |       width: 100%;
 18 |     }
 19 |   </style>
 20 | 
 21 |   <!-- Terraformer -->
 22 |   <script src="../../js/terraformer/terraformer.min.js"></script>
 23 |   <script src="../../js/terraformer-arcgis-parser/terraformer-arcgis-parser.min.js"></script>
 24 | 
 25 |   <!-- ArcGIS API for JavaScript library references -->
 26 |   <script src="//js.arcgis.com/3.10compact"></script>
 27 |   <script>
 28 |     require(["esri/map",
 29 |       "esri/graphic",
 30 |       "esri/layers/FeatureLayer",
 31 |       "esri/InfoTemplate",
 32 |       "esri/graphicsUtils",
 33 |       "esri/Color",
 34 |       "esri/symbols/SimpleMarkerSymbol",
 35 |       "esri/symbols/SimpleLineSymbol",
 36 |       "esri/symbols/SimpleFillSymbol",
 37 |       "esri/request",
 38 |       "esri/geometry/Point",
 39 |       "esri/geometry/Multipoint",
 40 |       "esri/geometry/Polyline",
 41 |       "esri/geometry/Polygon",
 42 |       "dojo/keys",
 43 |       "dojo/on",
 44 |       "dojo/dom",
 45 |       "dojo/domReady!"],
 46 |       function (Map, Graphic, FeatureLayer, InfoTemplate, graphicsUtils, Color, SimplePointSymbol, SimpleLineSymbol, SimpleFillSymbol, esriRequest, Point, MulitPoint, Polyline, Polygon, keys, on, dom) {
 47 |         "use strict";
 48 | 
 49 |         // Create map
 50 |         var map = new Map("mapDiv", {
 51 |           basemap: "gray",
 52 |           center: [-88, 40],
 53 |           zoom: 3
 54 |         });
 55 | 
 56 |         // GeoJSON layer
 57 |         var featureLayer,
 58 |             simplePointSym = new SimplePointSymbol(),
 59 |             simpleLineSym = new SimpleLineSymbol("solid", new Color([50, 50, 50, 1]), 1),
 60 |             simplePolygonSym = new SimpleFillSymbol("solid", simpleLineSym, new Color([255, 50, 50, 0.5]));
 61 | 
 62 |         // Set popup
 63 |         var popup = map.infoWindow;
 64 |         popup.highlight = false;
 65 |         popup.titleInBody = false;
 66 |         //popup.domNode.style.marginTop = "-5px";
 67 |         popup.domNode.className += " light";
 68 | 
 69 |         // Wire UI events
 70 |         on(dom.byId("btnAddCanada"), "click", getGeoJSON);
 71 |         on(dom.byId("btnAddUsa"), "click", getGeoJSON);
 72 | 
 73 |         // Get the GeoJSON to add - file or endpoint will work
 74 |         function getGeoJSON(e) {
 75 |           var requestHandle,
 76 |                 filePath = e.target.dataset.path;
 77 |             // xhr request to get data 
 78 |             requestHandle = esriRequest({
 79 |                 url: filePath,
 80 |                 handleAs: "json"
 81 |             });
 82 |             requestHandle.then(addGeoJSONLayer, errorLoadingGeoJSON);
 83 |         }
 84 | 
 85 |         function requestSucceeded(response, io) {
 86 |           // Add to map
 87 |           addGeoJSONLayer(response);
 88 |         }
 89 | 
 90 |         function requestFailed(error, io) {
 91 |           console.log("Could not load GeoJSON. " + error);
 92 |         }
 93 | 
 94 |         // GeoJSON to ArcGIS geometry type
 95 |         function getEsriGeometryType(geometryGeoJson) {
 96 |           var type;
 97 |           switch (geometryGeoJson) {
 98 |             case "Point":
 99 |               type = "esriGeometryPoint";
100 |               break;
101 |             case "MultiPoint":
102 |               type = "esriGeometryMultipoint";
103 |               break;
104 |             case "LineString":
105 |               type = "esriGeometryPolyline";
106 |               break;
107 |             case "Polygon":
108 |               type = "esriGeometryPolygon";
109 |               break;
110 |             case "MultiPolygon":
111 |               type = "esriGeometryPolygon";
112 |               break;
113 |           }
114 |           return type;
115 |         }
116 | 
117 |         function getEsriSymbol(geometryType) {
118 |           var sym;
119 |           switch (geometryType) {
120 |             case "esriGeometryPoint":
121 |               sym = simplePointSym;
122 |               break;
123 |             case "esriGeometryMultipoint":
124 |               sym = simplePointSym;
125 |               break;
126 |             case "esriGeometryPolyline":
127 |               sym = simpleLineSym;
128 |               break;
129 |             case "esriGeometryPolygon":
130 |               sym = simplePolygonSym;
131 |               break;
132 |             case "esriGeometryPolygon":
133 |               sym = simplePolygonSym;
134 |               break;
135 |           }
136 |           return sym;
137 |         }
138 | 
139 |         function createFeatureCollection(geometryType) {
140 |           // TODO - need to pull definition from GeoJSON attributes!
141 |           var layerDefinition = {
142 |             "geometryType": geometryType,
143 |             "objectIdField": "ObjectID",
144 |             "fields": [{
145 |                 "name": "ObjectID",
146 |                 "alias": "ObjectID",
147 |                 "type": "esriFieldTypeOID"
148 |               }, {
149 |                 "name": "type",
150 |                 "alias": "Type",
151 |                 "type": "esriFieldTypeString"
152 |               }]
153 |           }; 
154 |           var featureCollection = {
155 |             layerDefinition: layerDefinition,
156 |             featureSet: {
157 |               features: [],
158 |               geometryType: geometryType
159 |             }
160 |           };
161 |           return featureCollection;
162 |         }
163 | 
164 |         function createFeature(arcgis, sym) {
165 |           var shape = new Graphic(arcgis).setSymbol(sym);
166 |           // Do other things with shape...  
167 |           return shape;
168 |         }
169 | 
170 |         // Use Terraformer to convert geojson to arcgis json
171 |         function createFeatureSet(geojson, geometryType){
172 |           var featureSet = [];
173 |           // convert the geojson object to a arcgis json representation
174 |           var primitive = new Terraformer.FeatureCollection(geojson);
175 |           var arcgis = Terraformer.ArcGIS.convert(primitive);
176 |           // NOTE: Assumes same geojson geometry type for entire file!
177 |           var sym = getEsriSymbol(geometryType);
178 |           for (var i = 0; i < arcgis.length; i++){
179 |             featureSet.push(createFeature(arcgis[i], sym));
180 |           }
181 |           return featureSet;
182 |         }
183 | 
184 |         // Create a feature layer for the GeoJSON
185 |         function addGeoJSONLayer(geojson) {
186 |           if (!geojson.features.length) {
187 |             return;
188 |           }
189 |           removeGeoJSONLayer();
190 |           // Get geometry type - assume same geometry for entire file!
191 |           var esriGeometryType = getEsriGeometryType(geojson.features[0].geometry.type);
192 |           // Create an skeleton collection and popup definition
193 |           var featureCollection = createFeatureCollection(esriGeometryType);
194 |           var infoTemplate = new InfoTemplate("GeoJSON Data", "${*}");
195 |           // Create feature layer   
196 |           featureLayer = new FeatureLayer(featureCollection, {
197 |             mode: FeatureLayer.MODE_SNAPSHOT,
198 |             outFields: ["*"], 
199 |             infoTemplate: infoTemplate
200 |           });
201 |           // Add it to the map
202 |           map.addLayer(featureLayer);
203 |           // Add graphics to the featurelayer
204 |           var featureSet = createFeatureSet(geojson, esriGeometryType);
205 |           featureLayer.applyEdits(featureSet, null, null);
206 |         }
207 | 
208 |         // Remove existing layer
209 |         function removeGeoJSONLayer() {
210 |           if (featureLayer) {
211 |             map.removeLayer(featureLayer);
212 |             map.infoWindow.hide();
213 |           }
214 |         }
215 | 
216 |         // Error
217 |         function errorLoadingGeoJSON(e) {
218 |             console.log("Error loading GeoJSON. " + e);
219 |         }
220 | 
221 |     });
222 |   </script>
223 | </head>
224 | <body>
225 |    <div class="panel panel-primary panel-fixed">
226 |     <div class="panel-heading">
227 |       <h3 class="panel-title">Load GeoJSON</h3>
228 |     </div>
229 |     <div class="panel-body">
230 |       <p>This sample uses <a href="https://github.com/esri/Terraformer">Terraformer</a> to convert GeoJSON to ArcGIS JSON.</p>
231 |       <div class="form-group">    
232 |         <button id="btnAddCanada" class="btn btn-success" data-path="./canada.json">Canada</button>          
233 |         <button id="btnAddUsa" class="btn btn-success" data-path="./usa.json">USA</button>
234 |       </div>
235 |     </div>
236 |   </div>
237 |   <div id="mapDiv"></div>
238 | </body>
239 | </html>
240 | 


--------------------------------------------------------------------------------
/html/data/query_feature_service.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html> 
  2 | <html>  
  3 | <head> 
  4 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5 |   <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
  6 |   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  7 |   <title>Query Feature Service</title> 
  8 |   <link rel="shortcut icon" href="//esri.github.io/quickstart-map-js/images/favicon.ico">
  9 |   <!-- ArcGIS API for JavaScript CSS-->
 10 |   <link rel="stylesheet" href="//js.arcgis.com/3.10/js/esri/css/esri.css">
 11 |   <!-- Web Framework CSS - Bootstrap (getbootstrap.com) and Bootstrap-map-js (github.com/esri/bootstrap-map-js) -->
 12 |   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
 13 |   <link rel="stylesheet" href="//esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
 14 |   <style>
 15 |     html, body, #mapDiv {
 16 |       height: 100%;
 17 |       width: 100%;
 18 |     }
 19 |   </style>
 20 | 
 21 |   <!-- ArcGIS API for JavaScript library references -->
 22 |   <script src="//js.arcgis.com/3.10compact"></script>
 23 |   <script>     
 24 |     require(["esri/map", 
 25 |       "esri/layers/graphics",
 26 |       "esri/symbols/PictureMarkerSymbol",
 27 |       "esri/layers/FeatureLayer",
 28 |       "esri/symbols/SimpleMarkerSymbol", 
 29 |       "esri/renderers/SimpleRenderer", 
 30 |       "esri/InfoTemplate", 
 31 |       "esri/tasks/query", 
 32 |       "dojo/on", 
 33 |       "dojo/dom", 
 34 |       "dojo/domReady!"], 
 35 |       function(Map, Graphics, PictureMarkerSymbol, FeatureLayer, SimpleMarkerSymbol, SimpleRenderer, InfoTemplate, Query, on, dom) {
 36 |         "use strict"
 37 | 
 38 |         // Create map
 39 |         var map = new Map("mapDiv", { 
 40 |           basemap: "gray",
 41 |           center: [-28,40],
 42 |           zoom: 3
 43 |         });
 44 | 
 45 |         // Set popup
 46 |         var popup = map.infoWindow;
 47 |         popup.highlight = true;
 48 |         popup.titleInBody = false;
 49 |         
 50 |            
 51 |         // Wire UI events
 52 |         on(dom.byId("btnClear"), "click", clearCloudGraphics);
 53 |         on(dom.byId("btnAddCities"), "click", AddCities);
 54 |         on(dom.byId("selCountry"), "change", searchBySQL);
 55 | 
 56 |         var featureLayer; 
 57 |  
 58 |         function AddCities() {
 59 |           if (featureLayer){
 60 |             return;   
 61 |           }
 62 |           // Create a feature layer
 63 |           var infoTemplate = new InfoTemplate("Feature Data", "Name: ${NAME}</br>Country: ${COUNTRY}</br>Population: ${POPULATION}");
 64 |           featureLayer = new FeatureLayer("http://services.arcgis.com/oKgs2tbjK6zwTdvi/arcgis/rest/services/Major_World_Cities/FeatureServer/0", {
 65 |               mode: FeatureLayer.MODE_ONDEMAND,
 66 |               outFields: ["*"],
 67 |               opacity: .90,
 68 |               infoTemplate: infoTemplate
 69 |           });
 70 |           // Setup symbols for layer
 71 |           var symbol = createPictureSymbol("http://esri.github.io/quickstart-map-js/images/blue-pin.png", 0, 12, 13, 24);
 72 |           featureLayer.renderer = new SimpleRenderer(symbol);
 73 |           var selectSymbol = createPictureSymbol("http://esri.github.io/quickstart-map-js/images/red-pin.png", 0, 12, 13, 24);
 74 |           featureLayer.setSelectionSymbol(selectSymbol);
 75 |           // Add cloud layer
 76 |           map.addLayer(featureLayer); 
 77 |           // Connect to selection event 
 78 |           on(featureLayer,"selection-complete", function (results) {
 79 |             var features = results.features;
 80 |             var extent;
 81 |             for (var i = 0; i < features.length; i++) {
 82 |               if (!extent)
 83 |                   extent = features[i]._extent;
 84 |               else
 85 |                   extent.union(features[i]._extent);
 86 |             }
 87 |             if (extent) {
 88 |               map.setExtent(extent); 
 89 |             }   
 90 |           });
 91 |           var element = dom.byId('selCountry');
 92 |           element.disabled = false;
 93 |         }
 94 | 
 95 |         // Select features by SQL query
 96 |         function searchBySQL() {
 97 |           if (!featureLayer) {
 98 |             return;
 99 |           }
100 |           map.infoWindow.hide();
101 |           // Select features in the layer
102 |           var element = dom.byId('selCountry');
103 |           var sql = element.options[element.selectedIndex].value;
104 |           var query = new Query();  // Select by sql
105 |           query.where = sql;
106 |           featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW);
107 |         }
108 | 
109 |         function createPictureSymbol(url, xOffset, yOffset, xWidth, yHeight) {
110 |           return new PictureMarkerSymbol(
111 |           {
112 |             "angle": 0,
113 |             "xoffset": xOffset, "yoffset": yOffset, "type": "esriPMS",
114 |             "url": url,  
115 |             "contentType": "image/png",
116 |             "width":xWidth, "height": yHeight
117 |           });
118 |         }
119 | 
120 |         // Clear selected graphics
121 |         function clearCloudGraphics() {
122 |           map.infoWindow.hide();
123 |           if (featureLayer) {
124 |             map.removeLayer(featureLayer);
125 |           }
126 |           featureLayer = null;      
127 |         }
128 |     });  
129 |   </script>
130 | </head>
131 | <body>
132 |   <div class="panel panel-primary panel-fixed">
133 |     <div class="panel-heading">
134 |       <h3 class="panel-title">Query Feature Service</h3>
135 |     </div>
136 |     <div class="panel-body">
137 |       <div class="form-group">
138 |         <select class="form-control" id="selCountry" disabled>
139 |           <option selected value="1=0">Select by country</option>
140 |           <option value="COUNTRY = 'US'">COUNTRY = 'US'</option>
141 |           <option value="COUNTRY = 'Canada'">COUNTRY = 'Canada'</option>
142 |           <option value="COUNTRY = 'France'">COUNTRY = 'France'</option>
143 |           <option value="COUNTRY = 'Australia'">COUNTRY = 'Australia'</option>
144 |           <option value="COUNTRY = 'Brazil'">COUNTRY = 'Brazil'</option>
145 |         </select>
146 |       </div>
147 |       <button class="btn btn-success" id="btnAddCities">Add World Cities</button>
148 |       <button class="btn btn-default" id="btnClear">Clear</button>
149 |     </div>
150 |   </div>
151 |   <div id="mapDiv"></div>
152 | </body>
153 | </html>
154 | 


--------------------------------------------------------------------------------
/html/data/search_by_distance.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html> 
  2 | <html>  
  3 | <head> 
  4 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5 |   <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
  6 |   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  7 |   <title>Search By Distance</title>  
  8 |   <link rel="shortcut icon" href="//esri.github.io/quickstart-map-js/images/favicon.ico">
  9 |   <!-- ArcGIS API for JavaScript CSS-->
 10 |   <link rel="stylesheet" href="//js.arcgis.com/3.10/js/esri/css/esri.css">
 11 |   <!-- Web Framework CSS - Bootstrap (getbootstrap.com) and Bootstrap-map-js (github.com/esri/bootstrap-map-js) -->
 12 |   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
 13 |   <link rel="stylesheet" href="//esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
 14 |   <style>
 15 |     html, body, #mapDiv {
 16 |       height: 100%;
 17 |       width: 100%;
 18 |     }
 19 |   </style>
 20 | 
 21 |   <!-- ArcGIS API for JavaScript library references -->
 22 |   <script src="//js.arcgis.com/3.10compact"></script>
 23 |   <script>
 24 |   require([
 25 |     "esri/map", "esri/tasks/QueryTask",
 26 |     "esri/tasks/query", "esri/geometry/Circle",
 27 |     "esri/graphic", "esri/symbols/SimpleMarkerSymbol",
 28 |     "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol",
 29 |     "esri/config", "esri/Color", "dojo/keys", "dojo/on", "dojo/dom", "dojo/domReady!"
 30 |   ], function (
 31 |     Map, QueryTask,
 32 |       Query, Circle,
 33 |       Graphic, SimpleMarkerSymbol,
 34 |       SimpleLineSymbol, SimpleFillSymbol,
 35 |       esriConfig, Color, keys, on, dom
 36 |       ) {
 37 |     
 38 |     var map = new Map("mapDiv", {
 39 |       basemap: "gray",
 40 |       center: [-28,40],
 41 |       zoom: 3
 42 |     });
 43 | 
 44 |     // Create a query task pointing at a subset of RTD Bus Stops
 45 |     var queryTask = new QueryTask("http://services.arcgis.com/oKgs2tbjK6zwTdvi/arcgis/rest/services/Major_World_Cities/FeatureServer/0");
 46 | 
 47 |     // Symbol used to draw the selected census block points within the buffer polygon
 48 |     var symbol = new SimpleMarkerSymbol(
 49 |         SimpleMarkerSymbol.STYLE_CIRCLE,
 50 |         12,
 51 |         new SimpleLineSymbol(
 52 |             SimpleLineSymbol.STYLE_NULL,
 53 |             new Color([247, 34, 101, 0.9]),
 54 |             1
 55 |         ),
 56 |         new Color([207, 34, 171, 0.5])
 57 |     );
 58 | 
 59 |     var circleSymb = new SimpleFillSymbol(
 60 |         SimpleFillSymbol.STYLE_NULL,
 61 |         new SimpleLineSymbol(
 62 |             SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,
 63 |             new Color([105, 105, 105]),
 64 |             2
 65 |         ), new Color([255, 255, 0, 0.25])
 66 |     );
 67 | 
 68 |     // When the map is clicked create a buffer around the click point of the specified distance.
 69 |     var active = false;
 70 |     var done = true;
 71 | 
 72 |     // Wire map events
 73 |     map.on("load", function () { map.disablePan(); });
 74 |     map.on("click", searchByDistance);
 75 |     map.on("mouse-drag-start", function(evt) {
 76 |       active = true;
 77 |       done = true;
 78 |     });
 79 |     map.on("mouse-drag-end", function(evt) {
 80 |       active = false;
 81 |       done = true;
 82 |     });
 83 |     map.on("mouse-drag", function(evt) {
 84 |       if (active && done) {
 85 |         done = false;
 86 |         setTimeout(searchByDistance(evt), 100);
 87 |       }
 88 |     });
 89 | 
 90 |     on(dom.byId("distance"), "change", function () {
 91 |       if (map.graphics.graphics.length) {
 92 |         var evt = {};
 93 |         evt.mapPoint = map.graphics.graphics[0].geometry.center;
 94 |         searchByDistance(evt);
 95 |       }
 96 |     });
 97 | 
 98 |     function searchByDistance(evt){
 99 |       map.graphics.clear();
100 | 
101 |       var element = dom.byId("distance");
102 |       var distance = element.options[element.selectedIndex].value;
103 | 
104 |       var circle = new Circle({
105 |         center: evt.mapPoint,
106 |         geodesic: true,
107 |         radius: distance,
108 |         radiusUnit: "esriMiles"
109 |       });
110 |       map.graphics.add(new Graphic(circle, circleSymb));
111 | 
112 |       var query = new Query();
113 |       query.geometry = evt.mapPoint;
114 |       query.distance = distance;
115 |       query.units =  "miles";
116 |       query.returnGeometry = true;
117 |       query.outSpatialReference = map.spatialReference;
118 |       query.spatialRelationship = Query.SPATIAL_REL_CONTAINS;
119 | 
120 |       queryTask.execute(query, function(response) {
121 |         var features = response.features;
122 | 
123 |         for (var i = 0; i < features.length; i++) {
124 |           var feature = features[i];
125 |           feature.setSymbol(symbol);
126 |           map.graphics.add(feature);
127 |         }
128 |         done = true;  // done
129 |       }, function(error) {
130 |         console.log("Got an error " + error);
131 |         done = true;  // done
132 |       });
133 |     }
134 |   });
135 |   </script>
136 | </head>
137 | <body>
138 |    <div class="panel panel-primary panel-fixed">
139 |     <div class="panel-heading">
140 |       <h3 class="panel-title">Search By Distance</h3>
141 |     </div>
142 |     <div class="panel-body">
143 |       <p>Drag on the map to search for cities.</p>
144 |       <div class="form-group">
145 |         <select class="form-control" id="distance">
146 |           <option value="100">100 miles</option>
147 |           <option value="250">250 miles</option>
148 |           <option selected value="500">500 miles</option>
149 |           <option value="1000">1000 miles</option>
150 |         </select>
151 |       </div>
152 |     </div>
153 |   </div>
154 |   <div id="mapDiv"></div>
155 | </body>
156 | </html>
157 | 


--------------------------------------------------------------------------------
/html/data/usa.json:
--------------------------------------------------------------------------------
1 | {"type":"FeatureCollection","features":[
2 | {"type":"Feature","id":"USA","properties":{"name":"United States of America"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-155.54211,19.08348],[-155.68817,18.91619],[-155.93665,19.05939],[-155.90806,19.33888],[-156.07347,19.70294],[-156.02368,19.81422],[-155.85008,19.97729],[-155.91907,20.17395],[-155.86108,20.26721],[-155.78505,20.2487],[-155.40214,20.07975],[-155.22452,19.99302],[-155.06226,19.8591],[-154.80741,19.50871],[-154.83147,19.45328],[-155.22217,19.23972],[-155.54211,19.08348]]],[[[-156.07926,20.64397],[-156.41445,20.57241],[-156.58673,20.783],[-156.70167,20.8643],[-156.71055,20.92676],[-156.61258,21.01249],[-156.25711,20.91745],[-155.99566,20.76404],[-156.07926,20.64397]]],[[[-156.75824,21.17684],[-156.78933,21.06873],[-157.32521,21.09777],[-157.25027,21.21958],[-156.75824,21.17684]]],[[[-157.65283,21.32217],[-157.70703,21.26442],[-157.7786,21.27729],[-158.12667,21.31244],[-158.2538,21.53919],[-158.29265,21.57912],[-158.0252,21.71696],[-157.94161,21.65272],[-157.65283,21.32217]]],[[[-159.34512,21.982],[-159.46372,21.88299],[-159.80051,22.06533],[-159.74877,22.1382],[-159.5962,22.23618],[-159.36569,22.21494],[-159.34512,21.982]]],[[[-94.81758,49.38905],[-94.64,48.84],[-94.32914,48.67074],[-93.63087,48.60926],[-92.61,48.45],[-91.64,48.14],[-90.83,48.27],[-89.6,48.01],[-89.272917,48.019808],[-88.378114,48.302918],[-87.439793,47.94],[-86.461991,47.553338],[-85.652363,47.220219],[-84.87608,46.900083],[-84.779238,46.637102],[-84.543749,46.538684],[-84.6049,46.4396],[-84.3367,46.40877],[-84.14212,46.512226],[-84.091851,46.275419],[-83.890765,46.116927],[-83.616131,46.116927],[-83.469551,45.994686],[-83.592851,45.816894],[-82.550925,45.347517],[-82.337763,44.44],[-82.137642,43.571088],[-82.43,42.98],[-82.9,42.43],[-83.12,42.08],[-83.142,41.975681],[-83.02981,41.832796],[-82.690089,41.675105],[-82.439278,41.675105],[-81.277747,42.209026],[-80.247448,42.3662],[-78.939362,42.863611],[-78.92,42.965],[-79.01,43.27],[-79.171674,43.466339],[-78.72028,43.625089],[-77.737885,43.629056],[-76.820034,43.628784],[-76.5,44.018459],[-76.375,44.09631],[-75.31821,44.81645],[-74.867,45.00048],[-73.34783,45.00738],[-71.50506,45.0082],[-71.405,45.255],[-71.08482,45.30524],[-70.66,45.46],[-70.305,45.915],[-69.99997,46.69307],[-69.237216,47.447781],[-68.905,47.185],[-68.23444,47.35486],[-67.79046,47.06636],[-67.79134,45.70281],[-67.13741,45.13753],[-66.96466,44.8097],[-68.03252,44.3252],[-69.06,43.98],[-70.11617,43.68405],[-70.645476,43.090238],[-70.81489,42.8653],[-70.825,42.335],[-70.495,41.805],[-70.08,41.78],[-70.185,42.145],[-69.88497,41.92283],[-69.96503,41.63717],[-70.64,41.475],[-71.12039,41.49445],[-71.86,41.32],[-72.295,41.27],[-72.87643,41.22065],[-73.71,40.931102],[-72.24126,41.11948],[-71.945,40.93],[-73.345,40.63],[-73.982,40.628],[-73.952325,40.75075],[-74.25671,40.47351],[-73.96244,40.42763],[-74.17838,39.70926],[-74.90604,38.93954],[-74.98041,39.1964],[-75.20002,39.24845],[-75.52805,39.4985],[-75.32,38.96],[-75.071835,38.782032],[-75.05673,38.40412],[-75.37747,38.01551],[-75.94023,37.21689],[-76.03127,37.2566],[-75.72205,37.93705],[-76.23287,38.319215],[-76.35,39.15],[-76.542725,38.717615],[-76.32933,38.08326],[-76.989998,38.239992],[-76.30162,37.917945],[-76.25874,36.9664],[-75.9718,36.89726],[-75.86804,36.55125],[-75.72749,35.55074],[-76.36318,34.80854],[-77.397635,34.51201],[-78.05496,33.92547],[-78.55435,33.86133],[-79.06067,33.49395],[-79.20357,33.15839],[-80.301325,32.509355],[-80.86498,32.0333],[-81.33629,31.44049],[-81.49042,30.72999],[-81.31371,30.03552],[-80.98,29.18],[-80.535585,28.47213],[-80.53,28.04],[-80.056539,26.88],[-80.088015,26.205765],[-80.13156,25.816775],[-80.38103,25.20616],[-80.68,25.08],[-81.17213,25.20126],[-81.33,25.64],[-81.71,25.87],[-82.24,26.73],[-82.70515,27.49504],[-82.85526,27.88624],[-82.65,28.55],[-82.93,29.1],[-83.70959,29.93656],[-84.1,30.09],[-85.10882,29.63615],[-85.28784,29.68612],[-85.7731,30.15261],[-86.4,30.4],[-87.53036,30.27433],[-88.41782,30.3849],[-89.18049,30.31598],[-89.593831,30.159994],[-89.413735,29.89419],[-89.43,29.48864],[-89.21767,29.29108],[-89.40823,29.15961],[-89.77928,29.30714],[-90.15463,29.11743],[-90.880225,29.148535],[-91.626785,29.677],[-92.49906,29.5523],[-93.22637,29.78375],[-93.84842,29.71363],[-94.69,29.48],[-95.60026,28.73863],[-96.59404,28.30748],[-97.14,27.83],[-97.37,27.38],[-97.38,26.69],[-97.33,26.21],[-97.14,25.87],[-97.53,25.84],[-98.24,26.06],[-99.02,26.37],[-99.3,26.84],[-99.52,27.54],[-100.11,28.11],[-100.45584,28.69612],[-100.9576,29.38071],[-101.6624,29.7793],[-102.48,29.76],[-103.11,28.97],[-103.94,29.27],[-104.45697,29.57196],[-104.70575,30.12173],[-105.03737,30.64402],[-105.63159,31.08383],[-106.1429,31.39995],[-106.50759,31.75452],[-108.24,31.754854],[-108.24194,31.34222],[-109.035,31.34194],[-111.02361,31.33472],[-113.30498,32.03914],[-114.815,32.52528],[-114.72139,32.72083],[-115.99135,32.61239],[-117.12776,32.53534],[-117.295938,33.046225],[-117.944,33.621236],[-118.410602,33.740909],[-118.519895,34.027782],[-119.081,34.078],[-119.438841,34.348477],[-120.36778,34.44711],[-120.62286,34.60855],[-120.74433,35.15686],[-121.71457,36.16153],[-122.54747,37.55176],[-122.51201,37.78339],[-122.95319,38.11371],[-123.7272,38.95166],[-123.86517,39.76699],[-124.39807,40.3132],[-124.17886,41.14202],[-124.2137,41.99964],[-124.53284,42.76599],[-124.14214,43.70838],[-124.020535,44.615895],[-123.89893,45.52341],[-124.079635,46.86475],[-124.39567,47.72017],[-124.68721,48.184433],[-124.566101,48.379715],[-123.12,48.04],[-122.58736,47.096],[-122.34,47.36],[-122.5,48.18],[-122.84,49],[-120,49],[-117.03121,49],[-116.04818,49],[-113,49],[-110.05,49],[-107.05,49],[-104.04826,48.99986],[-100.65,49],[-97.22872,49.0007],[-95.15907,49],[-95.15609,49.38425],[-94.81758,49.38905]]],[[[-153.006314,57.115842],[-154.00509,56.734677],[-154.516403,56.992749],[-154.670993,57.461196],[-153.76278,57.816575],[-153.228729,57.968968],[-152.564791,57.901427],[-152.141147,57.591059],[-153.006314,57.115842]]],[[[-165.579164,59.909987],[-166.19277,59.754441],[-166.848337,59.941406],[-167.455277,60.213069],[-166.467792,60.38417],[-165.67443,60.293607],[-165.579164,59.909987]]],[[[-171.731657,63.782515],[-171.114434,63.592191],[-170.491112,63.694975],[-169.682505,63.431116],[-168.689439,63.297506],[-168.771941,63.188598],[-169.52944,62.976931],[-170.290556,63.194438],[-170.671386,63.375822],[-171.553063,63.317789],[-171.791111,63.405846],[-171.731657,63.782515]]],[[[-155.06779,71.147776],[-154.344165,70.696409],[-153.900006,70.889989],[-152.210006,70.829992],[-152.270002,70.600006],[-150.739992,70.430017],[-149.720003,70.53001],[-147.613362,70.214035],[-145.68999,70.12001],[-144.920011,69.989992],[-143.589446,70.152514],[-142.07251,69.851938],[-140.985988,69.711998],[-140.985988,69.711998],[-140.992499,66.000029],[-140.99777,60.306397],[-140.012998,60.276838],[-139.039,60.000007],[-138.34089,59.56211],[-137.4525,58.905],[-136.47972,59.46389],[-135.47583,59.78778],[-134.945,59.27056],[-134.27111,58.86111],[-133.355549,58.410285],[-132.73042,57.69289],[-131.70781,56.55212],[-130.00778,55.91583],[-129.979994,55.284998],[-130.53611,54.802753],[-131.085818,55.178906],[-131.967211,55.497776],[-132.250011,56.369996],[-133.539181,57.178887],[-134.078063,58.123068],[-135.038211,58.187715],[-136.628062,58.212209],[-137.800006,58.499995],[-139.867787,59.537762],[-140.825274,59.727517],[-142.574444,60.084447],[-143.958881,59.99918],[-145.925557,60.45861],[-147.114374,60.884656],[-148.224306,60.672989],[-148.018066,59.978329],[-148.570823,59.914173],[-149.727858,59.705658],[-150.608243,59.368211],[-151.716393,59.155821],[-151.859433,59.744984],[-151.409719,60.725803],[-150.346941,61.033588],[-150.621111,61.284425],[-151.895839,60.727198],[-152.57833,60.061657],[-154.019172,59.350279],[-153.287511,58.864728],[-154.232492,58.146374],[-155.307491,57.727795],[-156.308335,57.422774],[-156.556097,56.979985],[-158.117217,56.463608],[-158.433321,55.994154],[-159.603327,55.566686],[-160.28972,55.643581],[-161.223048,55.364735],[-162.237766,55.024187],[-163.069447,54.689737],[-164.785569,54.404173],[-164.942226,54.572225],[-163.84834,55.039431],[-162.870001,55.348043],[-161.804175,55.894986],[-160.563605,56.008055],[-160.07056,56.418055],[-158.684443,57.016675],[-158.461097,57.216921],[-157.72277,57.570001],[-157.550274,58.328326],[-157.041675,58.918885],[-158.194731,58.615802],[-158.517218,58.787781],[-159.058606,58.424186],[-159.711667,58.93139],[-159.981289,58.572549],[-160.355271,59.071123],[-161.355003,58.670838],[-161.968894,58.671665],[-162.054987,59.266925],[-161.874171,59.633621],[-162.518059,59.989724],[-163.818341,59.798056],[-164.662218,60.267484],[-165.346388,60.507496],[-165.350832,61.073895],[-166.121379,61.500019],[-165.734452,62.074997],[-164.919179,62.633076],[-164.562508,63.146378],[-163.753332,63.219449],[-163.067224,63.059459],[-162.260555,63.541936],[-161.53445,63.455817],[-160.772507,63.766108],[-160.958335,64.222799],[-161.518068,64.402788],[-160.777778,64.788604],[-161.391926,64.777235],[-162.45305,64.559445],[-162.757786,64.338605],[-163.546394,64.55916],[-164.96083,64.446945],[-166.425288,64.686672],[-166.845004,65.088896],[-168.11056,65.669997],[-166.705271,66.088318],[-164.47471,66.57666],[-163.652512,66.57666],[-163.788602,66.077207],[-161.677774,66.11612],[-162.489715,66.735565],[-163.719717,67.116395],[-164.430991,67.616338],[-165.390287,68.042772],[-166.764441,68.358877],[-166.204707,68.883031],[-164.430811,68.915535],[-163.168614,69.371115],[-162.930566,69.858062],[-161.908897,70.33333],[-160.934797,70.44769],[-159.039176,70.891642],[-158.119723,70.824721],[-156.580825,71.357764],[-155.06779,71.147776]]]]}}
3 | ]}


--------------------------------------------------------------------------------
/html/data/webmapbyid.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML>
  2 | <html>
  3 | <head>
  4 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5 |   <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
  6 |   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  7 |   <title>Load Webmap</title>
  8 |   <link rel="shortcut icon" href="//esri.github.io/quickstart-map-js/images/favicon.ico">
  9 |   <!-- ArcGIS API for JavaScript CSS-->
 10 |   <link rel="stylesheet" href="//js.arcgis.com/3.10/js/esri/css/esri.css">
 11 |   <!-- Web Framework CSS - Bootstrap (getbootstrap.com) and Bootstrap-map-js (github.com/esri/bootstrap-map-js) -->
 12 |   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
 13 |   <link rel="stylesheet" href="//esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
 14 |   <style>
 15 |     html, body, .container {
 16 |       height: 100%;
 17 |       width: 100%;
 18 |     }
 19 | 
 20 |     #leftPanel, #rightPanel {
 21 |       height: 500px;
 22 |     }
 23 | 
 24 |     #leftPanel {
 25 |       overflow: auto;
 26 |     }
 27 | 
 28 |     #mapTitle {
 29 |       margin-top: 0;
 30 |     }
 31 | 
 32 |   </style>
 33 |   
 34 |   <!-- ArcGIS API for JavaScript library references -->
 35 |   <script src="//js.arcgis.com/3.10compact"></script>
 36 |   <script>
 37 |     require(["esri/map", 
 38 |       "esri/dijit/Popup",
 39 |       "esri/dijit/Scalebar", 
 40 |       "esri/dijit/Legend", 
 41 |       "esri/arcgis/utils",
 42 |       "dojo/dom", 
 43 |       "dojo/on", 
 44 |       "dojo/query", 
 45 |       "dojo/domReady!"], 
 46 |       function(Map, Popup, Scalebar, Legend, esriUtils, dom, on, query) {  
 47 |         "use strict"
 48 |         
 49 |         var map;
 50 |         var scalebar;
 51 |         var legend;
 52 |     
 53 |         // Wire UI events
 54 |         on(dom.byId("btnWebmap"),"click", loadWebmap);
 55 |         on(dom.byId("webmapInput"),"keypress",function(event) {
 56 |           if (event.keyCode == keys.ENTER) {
 57 |             loadWebmap();
 58 |           }
 59 |         });
 60 |         on(dom.byId("close"),"click", function(){
 61 |           query(".alert").style("display","none");
 62 |           map.reposition();
 63 |           map.resize();
 64 |         });
 65 | 
 66 |         // Load basemap map when page loads
 67 |         loadWebmap();
 68 | 
 69 |         // Load webmap
 70 |         function loadWebmap() {
 71 |           // Clear old map
 72 |           resetMap();
 73 | 
 74 |           // Get new webmap and extract map and map parts
 75 |           var mapDeferred = esriUtils.createMap(dom.byId("webmapInput").value.trim(), "mapDiv", {
 76 |             mapOptions: {
 77 |               slider: true,
 78 |               nav:false
 79 |             }
 80 |           });
 81 | 
 82 |           mapDeferred.then(function(response) {   
 83 |             map = response.map;
 84 |             // Set popup
 85 |             var popup = map.infoWindow;
 86 |             popup.set("highlight",true);
 87 |             popup.set("titleInBody",false);
 88 |             popup.domNode.className += " light";
 89 |             // Add titles
 90 |             dom.byId("mapTitle").innerHTML = response.itemInfo.item.title;
 91 |             dom.byId("mapSubTitle").innerHTML = response.itemInfo.item.snippet;
 92 |             // Add scalebar and legend
 93 |             var layers = esriUtils.getLegendLayers(response);  
 94 |             initMapParts(layers);
 95 |           },function(error){
 96 |             alert("Sorry, couldn't load webmap!");
 97 |             console.log("Error loading webmap: " & dojo.toJson(error));           
 98 |           });
 99 |         }
100 |         
101 |         function initMapParts(layers){
102 |          //add a scalebar
103 |           scalebar = new Scalebar({
104 |             map:map,
105 |             scalebarUnit: 'english'
106 |           });
107 |           //add a legend
108 |           if (legend) {
109 |             legend.map = map;
110 |             legend.refresh(layers);
111 |           }
112 |           else {
113 |             legend = new Legend({
114 |                 map:map,
115 |                 layerInfos:layers
116 |               },"mapLegend");
117 |             legend.startup();
118 |           }
119 |         }
120 | 
121 |         // Clean up map
122 |         function resetMap() {
123 |           if (map) { 
124 |             map.removeAllLayers();
125 |             map.spatialReference = null;
126 |             map.destroy();
127 |           }
128 |           if (scalebar)
129 |            scalebar.destroy();
130 |           if (legend) {
131 |             dom.byId("mapLegend").innerHTML = "";
132 |           }        
133 |           dom.byId("mapTitle").innerHTML = "";
134 |           dom.byId("mapSubTitle").innerHTML = "";
135 |         }
136 |     });
137 |   </script>
138 | </head>
139 | <body>
140 |   <div class="container">
141 |     <div class="row">
142 |       <div class="col-xs-12">
143 |         <p></p>
144 |         <div class="panel panel-primary">
145 |           <div class="panel-heading">
146 |             <h3 class="panel-title">Load Webmap by ID</h3>
147 |           </div>
148 |           <div class="panel-body">
149 |             <div class="form-inline">
150 |               <input type="text" class="form-control" id="webmapInput"
151 |                 placeholder="42fdce6c0d9e4225aa68f0bfb442cb93"
152 |                 value="42fdce6c0d9e4225aa68f0bfb442cb93">          
153 |               </input>
154 |               <button id="btnWebmap" class="btn btn-success">Add</button>
155 |             </div>
156 |           </div>
157 |         </div>
158 |         <div class="alert alert-danger">
159 |           <button id="close" type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
160 |           NOTE: If you would like to create a responsive map that automatically resizes, please see <a href="//github.com/esri/bootstrap-map-js" class="alert-link">Bootstrap-map-js</a>.
161 |         </div>
162 |       </div>
163 |     </div>
164 |     <div class="row">
165 |       <div id="leftPanel" class="col-xs-3">
166 |         <h2 id="mapTitle"></h2><small id="mapSubTitle"></small>
167 |         <hr>
168 |         <div id="mapLegend"></div>
169 |       </div>
170 |       <div id="rightPanel" class="col-xs-9">
171 |          <div id="mapDiv"></div>
172 |       </div>
173 |     </div>
174 |   </div>
175 | </body>
176 | </html>
177 |  


--------------------------------------------------------------------------------
/html/directions/directions_widget.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
 6 |   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
 7 |   <title>Directions Widget</title> <link rel="shortcut icon" href="//esri.github.io/quickstart-map-js/images/favicon.ico">
 8 |   <!-- ArcGIS API for JavaScript CSS-->
 9 |   <link rel="stylesheet" href="//js.arcgis.com/3.10/js/esri/css/esri.css">
10 |   <!-- Web Framework - Bootstrap (getbootstrap.com) and Bootstrap-map-js (github.com/esri/bootstrap-map-js) -->
11 |   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
12 |   <link rel="stylesheet" href="//esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
13 |   <style>
14 |     html, body, #mapDiv {
15 |       height: 100%;
16 |       width: 100%;
17 |     }
18 |   </style>
19 | 
20 |   <!-- ArcGIS API for JavaScript library references -->
21 |   <script src="//js.arcgis.com/3.10compact"></script>
22 |   <script>
23 |     require(["esri/map", 
24 |       "esri/dijit/Directions", 
25 |       "dojo/domReady!"], 
26 |       function(Map, Directions, utils) {         
27 |        
28 |         // Create map
29 |         var map = new Map("mapDiv", {
30 |           basemap: "streets",
31 |           center:[-98.56,39.82],
32 |           zoom: 4
33 |         });
34 | 
35 |         // Set popup
36 |         var popup = map.infoWindow;
37 |         popup.highlight = false;
38 |         popup.domNode.className += " light";
39 |       
40 |         // Create Directions widget - NOTE: The routeTaskUrl service will be expiring at the end of 2013 and should be replaced 
41 |         // with the world network service that requires an ArcGIS account to access
42 |         var directions = new Directions({
43 |           map: map,
44 |           routeTaskUrl: "http://tasks.arcgisonline.com/ArcGIS/rest/services/NetworkAnalysis/ESRI_Route_NA/NAServer/Route",
45 |           geocoderOptions: {autoComplete:true, autoNavigate:false}
46 | 
47 |         },"dir");
48 |         directions.startup();
49 |       }
50 |     );
51 |   </script>
52 | </head>
53 | <body>
54 |  <div class="panel panel-primary panel-fixed">
55 |     <div class="panel-heading">
56 |       <h3 class="panel-title">Directions Widget</h3>
57 |     </div>
58 |     <div class="panel-body">
59 |       <div id="dir"></div>
60 |     </div>
61 |   </div>
62 |   <div id="mapDiv"></div>
63 | </body>
64 | </html>
65 | 


--------------------------------------------------------------------------------
/html/directions/drivetime.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5 |   <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
  6 |   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  7 |   <title>Find Drive Times</title>
  8 |   <link rel="shortcut icon" href="//esri.github.io/quickstart-map-js/images/favicon.ico">
  9 |   <!-- ArcGIS API for JavaScript CSS-->
 10 |   <link rel="stylesheet" href="//js.arcgis.com/3.10/js/esri/css/esri.css">
 11 |   <!-- Web Framework CSS - Bootstrap (getbootstrap.com) and Bootstrap-map-js (github.com/esri/bootstrap-map-js) -->
 12 |   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
 13 |   <link rel="stylesheet" href="//esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
 14 |   <style>
 15 |     html, body, #mapDiv {
 16 |       height: 100%;
 17 |       width: 100%;
 18 |     }
 19 |   </style>
 20 |   
 21 |   <!-- ArcGIS API for JavaScript library references -->
 22 |   <script src="//js.arcgis.com/3.10compact"></script>
 23 |   <script>
 24 |     require(["esri/map",
 25 |       "esri/tasks/Geoprocessor", 
 26 |       "esri/graphic", 
 27 |       "esri/tasks/FeatureSet", 
 28 |       "esri/symbols/SimpleLineSymbol", 
 29 |       "esri/symbols/SimpleFillSymbol", 
 30 |       "esri/symbols/PictureMarkerSymbol",
 31 |       "dojo/on", 
 32 |       "dojo/dom", 
 33 |       "dojo/domReady!"], 
 34 |       function(Map, Geoprocessor, Graphic, FeatureSet, SimpleLineSymbol, SimpleFillSymbol, PictureMarkerSymbol, on, dom) {
 35 |         "use strict"
 36 |         var gp, pointGraphic;
 37 |         var driveTimes = "1 2 3";
 38 | 
 39 |         // Create map
 40 |         var map = new Map("mapDiv", {
 41 |           basemap: "topo",
 42 |           center: [-122.31, 47.67],
 43 |           zoom: 12,
 44 |         });
 45 | 
 46 |         //Here is the spatial analysis service that creates the drive time polygons. 
 47 |         gp = new Geoprocessor("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Network/ESRI_DriveTime_US/GPServer/CreateDriveTimePolygons");
 48 |         gp.setOutputSpatialReference(map.spatialReference); //Set the coordinate system to match the map which is Web Mercator
 49 |         
 50 |         //Listen for the click event on the map then call computeServiceArea function
 51 |         on(map, "click", computeServiceArea);
 52 |         
 53 |         // Wire UI events
 54 |         on(dom.byId("btnClear"), "click", clearGraphics);
 55 | 
 56 |         // Returns the map coordinates where the user clicked, it draws the point, and sets the two parameters for the service.   
 57 |         function computeServiceArea(evt) {
 58 |           map.graphics.clear();
 59 |           
 60 |           var ptServiceArea = evt.mapPoint;
 61 |           var pointGraphic = new Graphic(ptServiceArea, null);
 62 | 
 63 |           //Here we use the FeautureSet class as an input for the graphic location which is then used as a parameter for variable param.
 64 |           var features = [];
 65 |           features.push(pointGraphic);
 66 |           var featureSet = new FeatureSet();
 67 |           featureSet.features = features;
 68 | 
 69 |           //Set the parameters. The first parameter is the clicked point and second is the drive times based on variable driveTimes. 
 70 |           var params = { "Input_Location": featureSet, "Drive_Times": driveTimes };
 71 | 
 72 |           //The spatial analysis service is a synchronous so you only need to supply the input parameters and callback function to handle the results.
 73 |           gp.execute(params, getDriveTimePolys, errorHandler);
 74 |         }
 75 | 
 76 |         //Function for the results of the service are returned as an array. It loops through one FeatureSet returned by the service and add the features to the map. 
 77 |         function getDriveTimePolys(results, messages) {
 78 |           map.graphics.remove(pointGraphic);
 79 |           var features = results[0].value.features;
 80 |           for (var f = 0, fl = features.length; f < fl; f++) {
 81 |             var feature = features[f];
 82 |             if (f == 0) {
 83 |               //Symbology for how the 3 minute polygon will draw 
 84 |               var polySymbolBlue = new SimpleFillSymbol();
 85 |               polySymbolBlue.setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 0, 0, 0.5]), 1));
 86 |               polySymbolBlue.setColor(new dojo.Color([39, 64, 139, 0.6]));
 87 |               feature.setSymbol(polySymbolBlue);
 88 |             }
 89 |             else if (f == 1) {
 90 |               //Symbology for how the 2 minute polygon will draw 
 91 |               var polySymbolGreen = new SimpleFillSymbol();
 92 |               polySymbolGreen.setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 0, 0, 0.5]), 1));
 93 |               polySymbolGreen.setColor(new dojo.Color([34, 139, 34, 0.6]));
 94 |               feature.setSymbol(polySymbolGreen);
 95 |             }
 96 |             else if (f == 2) {
 97 |               //Symbology for how the 1 minute polygon will draw 
 98 |               var polySymbolRed = new SimpleFillSymbol();
 99 |               polySymbolRed.setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 0, 0, 0.5]), 1));
100 |               polySymbolRed.setColor(new dojo.Color([205, 0, 0, 0.6]));
101 |               feature.setSymbol(polySymbolRed);
102 |             }
103 |             //Add the features (polygons)to the map based on 1,2, and 3 minutes from the center of the point. 
104 |             map.graphics.add(feature);
105 |           }
106 |           //if (pointGraphic.getDojoShape()) // - TODO
107 |           //  pointGraphic.getDojoShape().moveToTop();
108 |               
109 |         }
110 |                 
111 |         function errorHandler(error) {
112 |           alert(error);
113 |         }
114 |         
115 |         function clearGraphics() {
116 |           map.graphics.clear();
117 |           map.infoInwindow.hide();
118 |         }
119 |     });
120 |   </script>
121 | </head>
122 | <body>
123 |   <div class="panel panel-primary panel-fixed">
124 |     <div class="panel-heading">
125 |       <h3 class="panel-title">Get Drive Times</h3>
126 |     </div>
127 |     <div class="panel-body">
128 |       <p>Click on the map to create a drivetime polygon of 1, 2 and 3 minutes.</p>
129 |       <button id="btnClear" class="btn btn-default">Clear</button>
130 |     </div>
131 |   </div>
132 |   <div id="mapDiv"></div>
133 | </body>
134 | </html>
135 | 


--------------------------------------------------------------------------------
/html/directions/traffic.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5 |   <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
  6 |   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  7 |   <title>Traffic</title>
  8 |   <link rel="shortcut icon" href="//esri.github.io/quickstart-map-js/images/favicon.ico">
  9 |   <!-- ArcGIS API for JavaScript CSS-->
 10 |   <link rel="stylesheet" href="//js.arcgis.com/3.10/js/esri/css/esri.css">
 11 |   <!-- Web Framework CSS - Bootstrap (getbootstrap.com) and Bootstrap-map-js (github.com/esri/bootstrap-map-js) -->
 12 |   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
 13 |   <link rel="stylesheet" href="//esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
 14 |   <style>
 15 |     html, body, #mapDiv {
 16 |       height: 100%;
 17 |       width: 100%;
 18 |     }
 19 | 
 20 |     #leftPanel, #rightPanel {
 21 |       height: 500px;
 22 |     }
 23 | 
 24 |     #leftPanel {
 25 |       overflow: auto;
 26 |       padding: 0 30px;
 27 |     }
 28 | 
 29 |     #mapTitle {
 30 |       margin-top: 0;
 31 |     }
 32 |   </style>
 33 |   
 34 |   <!-- ArcGIS API for JavaScript library references -->
 35 |   <script src="//js.arcgis.com/3.10compact"></script>
 36 |   <script>
 37 |     require(["esri/map", 
 38 |       "esri/dijit/Legend", 
 39 |       "esri/dijit/Scalebar", 
 40 |       "esri/arcgis/utils", 
 41 |       "dojo/on", 
 42 |       "dojo/_base/connect", 
 43 |       "dojo/dom", 
 44 |       "dojo/domReady!"],   
 45 |       function(Map, Legend, Scalebar, esriUtils, on, conn, dom) {  
 46 |         "use strict"
 47 | 
 48 |         //all requests to traffic.arcgis.com will proxy to the proxyUrl defined in this object.
 49 |         esri.addProxyRule({
 50 |           urlPrefix: "traffic.arcgis.com",  
 51 |           //proxyUrl: "/sproxy"
 52 |           proxyUrl: "http://developers.arcgis.com/sproxy"
 53 |         });
 54 | 
 55 |         var map;
 56 |         var webmapId = "327687e9b2664d65aa7a7f5c85398cff";
 57 | 
 58 |         createMap();
 59 | 
 60 |         function createMap() {
 61 |           var mapDeferred = esri.arcgis.utils.createMap(webmapId, "mapDiv");
 62 |           mapDeferred.then(function(response) {
 63 | 
 64 |             map = response.map;
 65 | 
 66 |             dom.byId("mapTitle").innerHTML = response.itemInfo.item.title;
 67 |             dom.byId("mapSubTitle").innerHTML = response.itemInfo.item.snippet;
 68 |                         
 69 |             //get the layers that will display in the legend. 
 70 |             var layers = esriUtils.getLegendLayers(response);  
 71 | 
 72 |             if (map.loaded) {
 73 |               initMap(layers);
 74 |             } else {
 75 |               on(map, "load", function() {
 76 |                 initMap(layers);
 77 |               });
 78 |             }
 79 | 
 80 |           },function(error){
 81 |             alert("Sorry, couldn't load webmap!");
 82 |             console.log(dojo.toJson(error));     
 83 |           });
 84 |         }
 85 |         
 86 |         function initMap(layers){
 87 |           //add a scalebar
 88 |           var scalebar = new esri.dijit.Scalebar({
 89 |             map:map,
 90 |             scalebarUnit: "english"
 91 |           });
 92 | 
 93 |           //add a legend
 94 |           var legendDijit = new esri.dijit.Legend({
 95 |             map:map,
 96 |             layerInfos: layers
 97 |           },"mapLegend");
 98 | 
 99 |           legendDijit.startup();
100 |         }
101 |       }
102 |     );
103 |   </script>
104 |   </head>
105 |   <body>
106 |      <div class="row">
107 |       <div id="leftPanel" class="col-xs-3">
108 |         <h2 id="mapTitle"></h2><small id="mapSubTitle"></small>
109 |         <hr>
110 |         <div id="mapLegend"></div>
111 |       </div>
112 |       <div id="rightPanel" class="col-xs-9">
113 |          <div id="mapDiv"></div>
114 |       </div>
115 |     </div>
116 | 
117 |     <!-- <div class="panel">
118 |       <div id="title" class="titlearea"><span id="subtitle" class="title-message">World Traffic</span></div>
119 |         <controls>
120 |           <div class="buttons">
121 |             <input id="webmapInput" rows="3" 
122 |               placeholder="327687e9b2664d65aa7a7f5c85398cff"
123 |               value="327687e9b2664d65aa7a7f5c85398cff">          
124 |             </input>
125 |             <button id="btnWebmap" class="btn btn-primary">Add</button>
126 |             <button id="btnClear" class="btn">Reset</button>
127 |           </div>
128 |         </controls>
129 |         <div id="infoPanel" class="info-panel">
130 |           <div id="mapTitle" lass="map-title"></div>
131 |           <div id="mapSubTitle" class="map-subtitle"></div>
132 |           <div id="mapLegend"></div>
133 |         </div>
134 |     </div> -->
135 |     <!-- <div id="mapDiv"></div> -->
136 |     <!-- <div id="progress" class="progress hidden"></div> -->
137 |   </body>
138 | </html>


--------------------------------------------------------------------------------
/html/geocoding/geosearch.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5 |   <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
  6 |   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  7 |   <title>Find Places</title>
  8 |   <link rel="shortcut icon" href="//esri.github.io/quickstart-map-js/images/favicon.ico">
  9 |   <!-- ArcGIS API for JavaScript CSS-->
 10 |   <link rel="stylesheet" href="//js.arcgis.com/3.10/js/esri/css/esri.css">
 11 |   <!-- Web Framework CSS - Bootstrap (getbootstrap.com) and Bootstrap-map-js (github.com/esri/bootstrap-map-js) -->
 12 |   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
 13 |   <link rel="stylesheet" href="//esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
 14 |   <style>
 15 |     html, body, #mapDiv {
 16 |       height: 100%;
 17 |       width: 100%;
 18 |     }
 19 |   </style>
 20 |   
 21 |   <!-- ArcGIS API for JavaScript library references -->
 22 |   <script src="//js.arcgis.com/3.10compact"></script>
 23 |   <script>
 24 |     require(["esri/map", 
 25 |       "esri/tasks/locator", 
 26 |       "esri/InfoTemplate", 
 27 |       "esri/graphic", 
 28 |       "esri/symbols/PictureMarkerSymbol",
 29 |       "esri/geometry/Multipoint",
 30 |       "dojo/keys",
 31 |       "dojo/on", 
 32 |       "dojo/dom", 
 33 |       "dojo/domReady!"], 
 34 |       function(Map, Geocoder, InfoTemplate, Graphic, PictureMarkerSymbol, Multipoint, keys, on, dom) {  
 35 |         "use strict"      
 36 | 
 37 |         // Create map
 38 |         var map = new Map("mapDiv", {
 39 |           basemap: "streets",
 40 |           center: [-122.69, 45.52], //long, lat
 41 |           zoom: 13
 42 |         });
 43 | 
 44 |         // Set popup
 45 |         var popup = map.infoWindow;
 46 |         // popup.anchor = "top";
 47 |         popup.highlight = false;
 48 |         popup.titleInBody = false;
 49 |         popup.domNode.className += " light";
 50 | 
 51 | 
 52 |         // Get symbol
 53 |         var symbol = new createPictureSymbol("//esri.github.io/quickstart-map-js/images/blue-pin.png", 0, 12, 13, 24);
 54 | 
 55 |         // Create geoservice
 56 |         var geocodeService = new Geocoder("//geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer");
 57 |         
 58 |         // Wire events
 59 |         on(map, "load", function() {
 60 |           on(geocodeService, "address-to-locations-complete", geocodeResults);
 61 |           on(geocodeService, "error", geocodeError);
 62 |           on(dom.byId("btnSearch"),"click", geoSearch);
 63 |           on(dom.byId("btnClear"),"click", clearFindGraphics);
 64 |           on(dom.byId("inputSearch"), "keydown", function(event) {
 65 |             if (event.keyCode == keys.ENTER) {
 66 |               geoSearch();
 67 |             }
 68 |           });
 69 |         });
 70 | 
 71 |         // Geocode against the user input
 72 |         function geoSearch() {
 73 |           var searchString = dom.byId('inputSearch').value;
 74 |           var boundingBox;
 75 |           if (dom.byId('useMapExtent').checked)
 76 |             boundingBox = map.extent;
 77 |           // Set geocode options
 78 |           var options = {
 79 |             address:{"SingleLine": searchString},
 80 |             outFields:["Place_addr", "PlaceName"],  // Coming soon: Place_addr will contain full address for POI locations!
 81 |             searchExtent: boundingBox,
 82 |             location: map.extent.getCenter(),
 83 |             distance: 1
 84 |           }
 85 |           // Execute geosearch
 86 |           geocodeService.addressToLocations(options);
 87 |         }
 88 |         
 89 |         // Geocode results
 90 |         function geocodeResults(places) {
 91 |           if (places.addresses.length > 0) {
 92 |             clearFindGraphics();
 93 |             // Objects for the graphic
 94 |             var place, attributes, infoTemplate, pt, graphic, placeName = "";
 95 |             // Create and add graphics with pop-ups
 96 |             for (var i = 0; i < places.addresses.length; i++) {
 97 |               place = places.addresses[i];
 98 |               pt = place.location;
 99 |               placeName = place.attributes.Place_addr ? "${address}<br/>" : '';
100 |               attributes = { name:place.attributes.PlaceName, address:place.attributes.Place_addr, score:place.score, lat:pt.y.toFixed(5), lon:pt.x.toFixed(5) };   
101 |               infoTemplate = new InfoTemplate("${name}", placeName+"Lat/Lon: ${lat},${lon}<br/>Score: ${score}"+"<br/><a href='#' onclick='window.zoomToPlace(" + pt.x + "," + pt.y + ")'>Zoom</a>");
102 |               graphic = new Graphic(pt,symbol,attributes,infoTemplate);
103 |               map.graphics.add(graphic);  
104 |             }
105 |             zoomToPlaces(places.addresses);
106 |           } else {
107 |             alert("Sorry, address or place not found.");
108 |           }
109 |         }
110 |       
111 |         function geocodeError(errorInfo) {
112 |           alert("Sorry, place or address not found!");
113 |         }
114 | 
115 |         window.zoomToPlace = function zoomToPlace(lon,lat) {
116 |           var level = map.getLevel();
117 |           level = level < 14 ? 14 : level + 1;
118 |           map.centerAndZoom([lon,lat],level);
119 |         }
120 | 
121 |         function zoomToPlaces(places) {
122 |           var multiPoint = new Multipoint();
123 |           for (var i = 0; i < places.length; i++) {
124 |               multiPoint.addPoint(places[i].location);
125 |           }
126 |           map.setExtent(multiPoint.getExtent().expand(1.5));
127 |         }
128 | 
129 |         function clearFindGraphics() {
130 |           map.infoWindow.hide();
131 |           map.graphics.clear();
132 |         }
133 | 
134 |         function createPictureSymbol(url, xOffset, yOffset, xWidth, yHeight) {
135 |           return new PictureMarkerSymbol(
136 |           {
137 |             "angle": 0,
138 |             "xoffset": xOffset, "yoffset": yOffset, "type": "esriPMS",
139 |             "url": url,  
140 |             "contentType": "image/png",
141 |             "width":xWidth, "height": yHeight
142 |           });
143 |         }
144 |       }
145 |     );
146 |   </script>
147 | </head>
148 | <body>
149 |   <div class="panel panel-primary panel-fixed">
150 |     <div class="panel-heading">
151 |       <h3 class="panel-title">Find Places</h3>
152 |     </div>
153 |     <div class="panel-body">
154 |       <div class="form-group">
155 |         <input type="text" class="form-control" id="inputSearch" value="Coffee Shop" placeholder="Coffee Shop">
156 |       </div>
157 |       <div class="form-inline">
158 |         <div class="checkbox">
159 |           <label>
160 |             <input id="useMapExtent" type="checkbox" checked/> Search map only
161 |           </label>
162 |         </div>        
163 |         <button class="btn btn-success" id="btnSearch">Go</button>
164 |         <button id="btnClear" class="btn btn-default">Clear</button>   
165 |       </div>
166 |     </div>
167 |   </div>
168 |   <div id="mapDiv"></div>  
169 | </body>
170 | </html>
171 | 


--------------------------------------------------------------------------------
/html/geocoding/geosearch_category.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5 |   <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
  6 |   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  7 |   <title>Find Places (by Category)</title>
  8 |   <link rel="shortcut icon" href="//esri.github.io/quickstart-map-js/images/favicon.ico">
  9 |   <!-- ArcGIS API for JavaScript CSS-->
 10 |   <link rel="stylesheet" href="//js.arcgis.com/3.10/js/esri/css/esri.css">
 11 |   <!-- Web Framework CSS - Bootstrap (getbootstrap.com) and Bootstrap-map-js (github.com/esri/bootstrap-map-js) -->
 12 |   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
 13 |   <link rel="stylesheet" href="//esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
 14 |   <style>
 15 |     html, body, #mapDiv {
 16 |       height: 100%;
 17 |       width: 100%;
 18 |     }
 19 |   </style>
 20 |   
 21 |   <!-- ArcGIS API for JavaScript library references -->
 22 |   <script src="//js.arcgis.com/3.10compact"></script>
 23 |   <script>
 24 |     require(["esri/map",
 25 |       "esri/tasks/locator",
 26 |       "esri/request",
 27 |       "esri/InfoTemplate", 
 28 |       "esri/graphic", 
 29 |       "esri/symbols/PictureMarkerSymbol",
 30 |       "esri/geometry/Multipoint",
 31 |       "dojo/keys",
 32 |       "dojo/on", 
 33 |       "dojo/dom", 
 34 |       "dojo/domReady!"], 
 35 |       function(Map, Locator, esriRequest, InfoTemplate, Graphic, PictureMarkerSymbol, Multipoint, keys, on, dom) {  
 36 |         "use strict"      
 37 | 
 38 |         // Create map
 39 |         var map = new Map("mapDiv", {
 40 |           basemap: "national-geographic",
 41 |           center: [-117.16, 32.71], //long, lat
 42 |           zoom: 13
 43 |         });
 44 | 
 45 |         // Set popup
 46 |         var popup = map.infoWindow;
 47 |         // popup.anchor = "top";
 48 |         popup.highlight = false;
 49 |         popup.titleInBody = false;
 50 |         popup.domNode.className += " light";
 51 | 
 52 |         // Get symbol
 53 |         var symbol = new createPictureSymbol("//esri.github.io/quickstart-map-js/images/blue-pin.png", 0, 12, 13, 24);
 54 | 
 55 |         // Create geoservice
 56 |         var geocodeService = new Locator("//geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer");
 57 |         
 58 |         // Wire events
 59 |         on(map, "load", function() {
 60 |           on(geocodeService, "address-to-locations-complete", geocodeResults);
 61 |           on(geocodeService, "error", geocodeError);
 62 |           on(dom.byId("btnSearch"),"click", geoSearch);
 63 |           on(dom.byId("btnClear"),"click", clearFindGraphics);          
 64 |           on(dom.byId("cat"), "change", function(event) {
 65 |             geoSearch();
 66 |           });
 67 |         });
 68 | 
 69 |         // Geocode against the user input
 70 |         function geoSearch() {
 71 |           var boundingBox;
 72 |           if (dom.byId('useMapExtent').checked)
 73 |             boundingBox = map.extent;
 74 |           // Set geocode options
 75 |           var options = {
 76 |             /*you can combine multiple categories in a single search and even combine category searches and normal search strings:
 77 |           
 78 |             address:{
 79 |                 "SingleLine": "Pacific",
 80 |                 "category": "Aquarium, Tourist Attraction"
 81 |             },
 82 |           
 83 |             but for now lets just search on a single category
 84 | 
 85 |             https://developers.arcgis.com/javascript/jsapi/locator-amd.html#addresstolocations       
 86 |             */
 87 |             address:{
 88 |               "category": dom.byId("cat").value
 89 |             },
 90 |             outFields:["Place_addr", "PlaceName"],  
 91 |             searchExtent: boundingBox,
 92 |             location: map.extent.getCenter(),
 93 |             distance: 1
 94 |           }
 95 |           // Execute geosearch
 96 |           geocodeService.addressToLocations(options);
 97 |         }
 98 |         
 99 |         // Geocode results
100 |         function geocodeResults(places) {
101 |           if (places.addresses.length > 0) {
102 |             clearFindGraphics();
103 |             // Objects for the graphic
104 |             var place, attributes, infoTemplate, pt, graphic, placeName = "";
105 |             // Create and add graphics with pop-ups
106 |             for (var i = 0; i < places.addresses.length; i++) {
107 |               place = places.addresses[i];
108 |               pt = place.location;
109 |               placeName = place.attributes.Place_addr ? "${address}<br/>" : '';
110 |               attributes = { name:place.attributes.PlaceName, address:place.attributes.Place_addr, score:place.score, lat:pt.y.toFixed(5), lon:pt.x.toFixed(5) };   
111 |               infoTemplate = new InfoTemplate("${name}", placeName+"Lat/Lon: ${lat},${lon}<br/>Score: ${score}"+"<br/><a href='#' onclick='window.zoomToPlace(" + pt.x + "," + pt.y + ")'>Zoom</a>");
112 |               graphic = new Graphic(pt,symbol,attributes,infoTemplate);
113 |               map.graphics.add(graphic);  
114 |             }
115 |             zoomToPlaces(places.addresses);
116 |           } else {
117 |             alert("Sorry, address or place not found.");
118 |           }
119 |         }
120 |       
121 |         function geocodeError(errorInfo) {
122 |           alert("Sorry, place or address not found!");
123 |         }
124 | 
125 |         window.zoomToPlace = function zoomToPlace(lon,lat) {
126 |           var level = map.getLevel();
127 |           level = level < 14 ? 14 : level + 1;
128 |           map.centerAndZoom([lon,lat],level);
129 |         }
130 | 
131 |         function zoomToPlaces(places) {
132 |           var multiPoint = new Multipoint();
133 |           for (var i = 0; i < places.length; i++) {
134 |               multiPoint.addPoint(places[i].location);
135 |           }
136 |           map.setExtent(multiPoint.getExtent().expand(1.5));
137 |         }
138 | 
139 |         function clearFindGraphics() {
140 |           map.infoWindow.hide();
141 |           map.graphics.clear();
142 |         }
143 | 
144 |         function createPictureSymbol(url, xOffset, yOffset, xWidth, yHeight) {
145 |           return new PictureMarkerSymbol(
146 |           {
147 |             "angle": 0,
148 |             "xoffset": xOffset, "yoffset": yOffset, "type": "esriPMS",
149 |             "url": url,  
150 |             "contentType": "image/png",
151 |             "width":xWidth, "height": yHeight
152 |           });
153 |         }
154 |       }
155 |     );
156 |   </script>
157 | </head>
158 | <body>
159 |   <div class="panel panel-primary panel-fixed">
160 |     <div class="panel-heading">
161 |       <h3 class="panel-title">Find Places by Category</h3>
162 |     </div>
163 |     <div class="panel-body">
164 |       <div class="form-group">
165 |         <select class="form-control" id="cat">
166 |           <option value="ATM">ATM</option>
167 |           <option value="Museum">Museum</option>
168 |           <option value="Convention Center">Convention Center</option>
169 |           <option value="Sushi">Sushi</option>
170 |           <option value="Tourist Attraction">Tourist Attraction</option>
171 |           <option value="Brewpub">Brewpub</option>
172 |           <option value="Breakfast">Breakfast</option>
173 |           <option value="Pizza">Pizza</option>
174 |           <option value="Vegetarian Food">Vegetarian Food</option>
175 |         </select>
176 |       </div>
177 |       <div class="form-inline">
178 |         <div class="checkbox">
179 |           <label>
180 |             <input id="useMapExtent" type="checkbox" checked/> Search map only
181 |           </label>
182 |         </div>        
183 |         <button class="btn btn-success" id="btnSearch">Go</button>
184 |         <button id="btnClear" class="btn btn-default">Clear</button>
185 |         <br><br>More information on categories<br> can be found <a href="https://developers.arcgis.com/rest/geocode/api-reference/geocoding-category-filtering.htm" target="_blank">here</a>
186 |       </div>
187 |     </div>
188 |   </div>
189 |   <div id="mapDiv"></div>  
190 | </body>
191 | </html>
192 | 


--------------------------------------------------------------------------------
/html/geocoding/geosearch_widget.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5 |   <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
  6 |   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  7 |   <title>Find Places Widget</title>
  8 |   <link rel="shortcut icon" href="//esri.github.io/quickstart-map-js/images/favicon.ico">
  9 |   <!-- ArcGIS API for JavaScript CSS-->
 10 |   <link rel="stylesheet" href="//js.arcgis.com/3.10/js/esri/css/esri.css">
 11 |   <!-- Web Framework CSS - Bootstrap (getbootstrap.com) and Bootstrap-map-js (github.com/esri/bootstrap-map-js) -->
 12 |   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
 13 |   <link rel="stylesheet" href="//esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
 14 |   <style>
 15 |     html, body, #mapDiv {
 16 |       height: 100%;
 17 |       width: 100%;
 18 |     }
 19 |   </style>
 20 |   
 21 |   <!-- ArcGIS API for JavaScript library references -->
 22 |   <script src="//js.arcgis.com/3.10compact"></script>
 23 |   <script>
 24 |     require(["esri/map", 
 25 |       "esri/dijit/Geocoder", 
 26 |       "esri/InfoTemplate", 
 27 |       "esri/graphic", 
 28 |       "esri/symbols/PictureMarkerSymbol",
 29 |       "esri/geometry/Multipoint", 
 30 |       "dojo/dom", 
 31 |       "dojo/on", 
 32 |       "dojo/domReady!"], 
 33 |       function(Map, Geocoder, InfoTemplate, Graphic, PictureMarkerSymbol, Multipoint, dom, on) {             
 34 |         "use strict"
 35 |         
 36 |         // Create map
 37 |         var map = new Map("mapDiv", {
 38 |           basemap: "streets",
 39 |           center: [-122.69, 45.52], //long, lat
 40 |           zoom: 13
 41 |         });
 42 | 
 43 |         // Set popup
 44 |         var popup = map.infoWindow;
 45 |         popup.highlight = false;
 46 |         popup.titleInBody = false;
 47 |         popup.domNode.className += " light";
 48 | 
 49 |         // Get symbol
 50 |         var symbol = new createPictureSymbol("//esri.github.io/quickstart-map-js/images/blue-pin.png", 0, 12, 13, 24);
 51 | 
 52 |         // Create widget
 53 |         var geocoder = new Geocoder({
 54 |           value: "Coffee Shop",
 55 |           autoNavigate: false,
 56 |           maxLocations: 25,
 57 |           autoComplete: true,
 58 |           arcgisGeocoder: {
 59 |             outFields: "Place_addr, PlaceName, Score"
 60 |           },
 61 |           map: map
 62 |         },"search");        
 63 |         geocoder.startup();
 64 | 
 65 |         // Wire events
 66 |         on(map, "load", function() {
 67 |           geocoder.on("select", geocodeSelect);
 68 |           geocoder.on("findResults", geocodeResults);
 69 |           geocoder.on("clear", clearFindGraphics);
 70 |           // Wire UI events
 71 |           on(dom.byId("btnSearch"),"click", geosearch);
 72 |           on(dom.byId("btnClear"),"click", clearFindGraphics);
 73 |         });
 74 |          
 75 |         function geosearch() {
 76 |           var def = geocoder.find();
 77 |           def.then(function(res){
 78 |            geocodeResults(res);
 79 |           });
 80 |         }
 81 |         
 82 |         function geocodeResults(places) {
 83 |           // Translate features to places...
 84 |           places = places.results;
 85 |           if (places.length > 0) {
 86 |             clearFindGraphics();
 87 |             // Create and add graphics with pop-ups
 88 |             for (var i = 0; i < places.length; i++) {
 89 |               addPlaceGraphic(places[i], symbol);
 90 |             }
 91 |             // Zoom to results
 92 |             zoomToPlaces(places);
 93 |           } else {
 94 |             alert("Sorry, address or place not found.");
 95 |           }
 96 |         }
 97 | 
 98 |         function geocodeSelect(item) {
 99 |           // Create and add a selected graphic with pop-up
100 |           var g = (item.graphic ? item.graphic : item.result.feature);
101 |           g.setSymbol(symbol);
102 |           //clearFindGraphics();
103 |           addPlaceGraphic(item.result,g.symbol);
104 |         }
105 | 
106 |         function addPlaceGraphic(item,symbol)  {
107 |           var attributes, infoTemplate, pt, graphic, placeName;
108 |           pt = item.feature.geometry;
109 |           // Graphic components
110 |           placeName = item.feature.attributes.Place_addr ? "${address}<br/>" : '';
111 |           attributes = {name:item.feature.attributes.PlaceName, address:item.feature.attributes.Place_addr, score:item.feature.attributes.Score, lat:pt.getLatitude().toFixed(5), lon:pt.getLongitude().toFixed(5) };   
112 |           infoTemplate = new InfoTemplate("${name}", placeName+"Lat/Lon: ${lat},${lon}<br/>Score: ${score}"+"<br/><a href='#' onclick='window.zoomToPlace(" + pt.getLongitude() + "," + pt.getLatitude() + ")'>Zoom</a>");
113 |           graphic = new Graphic(pt,symbol,attributes,infoTemplate);
114 |           // Add to map
115 |           map.graphics.add(graphic);  
116 |         }
117 | 
118 |         window.zoomToPlace = function zoomToPlace(x,y) {
119 |           var level = map.getLevel();
120 |           level = level < 14 ? 14 : level + 1;
121 |           map.centerAndZoom([x,y],level);
122 |         }
123 |                   
124 |         function zoomToPlaces(places) {
125 |           var multiPoint = new Multipoint(map.spatialReference);
126 |           for (var i = 0; i < places.length; i++) {
127 |             //multiPoint.addPoint(places[i].location);
128 |             multiPoint.addPoint(places[i].feature.geometry);
129 |           }
130 |           map.setExtent(multiPoint.getExtent().expand(2.0));
131 |         }
132 | 
133 |         function clearFindGraphics() {
134 |           map.infoWindow.hide();
135 |           map.graphics.clear();
136 |         }
137 | 
138 |         function createPictureSymbol(url, xOffset, yOffset, xWidth, yHeight) {
139 |           return new PictureMarkerSymbol(
140 |           {
141 |             "angle": 0,
142 |             "xoffset": xOffset, "yoffset": yOffset, "type": "esriPMS",
143 |             "url": url,  
144 |             "contentType": "image/png",
145 |             "width":xWidth, "height": yHeight
146 |           });
147 |         }
148 |     });    
149 |   </script>
150 | </head>
151 | <body>
152 |   <div class="panel panel-primary panel-fixed">
153 |     <div class="panel-heading">
154 |       <h3 class="panel-title">Find Places Widget</h3>
155 |     </div>
156 |     <div class="panel-body">
157 |       <div class="form-group">
158 |         <div id="search"></div>
159 |       </div>
160 |       <div class="form-inline">
161 |         <div class="checkbox">
162 |           <label><input id="useMapExtent" type="checkbox" checked/> Search map only</label>
163 |         </div>
164 |         <button id="btnSearch" class="btn btn-success">Go</button>
165 |         <button id="btnClear" class="btn btn-default">Clear</button>   
166 |       </div>
167 |     </div>
168 |   </div>
169 |   <div id="mapDiv"></div>  
170 | </body>
171 | </html>
172 | 


--------------------------------------------------------------------------------
/html/geocoding/reversegeocode.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5 |   <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" >
  6 |   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  7 |   <title>Find Address</title>
  8 |   <link rel="shortcut icon" href="//esri.github.io/quickstart-map-js/images/favicon.ico">
  9 |   <!-- ArcGIS API for JavaScript CSS-->
 10 |   <link rel="stylesheet" href="//js.arcgis.com/3.10/js/esri/css/esri.css">
 11 |   <!-- Web Framework CSS - Bootstrap (getbootstrap.com) and Bootstrap-map-js (github.com/esri/bootstrap-map-js) -->
 12 |   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
 13 |   <link rel="stylesheet" href="//esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
 14 |   <style>
 15 |     html, body, #mapDiv {
 16 |       height: 100%;
 17 |       width: 100%;
 18 |     }
 19 |   </style>
 20 |   
 21 |   <!-- ArcGIS API for JavaScript library references -->
 22 |   <script src="//js.arcgis.com/3.10compact"></script>
 23 |   <script>
 24 |     require(["esri/map", 
 25 |       "esri/tasks/locator", 
 26 |       "esri/InfoTemplate", 
 27 |       "esri/graphic", 
 28 |       "esri/symbols/PictureMarkerSymbol",
 29 |       "esri/geometry/Multipoint", 
 30 |       "dojo/on", 
 31 |       "dojo/dom", 
 32 |       "dojo/domReady!"], 
 33 |       function(Map, Geocoder, InfoTemplate, Graphic, PictureMarkerSymbol, Multipoint, on, dom) {  
 34 |         "use strict"             
 35 | 
 36 |         // Create map
 37 |         var map = new Map("mapDiv", {
 38 |           basemap: "streets",
 39 |           center: [-79.40, 43.65],
 40 |           zoom: 13,
 41 |         });
 42 | 
 43 |         // Set popup
 44 |         var popup = map.infoWindow;
 45 |         popup.highlight = false;
 46 |         popup.titleInBody = false;
 47 |         popup.domNode.style.marginTop = "-20px";
 48 |         popup.domNode.className += " light";
 49 |         
 50 | 
 51 |         // Get symbol
 52 |         var symbol = new createPictureSymbol("//esri.github.io/quickstart-map-js/images/blue-pin.png", 0, 12, 13, 24);
 53 | 
 54 |         // Wire events
 55 |         on(map, "click", onClickReverseGeocode);
 56 |         on(dom.byId("btnClear"),"click",clearFindGraphics);
 57 | 
 58 |         // Create geoservice
 59 |         var geocodeService = new Geocoder("http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer");
 60 |         on(geocodeService, "location-to-address-complete", reverseGeocodeResults); 
 61 |         on(geocodeService, "error", geocodeError);
 62 |         
 63 |         // Reverse geocode when user clicks on the map
 64 |         function onClickReverseGeocode(evt) {
 65 |           geocodeService.locationToAddress(evt.mapPoint, 100);
 66 |         }
 67 |         
 68 |         // Reverse geocode result
 69 |         function reverseGeocodeResults(place) {
 70 |           var place = place.address;
 71 |           if (place) {
 72 |             //clearFindGraphics();
 73 |             // Objects for the graphic
 74 |             var place,attributes,infoTemplate,pt,graphic;
 75 |             // Create and add graphics with pop-ups
 76 |             pt = place.location;
 77 |             place.address = standardizeAddress(place);
 78 |             attributes = { address:place.address, score:place.score, lat:pt.y.toFixed(5), lon:pt.x.toFixed(5) }; 
 79 |             infoTemplate = new InfoTemplate("Reverse Geocode","${address}<br/>Lat/Lon: ${lat},${lon}<br/>Score: ${score}"+"<br/><a href='#' onclick='window.zoomToPlace(" + pt.x + "," + pt.y + ")'>Zoom</a>");
 80 |             graphic = new Graphic(pt,symbol,attributes,infoTemplate);
 81 |             map.graphics.add(graphic);  
 82 |             // Show pop-up
 83 |             map.infoWindow.setTitle("Reverse Geocode");
 84 |             map.infoWindow.setContent(graphic.getContent());
 85 |             map.infoWindow.show(pt);
 86 |           } else {
 87 |             alert("Sorry, address or place not found.");
 88 |           }
 89 |         }
 90 |         
 91 |         function standardizeAddress(place) {
 92 |           var addressIn = place.address;
 93 |           
 94 |           var address = addressIn.Address;
 95 |           var city = addressIn.City;  // Admin1
 96 |           var state = addressIn.Region; //Admin2;
 97 |           //var country = addressIn.Admin3;
 98 |           var zip = addressIn.Postal;
 99 |           var country = addressIn.CountryCode;
100 | 
101 |           var str = "";
102 |           if (address)
103 |             str = address;
104 |           if (city)
105 |             str = str + (address ? ", " : "") + city;
106 |           if (state)
107 |             str = str + (city ? ", " : "") + state;
108 |           if (zip)
109 |             str = str + (state ? ", " : "") + zip;
110 |           if (country)
111 |             str = str + (zip ? ", " : "") + country;
112 | 
113 |           return str;
114 |         }
115 | 
116 |         function geocodeError(errorInfo) {
117 |           alert("Sorry, place or address not found!");
118 |         }
119 | 
120 |         window.zoomToPlace = function zoomToPlace(lon,lat) {
121 |           var level = map.getLevel();
122 |           level = level < 14 ? 14 : level + 1;
123 |           map.centerAndZoom([lon,lat],level);
124 |         }
125 | 
126 |         function clearFindGraphics() {
127 |           map.infoWindow.hide();
128 |           map.graphics.clear();
129 |         }
130 | 
131 |         function createPictureSymbol(url, xOffset, yOffset, xWidth, yHeight) {
132 |           return new PictureMarkerSymbol(
133 |           {
134 |             "angle": 0,
135 |             "xoffset": xOffset, "yoffset": yOffset, "type": "esriPMS",
136 |             "url": url,  
137 |             "contentType": "image/png",
138 |             "width":xWidth, "height": yHeight
139 |           });
140 |         }
141 |     });
142 |   </script>
143 | </head>
144 | <body>
145 |   <div class="panel panel-primary panel-fixed">
146 |     <div class="panel-heading">
147 |       <h3 class="panel-title">Find Address</h3>
148 |     </div>
149 |     <div class="panel-body">
150 |       <p>
151 |         Click on the map to geocode a location.
152 |       </p>
153 |         <button id="btnClear" class="btn btn-default">Clear</button>   
154 |     </div>
155 |   </div>
156 |   <div id="mapDiv"></div>  
157 | </body>
158 | </html>
159 | 


--------------------------------------------------------------------------------
/html/graphics/graphics_marker.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5 |   <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
  6 |   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  7 |   <title>Align Marker Symbol</title>
  8 |   <link rel="shortcut icon" href="//esri.github.io/quickstart-map-js/images/favicon.ico">
  9 |   <!-- ArcGIS API for JavaScript CSS-->
 10 |   <link rel="stylesheet" href="//js.arcgis.com/3.10/js/esri/css/esri.css">
 11 |   <!-- Web Framework - Bootstrap (getbootstrap.com) and Bootstrap-map-js (github.com/esri/bootstrap-map-js) -->
 12 |   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
 13 |   <link rel="stylesheet" href="//esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
 14 |   <style>
 15 |     html, body, #mapDiv {
 16 |       height: 100%;
 17 |       width: 100%;
 18 |     }
 19 |   </style>
 20 | 
 21 |   <!-- ArcGIS API for JavaScript library references -->
 22 |   <script src="//js.arcgis.com/3.10compact"></script>
 23 |   <script>
 24 |     var map;
 25 |     require(["esri/map", 
 26 |       "esri/dijit/Popup",
 27 |       "esri/tasks/locator", 
 28 |       "esri/InfoTemplate", 
 29 |       "esri/graphic", 
 30 |       "esri/geometry/Multipoint", 
 31 |       "esri/symbols/SimpleMarkerSymbol", 
 32 |       "esri/symbols/SimpleLineSymbol",
 33 |       "esri/symbols/PictureMarkerSymbol",
 34 |       "dojo/_base/Color",
 35 |       "dojo/query",
 36 |       "dojo/keys",
 37 |       "dojo/on", 
 38 |       "dojo/dom", 
 39 |       "dojo/domReady!"], 
 40 |       function(Map, Popup, Geocoder, InfoTemplate, Graphic, Multipoint, SimpleMarkerSymbol, SimpleLineSymbol, PictureMarkerSymbol, Color, query, keys, on, dom) {  
 41 |         "use strict"      
 42 | 
 43 |         // Create map
 44 |         map = new Map("mapDiv", {
 45 |           basemap: "gray",
 46 |           center: [-122.69, 45.52], //long, lat
 47 |           zoom: 3
 48 |         });
 49 | 
 50 |         var popup = map.infoWindow;
 51 |         popup.highlight = false;
 52 |         popup.titleInBody = false;
 53 |         popup.domNode.className += " light";
 54 | 
 55 |         var symMarker;
 56 | 
 57 |         var symSimple = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CROSS, 40,
 58 |                   new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
 59 |                       new Color([0, 0, 0]), 1));
 60 | 
 61 |         // Wire events
 62 |         map.on("click", addGraphics);
 63 |         map.on("load", function() {
 64 |           var evt = {};
 65 |           evt.mapPoint = map.extent.getCenter();
 66 |           addGraphics(evt);
 67 |         });
 68 |         on(dom.byId("applyImage"), "click", addGraphics);
 69 | 
 70 |         query("input[type='text']").on("keydown", function(evt) {
 71 |           if (evt.keyCode == keys.ENTER){
 72 |             var evt = {};
 73 |             evt.mapPoint = map.graphics.graphics[0].geometry;
 74 |             addGraphics(evt);
 75 |           }
 76 |         });
 77 | 
 78 |         function addGraphics(evt) {
 79 | 
 80 |           // Get a point to place the marker
 81 |           var pt = evt.mapPoint;
 82 |           if (!pt) {
 83 |             pt = map.graphics.graphics[0].geometry;
 84 |           }
 85 | 
 86 |           // Clear graphics
 87 |           map.graphics.clear();
 88 | 
 89 |           // Create marker (picture) symbol
 90 |           symMarker = createPictureSymbol(dom.byId("pinUrl").value, 
 91 |             dom.byId("symXOffset").value, 
 92 |             dom.byId("symYOffset").value, 
 93 |             dom.byId("symWidth").value, 
 94 |             dom.byId("symHeight").value);
 95 |           var infoTemplate = new InfoTemplate("Symbol",pt.x + " " + pt.y);
 96 |           var pictureGraphic = new Graphic(pt, symMarker, null, infoTemplate);
 97 |           map.graphics.add(pictureGraphic);
 98 | 
 99 |           // Setup popup
100 |           setPopup(map, "top", dom.byId("popXoffset").value, dom.byId("popYoffset").value);
101 | 
102 |           if (map.infoWindow.isShowing) {
103 |             map.infoWindow.show(pt);
104 |           }
105 | 
106 |           var graphic = new Graphic(pt, symSimple);
107 |           map.graphics.add(graphic);
108 |         }
109 |         
110 |         function createPictureSymbol(url, xOffset, yOffset, xWidth, yHeight) {
111 |           return new PictureMarkerSymbol(
112 |           {
113 |             "angle": 0,
114 |             "xoffset": xOffset, "yoffset": yOffset, "type": "esriPMS",
115 |             "url": url,  
116 |             "contentType": "image/png",
117 |             "width":xWidth, "height": yHeight
118 |           });
119 |         }
120 | 
121 |         function setPopup(map,anchorPos,xOffset,yOffset) {
122 |           var popup  = map.infoWindow;
123 |           popup.highlight = false;
124 |           popup.set("anchor", anchorPos);
125 |           popup.domNode.style.marginLeft = xOffset+"px";
126 |           popup.domNode.style.marginTop = yOffset+"px";
127 |         }
128 |     });
129 |   </script>
130 | </head>
131 | <body>
132 |   <div class="panel panel-primary panel-fixed">
133 |     <div class="panel-heading">
134 |       <h3 class="panel-title">Align Marker and Popup</h3>
135 |     </div>
136 |     <div class="panel-body">
137 |       <div class="form-horizontal">
138 |         <div class="form-group">
139 |           <label class="col-xs-3 control-label">PopupX</label>
140 |           <div class="col-xs-3">
141 |             <input type="text" class="form-control" id="popXoffset" placeholder="0" value="0">
142 |           </div>
143 |           <label class="col-xs-3 control-label">PopupY</label>
144 |           <div class="col-xs-3">
145 |             <input type="text" class="form-control" id="popYoffset" placeholder="-35" value="-35">
146 |           </div>
147 |         </div>
148 |         <div class="form-group">
149 |           <label class="col-xs-3 control-label">OffsetX</label>
150 |           <div class="col-xs-3">
151 |             <input type="text" class="form-control" id="symXOffset" placeholder="0" value="0">
152 |           </div>
153 |           <label class="col-xs-3 control-label">OffsetY</label>
154 |           <div class="col-xs-3">
155 |             <input type="text" class="form-control" id="symYOffset" placeholder="18" value="18">
156 |           </div>
157 |         </div>
158 |         <div class="form-group">
159 |           <label class="col-xs-3 control-label">Width</label>
160 |           <div class="col-xs-3">
161 |             <input type="text" class="form-control" id="symWidth" placeholder="18" value="18">
162 |           </div>
163 |           <label class="col-xs-3 control-label">Height</label>
164 |           <div class="col-xs-3">
165 |             <input type="text" class="form-control" id="symHeight" placeholder="36" value="36">
166 |           </div>
167 |         </div>
168 |         <div class="form-group">
169 |           <label class="col-xs-3 control-label">Image URL</label>
170 |           <div class="col-xs-9">
171 |             <textarea type="text" rows="2" class="form-control" id="pinUrl" placeholder="http://esri.github.io/quickstart-map-js/images/blue-pin.png">http://esri.github.io/quickstart-map-js/images/blue-pin.png</textarea>
172 |           </div>
173 |         </div>
174 |         <div class="form-group">
175 |           <div class="col-sm-offset-3 col-sm-9">
176 |             <button id="applyImage" class="btn btn-success pull-left">Apply</button>
177 |           </div>
178 |         </div>
179 |       </div>
180 |     </div>
181 |   </div>
182 |   <div id="mapDiv"></div>  
183 | </body>
184 | </html>
185 | 


--------------------------------------------------------------------------------
/html/graphics/graphics_toolbar.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5 |   <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
  6 |   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  7 |   <title>Graphics Toolbar</title> 
  8 |   <link rel="shortcut icon" href="//esri.github.io/quickstart-map-js/images/favicon.ico">
  9 |   <!-- ArcGIS API for JavaScript CSS-->
 10 |   <link rel="stylesheet" href="//js.arcgis.com/3.10/js/esri/css/esri.css">
 11 |   <!-- Web Framework - Bootstrap (getbootstrap.com) and Bootstrap-map-js (github.com/esri/bootstrap-map-js) -->
 12 |   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
 13 |   <link rel="stylesheet" href="//esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
 14 |   <style>
 15 |     html, body, #mapDiv {
 16 |       height: 100%;
 17 |       width: 100%;
 18 |     }
 19 |   </style>
 20 | 
 21 |   <!-- ArcGIS API for JavaScript library references -->
 22 |   <script src="//js.arcgis.com/3.10compact"></script>
 23 |   <script>
 24 |     require(["esri/map", 
 25 |       "esri/toolbars/draw", 
 26 |       "esri/symbols/SimpleMarkerSymbol", 
 27 |       "esri/symbols/SimpleLineSymbol", 
 28 |       "esri/symbols/CartographicLineSymbol", 
 29 |       "esri/graphic", 
 30 |       "dojo/_base/Color", 
 31 |       "dojo/query",
 32 |       "dojo/on",
 33 |       "dojo/dom", 
 34 |       "dojo/domReady!"], 
 35 |       function(Map, Draw, SimpleMarkerSymbol, SimpleLineSymbol, CartographicLineSymbol, Graphic, color, query, on, dom) {
 36 |         "use strict"
 37 | 
 38 |         var tb; 
 39 |         
 40 |         // Create map
 41 |         var map = new Map("mapDiv", {
 42 |           basemap: "streets",
 43 |           center: [-122.31, 47.67],
 44 |           zoom: 8
 45 |         });
 46 | 
 47 |         var popup = map.infoWindow;
 48 |         popup.highlight = false;
 49 |         popup.titleInBody = false;
 50 |         popup.domNode.className += " light";
 51 | 
 52 |         // Wire events
 53 |         on(map, "load", initToolbar);
 54 |         // Wire UI events
 55 |         on(dom.byId("addPoint"),"click", setActiveTool);
 56 |         on(dom.byId("addLine"),"click", setActiveTool);
 57 |         on(dom.byId("addPolygon"),"click", setActiveTool);
 58 |         on(dom.byId("clear"),"click", setActiveTool);
 59 |         
 60 |         // Load the drawing toolbar widget
 61 |         function initToolbar() {
 62 |           tb = new Draw(map);
 63 |           // Do something after graphics are sketched on the map 
 64 |           tb.on("draw-end", addGraphic);
 65 |           // Override the default marker symbol
 66 |           tb.markerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 7, 
 67 |             new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new color([255,0,0]), 1), 
 68 |             new color([255,0,0,1]));
 69 |         }
 70 | 
 71 |         // Set the active draw tool and lock the map
 72 |         function setActiveTool(e) {
 73 |           var esriToolType = e.currentTarget.id;
 74 |           switch (esriToolType) {
 75 |             case "addPoint":
 76 |               esriToolType = Draw.POINT;
 77 |               setMessage("Click the map to add a point");
 78 |               break;
 79 |             case "addLine":
 80 |               esriToolType = Draw.POLYLINE;
 81 |               setMessage("Click the map. Double-click to finish line.");
 82 |               break;
 83 |             case "addPolygon":
 84 |               esriToolType = Draw.POLYGON;
 85 |               setMessage("Click the map. Double-click to finish polygon.");
 86 |               break;
 87 |             default:
 88 |               setMessage("Click a button to start");
 89 |               esriToolType = null;
 90 |           }
 91 | 
 92 |           if (esriToolType) {
 93 |             tb.activate(esriToolType);  // Example type - Draw.POINT
 94 |             map.disablePan();
 95 |             map.disableDoubleClickZoom();
 96 |           } else {
 97 |             tb.deactivate();  
 98 |             map.enablePan();
 99 |             map.enableDoubleClickZoom();
100 |             map.graphics.clear(); 
101 |           }
102 |           setSelected(e.currentTarget);
103 |         }
104 | 
105 |         // Add the graphic with symbol
106 |         function addGraphic(evt) {
107 |           var geometry = evt.geometry;
108 |           var symbol = dom.byId("symbol").value;
109 |           if (symbol) {
110 |             symbol = eval(symbol);
111 |           } else {
112 |             switch (geometry.type) {
113 |               case 'point':
114 |                 symbol = tb.markerSymbol;
115 |                 break;
116 |               case 'polyline':
117 |                 symbol = tb.lineSymbol;
118 |                 break;
119 |               case 'polygon':
120 |                 symbol = tb.fillSymbol;
121 |                 break;
122 |               default:
123 |             }
124 |           }
125 |           map.graphics.add(new Graphic(geometry, symbol));
126 |         }
127 | 
128 |         function setSelected(button) {
129 |           query(".btn-group > .btn").removeClass("active");
130 |           query(button).addClass("active");
131 |         }
132 | 
133 |         function setMessage(msg) {
134 |           var element = document.getElementById("userMessage");
135 |           element.innerHTML = msg;
136 |         }
137 | 
138 |     });
139 |   </script>
140 | </head>
141 | <body>
142 |   <div class="panel panel-primary panel-fixed">
143 |     <div class="panel-heading">
144 |       <h3 class="panel-title">Draw Graphics Widget</h3>
145 |     </div>
146 |     <div class="panel-body">
147 |       <div class="form-group">
148 |         <div class="btn-group">
149 |           <button class="btn btn-success" id="addPoint">Add Point</button>
150 |           <button class="btn btn-success" id="addLine">Add Line</button>
151 |           <button class="btn btn-success" id="addPolygon">Add Polygon</button>
152 |         </div>   
153 |       </div>
154 |       <div class="form-group">
155 |         <select class="form-control" id="symbol">
156 |           <option value="">--- Symbol Options ---</option>
157 |           <option value="">--- Point ---</option>
158 |           <option value="new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 7, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new color([255,0,0]), 1), new color([255,0,0,1]))">Default</option>
159 |           <option value="new SimpleMarkerSymbol().setColor(new color([0, 0, 255]))">Circle</option>
160 |           <option value="new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_DIAMOND, 20, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new color([0,0,0]), 1), new color([255,255,0,0.5]))">Diamond</option>
161 |           <option value="">--- Simple Line ---</option>
162 |           <option value="new SimpleLineSymbol()">Default</option>
163 |           <option value="new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new color([255,0,0]), 3)">Dash</option>
164 |           <option value="new SimpleLineSymbol(SimpleLineSymbol.STYLE_DOT, new color([255,0,0]), 5)">Dot</option>
165 |           <option value="">--- Cartographic Line Symbols ---</option>
166 |           <option value="new CartographicLineSymbol()">Default</option>
167 |           <option value="new CartographicLineSymbol(CartographicLineSymbol.STYLE_SOLID, new color([255,0,0]), 10, CartographicLineSymbol.CAP_ROUND, CartographicLineSymbol.JOIN_ROUND)">Solid, round cap, round join</option>
168 |           <option value="new CartographicLineSymbol(CartographicLineSymbol.STYLE_SOLID, new color([255,0,0]), 10, CartographicLineSymbol.CAP_SQUARE, CartographicLineSymbol.JOIN_BEVEL)">Solid, square cap, bevel join</option>
169 |         </select>    
170 |       </div>
171 |       <p><button class="btn btn-default" id="clear">Clear</button></p>
172 |       <div id="userMessage">Click a button to start.</div>
173 |     </div>
174 |   </div>
175 |   <div id="mapDiv"></div>
176 | </div>        
177 | </body>
178 | </html>
179 | 


--------------------------------------------------------------------------------
/html/maps/basemap_watercolor.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
 6 |   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
 7 |   <title>Watercolor Basemap</title>
 8 |   <link rel="shortcut icon" href="//esri.github.io/quickstart-map-js/images/favicon.ico">
 9 |   <!-- ArcGIS API for JavaScript CSS-->
10 |   <link rel="stylesheet" href="//js.arcgis.com/3.10/js/esri/css/esri.css">
11 |   <!-- Web Framework CSS - Bootstrap (getbootstrap.com) and Bootstrap-map-js (github.com/esri/bootstrap-map-js) -->
12 |   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
13 |   <link rel="stylesheet" href="//esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
14 |   <style>
15 |     html, body, #mapDiv {
16 |       height: 100%;
17 |       width: 100%;
18 |     }
19 |   </style>
20 | 
21 |   <!-- ArcGIS API for JavaScript library references -->
22 |   <script src="//js.arcgis.com/3.10compact"></script>
23 |   <script>
24 |     require(["esri/map",
25 |       "esri/layers/WebTiledLayer",
26 |       "dojo/domReady!"],
27 |       function(Map, WebTiledLayer) {
28 |         // Create map
29 |         var map = new Map("mapDiv",{
30 |           //basemap: "gray",  // Do not specify default basemap
31 |           center: [-122.69, 45.52],
32 |           zoom: 3
33 |         });
34 | 
35 |         // Setup references for tile layer
36 |         var url = "http://{subDomain}.tile.stamen.com/watercolor/{level}/{col}/{row}.jpg";
37 |         var wtl = WebTiledLayer;
38 |         var lyr = new wtl(url, {
39 |           "copyright": "Stamen Designs",
40 |           "id": "Stamen Water Colors",
41 |           "subDomains": ["a", "b", "c","d"]
42 |         });
43 |         map.addLayer(lyr);
44 |       }
45 |     );
46 |   </script>
47 | </head>
48 |   <body>
49 |     <div class="panel panel-primary panel-fixed">
50 |       <div class="panel-heading">
51 |         <h3 class="panel-title">Watercolor Basemap</h3>
52 |       </div>
53 |       <div class="panel-body">
54 |         <p>Stamen Watercolor tile set as a custom basemap.</p>
55 |       </div>
56 |     </div>
57 |     <div id="mapDiv"></div>
58 |   </body>
59 | </html>
60 | 


--------------------------------------------------------------------------------
/html/maps/basemaps.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">   
 6 |   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
 7 |   <title>Basemaps</title>
 8 |   <link rel="shortcut icon" href="//esri.github.io/quickstart-map-js/images/favicon.ico">
 9 |   <!-- ArcGIS API for JavaScript CSS-->
10 |   <link rel="stylesheet" href="//js.arcgis.com/3.10/js/esri/css/esri.css">
11 |   <!-- Web Framework CSS - Bootstrap (getbootstrap.com) and Bootstrap-map-js (github.com/esri/bootstrap-map-js) -->
12 |   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
13 |   <link rel="stylesheet" href="//esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
14 |   <style>
15 |     html, body, #mapDiv {
16 |       height: 100%;
17 |       width: 100%;
18 |     }
19 |   </style>
20 | 
21 |   <!-- ArcGIS API for JavaScript library references -->
22 |   <script src="//js.arcgis.com/3.10compact"></script>
23 |   <script>
24 |     require(["esri/map", 
25 |       "dojo/on", 
26 |       "dojo/dom", 
27 |       "dojo/domReady!"], 
28 |       function(Map, on, dom) {
29 |         // Create map
30 |         var map = new Map("mapDiv",{ 
31 |           basemap: "gray",
32 |           center: [-122.69, 45.52],
33 |           zoom: 3
34 |         });
35 | 
36 |         // Wire UI Events
37 |         on(dom.byId("btnStreets"),"click", function() { 
38 |           map.setBasemap("streets");
39 |         });
40 |         on(dom.byId("btnSatellite"),"click", function() { 
41 |           map.setBasemap("satellite");
42 |         });
43 |         on(dom.byId("btnHybrid"),"click", function() { 
44 |           map.setBasemap("hybrid");
45 |         });
46 |         on(dom.byId("btnTopo"),"click", function() { 
47 |           map.setBasemap("topo");
48 |         });
49 |         on(dom.byId("btnGray"),"click", function() { 
50 |           map.setBasemap("gray");
51 |         });
52 |         on(dom.byId("btnNatGeo"),"click", function() { 
53 |           map.setBasemap("national-geographic");
54 |         });
55 |     });
56 |   </script>   
57 | </head>
58 |   <body>
59 |     <div class="panel panel-primary panel-fixed">
60 |       <div class="panel-heading">
61 |         <h3 class="panel-title">Basemaps</h3>
62 |       </div>
63 |       <div class="panel-body">
64 |         <div class="btn-toolbar">
65 |           <div class="btn-group">
66 |             <button id="btnStreets" class="btn btn-default">Streets</button>
67 |             <button id="btnSatellite" class="btn btn-default">Satellite</button>
68 |             <button id="btnHybrid" class="btn btn-default">Hybrid</button>
69 |             <button id="btnTopo" class="btn btn-default">Topo</button>
70 |           </div>  
71 |         </div>
72 |         <div class="btn-toolbar">
73 |           <div class="btn-group">
74 |             <button id="btnGray" class="btn btn-default">Gray</button>
75 |             <button id="btnNatGeo" class="btn btn-default">National Geographic</button>
76 |           </div>  
77 |         </div>
78 |       </div>
79 |     </div>
80 |     <div id="mapDiv"></div>
81 |   </body>
82 | </html>
83 | 


--------------------------------------------------------------------------------
/html/maps/basemaps_widget.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html> 
 2 | <html>  
 3 | <head> 
 4 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
 6 |   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
 7 |   <title>Basemaps Widget</title> 
 8 |   <link rel="shortcut icon" href="//esri.github.io/quickstart-map-js/images/favicon.ico"> 
 9 |   <!-- ArcGIS API for JavaScript CSS-->
10 |   <link rel="stylesheet" href="//js.arcgis.com/3.10/js/esri/css/esri.css">
11 |   <!-- Web Framework CSS - Bootstrap (getbootstrap.com) and Bootstrap-map-js (github.com/esri/bootstrap-map-js) -->
12 |   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
13 |   <link rel="stylesheet" href="//esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
14 |   <style>
15 |     html, body, #mapDiv {
16 |       height: 100%;
17 |       width: 100%;
18 |     }
19 |   </style>
20 | 
21 |   <!-- ArcGIS API for JavaScript library references -->
22 |   <script src="//js.arcgis.com/3.10compact"></script>
23 |   <script> 
24 |     require(["esri/map", 
25 |       "esri/dijit/BasemapGallery",
26 |       "dojo/on", 
27 |       "dojo/dom", 
28 |       "dojo/domReady!"], 
29 |       function(Map, BasemapGallery, on, dom) {
30 |         // Create map
31 |         var map = new Map("mapDiv",{ 
32 |           basemap: "gray",
33 |           center: [-122.69, 45.52],
34 |           zoom: 3
35 |         });
36 | 
37 |         // Create and add the maps from ArcGIS.com 
38 |         var basemapGallery = new BasemapGallery({
39 |           showArcGISBasemaps: true,
40 |           map: map
41 |         }, "basemapGallery");
42 |         basemapGallery.startup();
43 | 
44 |         // Listen to the basemap selection and set the title
45 |         on(basemapGallery, "onSelectionChange", function() {
46 |           dom.byId("userMessage").innerHTML = basemapGallery.getSelected().title;
47 |         });
48 |     });
49 |   </script> 
50 | </head> 
51 | <body>
52 |   <div class="panel panel-primary panel-fixed">
53 |     <div class="panel-heading">
54 |       <h3 class="panel-title">Basemaps</h3>
55 |     </div>
56 |     <div class="panel-body">
57 |       <div id="basemapGallery"></div>
58 |     </div>
59 |   </div>
60 |   <div id="mapDiv"></div>
61 | </body> 
62 | </html>
63 | 


--------------------------------------------------------------------------------
/html/maps/basemaptour.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5 |   <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">   
  6 |   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  7 |   <title>Basemap Tour</title>
  8 |   <link rel="shortcut icon" href="//esri.github.io/quickstart-map-js/images/favicon.ico">
  9 |   <!-- ArcGIS API for JavaScript CSS-->
 10 |   <link rel="stylesheet" href="//js.arcgis.com/3.10/js/esri/css/esri.css">
 11 |   <!-- Web Framework CSS - Bootstrap (getbootstrap.com) and Bootstrap-map-js (github.com/esri/bootstrap-map-js) -->
 12 |   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
 13 |   <link rel="stylesheet" href="//esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
 14 |   <style>
 15 |     html, body, #mapDiv {
 16 |       height: 100%;
 17 |       width: 100%;
 18 |     }
 19 |   </style>
 20 | 
 21 |   <!-- ArcGIS API for JavaScript library references -->
 22 |   <script src="//js.arcgis.com/3.10compact"></script>
 23 |   <script>
 24 |     define("model",[],function () {
 25 |       var mapLocations = init();
 26 |       function init() {
 27 |         // Setup map locations
 28 |         var basemaps = [
 29 |           ["gray",[-100,45],3], // World
 30 |           ["streets",[-0.13,51.50],11], // London
 31 |           ["hybrid",[151.21,-33.87],14], // Sydney
 32 |           ["topo",[-77.017,38.943],17], // D.C.
 33 |           ["national-geographic",[-84.0,10],9], // Costa Rica        
 34 |           ["oceans",[-40,30],4], // Atlantic   
 35 |           ["gray",[135,-25],4], // Australia
 36 |           ["streets",[-117.20,32.73],13], // San Diego
 37 |           ["hybrid",[-77.65,24.20],9], // Bahamas
 38 |           ["topo",[139.75,35.69],17], // Tokyo
 39 |           ["national-geographic",[-74,40.74],12], // New York
 40 |           ["oceans",[-160,30],3] // Pacific
 41 |         ];    
 42 |         return basemaps; 
 43 |       }
 44 |       return { 
 45 |         mapLocations: mapLocations
 46 |       }
 47 |     });  
 48 |     
 49 |     define("app",["model", "dojo/dom", "dojo/on", "dojo/domReady!"], 
 50 |       function(model,dom,on) {
 51 |         "use strict"
 52 |         var m = {
 53 |           map: null,
 54 |           index: 0,
 55 |           mapLocations: null,
 56 |           timerHandle: 0,
 57 |           basemaps : [{btn: dom.byId("basemap0"),type:'gray'},
 58 |             {btn:dom.byId("basemap1"), type:'streets'},
 59 |             {btn:dom.byId("basemap2"), type:'hybrid'},
 60 |             {btn:dom.byId("basemap3"), type:'topo'},
 61 |             {btn:dom.byId("basemap4"), type:'national-geographic'},
 62 |             {btn:dom.byId("basemap5"), type:'oceans'}
 63 |             ],
 64 | 
 65 |           init: function(mapRef) {
 66 |             this.map = mapRef;
 67 |             this.mapLocations = model.mapLocations;
 68 | 
 69 |             function findBasemapType(btn) {
 70 |               var length = m.basemaps.length;
 71 |               for (var i=0; i < length; i++) {
 72 |                 if (btn.id == m.basemaps[i].btn.id) {
 73 |                     return m.basemaps[i].type;
 74 |                 }
 75 |               }
 76 |             }
 77 | 
 78 |             // setup handlers
 79 |             for (var i=0; i< this.basemaps.length; i++) {
 80 |               var basemapType = this.basemaps[i].type;
 81 |               on(this.basemaps[i].btn, "click", function () {
 82 |                   m.setBasemap(findBasemapType(this));  // check!
 83 |                   //setButtonColors(this);
 84 |                   m.setSelected(this);
 85 |               });       
 86 |             }
 87 |             on(dom.byId("back"), "click", function() {
 88 |               m.move(false);
 89 |             });
 90 |             on(dom.byId("forward"), "click", function() {
 91 |               m.move(true);
 92 |             });
 93 |             on(dom.byId("tour"), "click", function() {
 94 |               m.playTour();
 95 |             });
 96 |           },
 97 | 
 98 |           setSelected:function(button) {
 99 |             var elements = document.getElementsByClassName('btn btn-default');
100 |             for (var i = 0; i < elements.length; i++) {
101 |                 elements[i].className = "btn btn-default";
102 |             }
103 |             var element = document.getElementsByClassName('btn btn-default active');
104 |             if (element)
105 |               element.className = "btn btn-default";
106 |             if (button)
107 |               button.className = "btn btn-default active";
108 |           },
109 | 
110 |           setButtonColorsByType:function(type) {
111 |               var length = this.basemaps.length;
112 |               for (var i=0; i < length; i++) {
113 |                   if (type === this.basemaps[i].type) {
114 |                       m.setSelected(this.basemaps[i].btn);
115 |                   }
116 |               }
117 |           },
118 | 
119 |           setBasemap:function(type) {
120 |             // Disable playmode
121 |             dom.byId("tour").checked = false;
122 |             clearInterval(this.timerHandle);
123 |             this.map.setBasemap(type);
124 |           },
125 |         
126 |           showBasemap:function (index,moveLocation) {
127 |             // set map and location
128 |             var mapType = this.mapLocations[this.index][0];
129 |             this.map.setBasemap(mapType);
130 |             this.setButtonColorsByType(mapType);
131 |             if (moveLocation)
132 |               this.map.centerAndZoom(this.mapLocations[this.index][1],this.mapLocations[this.index][2]);
133 |           },
134 | 
135 |           move:function (forward) {
136 |             var i = this.index;
137 |             if (forward)
138 |               this.index = this.index < (this.mapLocations.length - 1) ? (this.index + 1) : 0;
139 |             else
140 |               this.index = this.index > 0 ? (this.index - 1) : 0;
141 |             if (i != this.index)
142 |               this.showBasemap(this.index,true);
143 |           },
144 |           playTour:function () {
145 |             if (dom.byId("tour").checked) {
146 |               // Start immediately
147 |               setTimeout(function() {
148 |                 m.index = (m.index < (m.mapLocations.length - 1) ? (m.index + 1) : 0);
149 |                 m.showBasemap(this.index,true);
150 |                 },100);
151 |               // Start timer
152 |               m.timerHandle = setInterval ( function () { 
153 |                 if (m.map.loaded) {
154 |                   m.index = (m.index < (m.mapLocations.length - 1) ? (m.index + 1) : 0);
155 |                   m.showBasemap(this.index, true);
156 |                 }
157 |               }, 5000 );
158 |             } else {
159 |               clearInterval(m.timerHandle);
160 |             }
161 |           }
162 |         }
163 |         return m;
164 |       }
165 |     );
166 | 
167 |     // Load map and app
168 |     require(["esri/map", "app", "dojo/domReady!"], 
169 |       function(Map, app, utils) {  
170 |         "use-strict"
171 |         var map = new Map("mapDiv",{ 
172 |           basemap: "gray",
173 |           center: [-100, 50],
174 |           zoom: 3
175 |         });
176 |         app.init(map);
177 |     }); 
178 |   </script>
179 | </head>
180 |   <body>
181 |     <div class="panel panel-primary panel-fixed">
182 |       <div class="panel-heading">
183 |         <h3 class="panel-title">Basemaps World Tour</h3>
184 |       </div>
185 |       <div class="panel-body">
186 |         <div class="btn-toolbar">
187 |           <div class="btn-group">
188 |             <button id="basemap0" class="btn btn-default">Gray</button>
189 |             <button id="basemap1" class="btn btn-default">Streets</button>
190 |             <button id="basemap2" class="btn btn-default">Satellite</button>
191 |           </div>
192 |         </div>
193 |         <div class="form-group btn-toolbar">
194 |           <div class="btn-group">
195 |             <button id="basemap3" class="btn btn-default">Topo</button>
196 |             <button id="basemap4" class="btn btn-default">Nat Geo</button>
197 |             <button id="basemap5" class="btn btn-default">Oceans</button>
198 |           </div>
199 |         </div>
200 |         <div class="form-inline form-group">
201 |          <button id="back" class="btn btn-sm"><span class="glyphicon glyphicon-chevron-left"></span></button>
202 |           <div class="checkbox">
203 |             <label><input type="checkbox" id="tour"> Start Tour</label>
204 |           </div>  
205 |          <button id="forward" class="btn btn-sm"><span class="glyphicon glyphicon-chevron-right"></span></button>  
206 |         </div>
207 |       </div>
208 |     </div>
209 |     <div id="mapDiv"></div>
210 |   </body>
211 | </html>
212 | 


--------------------------------------------------------------------------------
/html/misc/autocenter.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5 |   <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
  6 |   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  7 |   <title>Auto Center</title>
  8 |   <link rel="shortcut icon" href="//esri.github.io/quickstart-map-js/images/favicon.ico">
  9 |   <!-- ArcGIS API for JavaScript CSS-->
 10 |   <link rel="stylesheet" href="//js.arcgis.com/3.10/js/esri/css/esri.css">
 11 |   <!-- Web Framework CSS - Bootstrap (getbootstrap.com) and Bootstrap-map-js (github.com/esri/bootstrap-map-js) -->
 12 |   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
 13 |   <link rel="stylesheet" href="//esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
 14 |   <style>
 15 |     html, body, #mapDiv {
 16 |       height: 100%;
 17 |       width: 100%;
 18 |     }
 19 |   </style>
 20 |   
 21 |   <!-- ArcGIS API for JavaScript library references -->
 22 |   <script src="//js.arcgis.com/3.10compact"></script>
 23 |   <script>
 24 |     require(["esri/map",
 25 |       "esri/InfoTemplate", 
 26 |       "esri/geometry/Point", 
 27 |       "esri/graphic", 
 28 |       "esri/symbols/PictureMarkerSymbol",
 29 |       "dojo/on", 
 30 |       "dojo/dom", 
 31 |       "dojo/domReady!"], 
 32 |       function(Map, InfoTemplate, Point, Graphic, PictureMarkerSymbol, on, dom) {
 33 |         "use strict"
 34 | 
 35 |         // Create map
 36 |         var map = new Map("mapDiv",{ 
 37 |             basemap: "streets",
 38 |             center: [-100, 53],
 39 |             zoom: 3
 40 |         });
 41 | 
 42 |         // Set popup
 43 |         var popup = map.infoWindow;
 44 |         popup.highlight = false;
 45 |         popup.titleInBody = false;
 46 |         
 47 |         
 48 |         // Wire events
 49 |         on(map, 'load', showGeolocation);
 50 | 
 51 |         // Auto-recenter map when screen changes size
 52 |         autoRecenter(map);
 53 | 
 54 |         function showGeolocation() {
 55 |           if (navigator.geolocation){
 56 |             navigator.geolocation.getCurrentPosition(showLocation, errorHandler);
 57 |           } else {
 58 |             alert("Sorry, your browser doesn't support geolocation.");      
 59 |           }
 60 |         }
 61 | 
 62 |         function showLocation(position) {
 63 |           clearGeolocationGraphics();
 64 |           // Create a point
 65 |           var pt = new Point(position.coords.longitude,position.coords.latitude);
 66 |           // Create a symbol and pop-up template and add the graphic to the map
 67 |           var symbol = new createPictureSymbol("//esri.github.io/quickstart-map-js/images/blue-pin.png", 0, 12, 13, 24);
 68 |           var attributes = {"lat":pt.y.toFixed(2),"lon":pt.x.toFixed(2)};
 69 |           var infoTemplate = new InfoTemplate("My Geolocation","Latitude: ${lat} <br/>Longitude: ${lon}");
 70 |           var graphic = new Graphic(pt,symbol,attributes,infoTemplate);
 71 |           map.graphics.add(graphic);
 72 |           // Show pop-up
 73 |           map.infoWindow.setTitle("My Geolocation");
 74 |           map.infoWindow.setContent(graphic.getContent());
 75 |           map.infoWindow.show(pt);
 76 |           // Position the map
 77 |           map.centerAndZoom(pt,13);
 78 |         }
 79 | 
 80 |         function errorHandler(err) {
 81 |           if(err.code == 1) {
 82 |             alert("Error: Access is denied!");
 83 |           } else if ( err.code == 2) {
 84 |             alert("Error: Position is unavailable!");
 85 |           } else 
 86 |             alert("Error: " + err);
 87 |         }
 88 |       
 89 |         function clearGeolocationGraphics() {
 90 |           map.infoWindow.hide();
 91 |           map.graphics.clear();       
 92 |         }
 93 | 
 94 |         // Recenter the map when the window changes size
 95 |         function autoRecenter(map) {
 96 |           var resizeDelay = 100;
 97 |           on(map, 'load', function (map) {
 98 |             on(window, 'resize', map, map.resize);
 99 |           });
100 |           on(map, 'resize',  function(extent, width, height) { 
101 |             map.__resizeCenter = map.extent.getCenter();
102 |             setTimeout(function() {
103 |               if (document.getElementById("useAutoCenter").checked) {
104 |                 map.centerAt(map.__resizeCenter);                
105 |               }
106 |             }, resizeDelay);
107 |           });
108 |         }
109 | 
110 |         function createPictureSymbol(url, xOffset, yOffset, xWidth, yHeight) {
111 |           return new PictureMarkerSymbol(
112 |           {
113 |             "angle": 0,
114 |             "xoffset": xOffset, "yoffset": yOffset, "type": "esriPMS",
115 |             "url": url,  
116 |             "contentType": "image/png",
117 |             "width":xWidth, "height": yHeight
118 |           });
119 |         }
120 |     });
121 |   </script>
122 | </head>
123 | <body>
124 |   <div class="panel panel-primary panel-fixed">
125 |     <div class="panel-heading">
126 |       <h3 class="panel-title">Auto-recenter Map</h3>
127 |     </div>
128 |     <div class="panel-body">
129 |       <p>Resize the browser or screen.</p>
130 |       <div class="checkbox"> 
131 |         <label><input id="useAutoCenter" type="checkbox" checked/> Use Auto Center</label> 
132 |       </div>
133 |     </div>
134 |   </div>
135 |   <div id="mapDiv"></div>
136 | </body>
137 | </html>


--------------------------------------------------------------------------------
/html/misc/geolocation.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5 |   <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
  6 |   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  7 |   <title>Geolocation</title>
  8 |   <link rel="shortcut icon" href="//esri.github.io/quickstart-map-js/images/favicon.ico">
  9 |   <!-- ArcGIS API for JavaScript CSS-->
 10 |   <link rel="stylesheet" href="//js.arcgis.com/3.10/js/esri/css/esri.css">
 11 |   <!-- Web Framework CSS - Bootstrap (getbootstrap.com) and Bootstrap-map-js (github.com/esri/bootstrap-map-js) -->
 12 |   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
 13 |   <link rel="stylesheet" href="//esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
 14 |   <style>
 15 |     html, body, #mapDiv {
 16 |       height: 100%;
 17 |       width: 100%;
 18 |     }
 19 |   </style>
 20 |   
 21 |   <!-- ArcGIS API for JavaScript library references -->
 22 |   <script src="//js.arcgis.com/3.10compact"></script>
 23 |   <script>
 24 |     require(["esri/map", 
 25 |       "esri/InfoTemplate", 
 26 |       "esri/geometry/Point", 
 27 |       "esri/graphic", 
 28 |       "esri/symbols/PictureMarkerSymbol", 
 29 |       "dojo/on", 
 30 |       "dojo/dom", 
 31 |       "dojo/domReady!"], 
 32 |       function(Map, InfoTemplate, Point, Graphic, PictureMarkerSymbol, on, dom) {
 33 |         "use strict"
 34 | 
 35 |         // Create map
 36 |         var map = new Map("mapDiv",{ 
 37 |           basemap: "satellite",
 38 |           center: [-100, 53],
 39 |           zoom: 3
 40 |         });
 41 | 
 42 |         // Set popup
 43 |         var popup = map.infoWindow;
 44 |         popup.highlight = false;
 45 |         popup.titleInBody = false;
 46 |         
 47 |         
 48 |         // Get symbol
 49 |         var symbol = new createPictureSymbol("//esri.github.io/quickstart-map-js/images/blue-pin.png", 0, 12, 13, 24);
 50 |         
 51 |         // Wire events
 52 |         on(dom.byId("btnGeolocation"),"click",showGeolocation);
 53 |         on(dom.byId("btnClear"), "click", clearGeolocationGraphics);
 54 |         
 55 |         function showGeolocation() {
 56 |           if (navigator.geolocation){
 57 |             navigator.geolocation.getCurrentPosition(showLocation, errorHandler);
 58 |             utils.setStyle("progress", "progress");
 59 |           } else {
 60 |             alert("Sorry, your browser doesn't support geolocation.");      
 61 |           }
 62 |         }
 63 | 
 64 |         function showLocation(position) {
 65 |           // Create a point
 66 |           var pt = new Point(position.coords.longitude,position.coords.latitude);
 67 |           // Create a symbol and pop-up template and add the graphic to the map
 68 |           var attributes = {"lat":pt.y.toFixed(2),"lon":pt.x.toFixed(2)};
 69 |           var infoTemplate = new InfoTemplate("Your Location","Latitude: ${lat} <br/>Longitude: ${lon}");
 70 |           var graphic = new Graphic(pt,symbol,attributes,infoTemplate);
 71 |           map.graphics.add(graphic);
 72 |           // Position the map
 73 |           map.centerAndZoom(pt,13);
 74 |           utils.setStyle("progress", "progress hidden");
 75 |         }
 76 | 
 77 |         function errorHandler(err) {
 78 |           utils.setStyle("progress", "progress hidden");
 79 |           if(err.code == 1) {
 80 |             alert("Error: Access is denied!");
 81 |           } else if ( err.code == 2) {
 82 |             alert("Error: Position is unavailable!");
 83 |           } else 
 84 |             alert("Error: " + err);
 85 |         }
 86 |  
 87 |         function clearGeolocationGraphics() {
 88 |           map.infoWindow.hide();
 89 |           map.graphics.clear();       
 90 |         }
 91 | 
 92 |         function createPictureSymbol(url, xOffset, yOffset, xWidth, yHeight) {
 93 |           return new PictureMarkerSymbol(
 94 |           {
 95 |             "angle": 0,
 96 |             "xoffset": xOffset, "yoffset": yOffset, "type": "esriPMS",
 97 |             "url": url,  
 98 |             "contentType": "image/png",
 99 |             "width":xWidth, "height": yHeight
100 |           });
101 |         }
102 |     });
103 |   </script>
104 | </head>
105 | <body>
106 |   <div class="panel panel-primary panel-fixed">
107 |     <div class="panel-heading">
108 |       <h3 class="panel-title">HTML5 Geolocation</h3>
109 |     </div>
110 |     <div class="panel-body">
111 |       <button id="btnGeolocation" class="btn btn-success">Go</button>
112 |       <button id="btnClear" class="btn btn-default">Clear</button>
113 |     </div>
114 |   </div>
115 |   <div id="mapDiv"></div>
116 | </body>
117 | </html>


--------------------------------------------------------------------------------
/html/misc/show_panel.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">   
 6 |   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
 7 |   <title>Basemaps - Show Panel</title>
 8 |   <link rel="shortcut icon" href="//esri.github.io/quickstart-map-js/images/favicon.ico">
 9 |   <!-- ArcGIS API for JavaScript CSS-->
10 |   <link rel="stylesheet" href="//js.arcgis.com/3.10/js/esri/css/esri.css">
11 |   <!-- Web Framework CSS - Bootstrap (getbootstrap.com) and Bootstrap-map-js (github.com/esri/bootstrap-map-js) -->
12 |   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
13 |   <link rel="stylesheet" href="//esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
14 |   <style>
15 |     html, body, #mapDiv {
16 |       height: 100%;
17 |       width: 100%;
18 |     }
19 |   </style>
20 |   
21 |   <!-- ArcGIS API for JavaScript library references -->
22 |   <script src="//js.arcgis.com/3.10compact"></script>
23 |   <script>
24 |     require(["esri/map", 
25 |       "dojo/query",
26 |       "dojo/on", 
27 |       "dojo/dom", 
28 |       "dojo/domReady!"], 
29 |       function(Map, query, on, dom) {
30 |         // Create map
31 |         var map = new Map("mapDiv",{ 
32 |           basemap: "gray",
33 |           center: [-122.69, 45.52],
34 |           zoom: 3
35 |         });
36 | 
37 |         // Wire UI Events
38 |         on(dom.byId("btnStreets"),"click", function() { 
39 |           map.setBasemap("streets");
40 |         });
41 |         on(dom.byId("btnSatellite"),"click", function() { 
42 |           map.setBasemap("satellite");
43 |         });
44 |         on(dom.byId("btnHybrid"),"click", function() { 
45 |           map.setBasemap("hybrid");
46 |         });
47 |         on(dom.byId("btnTopo"),"click", function() { 
48 |           map.setBasemap("topo");
49 |         });
50 |         on(dom.byId("btnGray"),"click", function() { 
51 |           map.setBasemap("gray");
52 |         });
53 |         on(dom.byId("btnNatGeo"),"click", function() { 
54 |           map.setBasemap("national-geographic");
55 |         });
56 | 
57 |         // Toggle panel
58 |         on(dom.byId("chevron"), "click", function(e){
59 |           if (query(".glyphicon.glyphicon-chevron-up")[0]) {
60 |             query(".glyphicon").replaceClass("glyphicon-chevron-down","glyphicon-chevron-up");
61 |             query(".panel-body.collapse").removeClass("in");
62 |           } else {
63 |             query(".glyphicon").replaceClass("glyphicon-chevron-up","glyphicon-chevron-down");
64 |             query(".panel-body.collapse").addClass("in");
65 |           }
66 |         });
67 |     });
68 |   </script>   
69 | </head>
70 |   <body>
71 |     <div class="panel panel-primary panel-fixed">
72 |       <div class="panel-heading">
73 |         <h3 class="panel-title">Show - Hide Panel</h3>
74 |         <button id="chevron" class="btn btn-primary btn-xs btn-absolute">          
75 |           <span class="glyphicon glyphicon-chevron-up"></span>
76 |         </button>
77 |       </div>
78 |       <div class="panel-body collapse in">
79 |         <div class="btn-toolbar">
80 |           <div class="btn-group">
81 |             <button id="btnStreets" class="btn btn-default">Streets</button>
82 |             <button id="btnSatellite" class="btn btn-default">Satellite</button>
83 |             <button id="btnHybrid" class="btn btn-default">Hybrid</button>
84 |             <button id="btnTopo" class="btn btn-default">Topo</button>
85 |           </div>  
86 |         </div>
87 |         <div class="btn-toolbar">
88 |           <div class="btn-group">
89 |             <button id="btnGray" class="btn btn-default">Gray</button>
90 |             <button id="btnNatGeo" class="btn btn-default">National Geographic</button>
91 |           </div>  
92 |         </div>
93 |       </div>
94 |     </div>
95 |     <div id="mapDiv"></div>
96 |   </body>
97 | </html>
98 | 


--------------------------------------------------------------------------------
/html/symbols/symbols_lines.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5 |   <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
  6 |   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  7 |   <title>Line Symbols</title>
  8 |   <link rel="shortcut icon" href="//esri.github.io/quickstart-map-js/images/favicon.ico">
  9 |   <!-- ArcGIS API for JavaScript CSS-->
 10 |   <link rel="stylesheet" href="//js.arcgis.com/3.10/js/esri/css/esri.css">
 11 |   <!-- Web Framework CSS - Bootstrap (getbootstrap.com) and Bootstrap-map-js (github.com/esri/bootstrap-map-js) -->
 12 |   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
 13 |   <link rel="stylesheet" href="//esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
 14 |   <style>
 15 |     html, body, #mapDiv {
 16 |       height: 100%;
 17 |       width: 100%;
 18 |     }
 19 |   </style>
 20 |   
 21 |   <!-- ArcGIS API for JavaScript library references -->
 22 |   <script src="//js.arcgis.com/3.10compact"></script>
 23 |   <script>
 24 |   /*
 25 |   */
 26 |     require(["esri/map",
 27 |       "esri/InfoTemplate",
 28 |       "esri/layers/FeatureLayer",
 29 |       "esri/Color",
 30 |       "esri/renderers/UniqueValueRenderer",
 31 |       "esri/symbols/SimpleLineSymbol",
 32 |       "dojo/on", 
 33 |       "dojo/dom", 
 34 |       "dojo/domReady!"], 
 35 |       function(Map, InfoTemplate, FeatureLayer, Color, UniqueValueRenderer, SimpleLineSymbol, on, dom) {  
 36 |         "use strict"
 37 | 
 38 |         var originalRenderer;
 39 | 
 40 |         // Create map
 41 |         var map = new Map("mapDiv", {
 42 |           basemap: "topo",
 43 |           center: [-122.6561, 45.5210], //long, lat
 44 |           zoom: 15
 45 |         });
 46 | 
 47 |         var bikeLanes = new FeatureLayer("http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/bike_rte/FeatureServer/0", {outFields: ["*"]});
 48 |         
 49 |         var defaultSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
 50 |           //color and width of outline
 51 |           new Color([0,255,0]), 4);
 52 | 
 53 |         var sharrowSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
 54 |           //color and width of outline
 55 |           new Color([0,0,255]), 4);
 56 | 
 57 |         var laneSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
 58 |           //color and width of outline
 59 |           new Color([255,255,0]), 4);
 60 | 
 61 |         var categoryRenderer = new UniqueValueRenderer(defaultSymbol, "BIKEMODE");
 62 | 
 63 |         categoryRenderer.addValue("High traffic through street" ,sharrowSymbol);
 64 |         categoryRenderer.addValue("Bike lane" ,laneSymbol);
 65 | 
 66 |         bikeLanes.setInfoTemplate(new InfoTemplate(" ", "Street: ${STREETNAME}<br>Type: ${BIKEMODE}"));
 67 |         map.addLayer(bikeLanes);
 68 |         
 69 |         bikeLanes.on("load", function(evt) {
 70 |           originalRenderer = evt.layer.renderer;
 71 |           evt.layer.setRenderer(categoryRenderer);
 72 |           evt.layer.refresh();
 73 |         });
 74 | 
 75 |         // Set popup
 76 |         var popup = map.infoWindow;
 77 |         popup.highlight = true;
 78 |         popup.titleInBody = false;
 79 |         popup.domNode.className += " light";
 80 | 
 81 |         //wire an event listener to detect when someone has selected a new dropdown value
 82 |         on(dom.byId("symbol"), "change", changeSymbol);
 83 | 
 84 |         function changeSymbol() {
 85 |           map.infoWindow.hide();
 86 |           var e = dom.byId("symbol");
 87 |           var sym = e.options[e.selectedIndex].value;
 88 | 
 89 |           switch (sym) {            
 90 |             case "cat":              
 91 |               //substitute a unique value renderer to draw the graphics
 92 |               bikeLanes.setRenderer(categoryRenderer);
 93 |               break
 94 |             case "default":
 95 |               map.infoWindow.hide();
 96 |               //replace the clientside renderer with what was originally defined for the service
 97 |               bikeLanes.setRenderer(originalRenderer);              
 98 |               break      
 99 |           }
100 |           bikeLanes.refresh();
101 |         }
102 |       }
103 |     );
104 |   </script>
105 | </head>
106 | <body>
107 |   <div class="panel panel-primary panel-fixed">
108 |     <div class="panel-heading">
109 |       <h3 class="panel-title">Lines</h3>
110 |     </div>
111 |     <div class="panel-body">      
112 |       <div class="form-inline">
113 |         <div>
114 |         Apply different symbols based on feature attributes<br><br>
115 |         </div>
116 |         <div class="form-group">
117 |         <select class="form-control" id="symbol">
118 |           <option value="cat" selected="selected">bike lanes (by type)</option>
119 |           <option value="default" >default (defined in service)</option>
120 |         </select>    
121 |       </div>
122 |       </div>
123 |     </div>
124 |   </div>
125 |   <div id="mapDiv"></div>  
126 | </body>
127 | </html>
128 | 


--------------------------------------------------------------------------------
/html/symbols/symbols_polygons.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5 |   <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
  6 |   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  7 |   <title>Polygon Symbols</title>
  8 |   <link rel="shortcut icon" href="//esri.github.io/quickstart-map-js/images/favicon.ico">
  9 |   <!-- ArcGIS API for JavaScript CSS-->
 10 |   <link rel="stylesheet" href="//js.arcgis.com/3.10/js/esri/css/esri.css">
 11 |   <!-- Web Framework CSS - Bootstrap (getbootstrap.com) and Bootstrap-map-js (github.com/esri/bootstrap-map-js) -->
 12 |   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
 13 |   <link rel="stylesheet" href="//esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
 14 |   <style>
 15 |     html, body, #mapDiv {
 16 |       height: 100%;
 17 |       width: 100%;
 18 |     }
 19 |   </style>
 20 |   
 21 |   <!-- ArcGIS API for JavaScript library references -->
 22 |   <script src="//js.arcgis.com/3.10compact"></script>
 23 |   <script>
 24 |     require([
 25 |       "esri/map",
 26 |       "esri/layers/ArcGISTiledMapServiceLayer",
 27 |       "esri/layers/FeatureLayer",
 28 |       "esri/InfoTemplate",
 29 |       "esri/Color",
 30 |       "esri/symbols/SimpleLineSymbol",
 31 |       "esri/symbols/SimpleFillSymbol",      
 32 |       "esri/renderers/ClassBreaksRenderer",
 33 |       "dojo/on", 
 34 |       "dojo/dom", 
 35 |       "dojo/domReady!"], 
 36 |       function(Map, ArcGISTiledMapServiceLayer, FeatureLayer, InfoTemplate, Color, SimpleLineSymbol, SimpleFillSymbol, ClassBreaksRenderer, on, dom) {  
 37 |         "use strict"
 38 | 
 39 |         // Create map
 40 |         var map = new Map("mapDiv", {
 41 |           center: [-98.8, 39], //long, lat
 42 |           zoom: 3
 43 |         });
 44 | 
 45 |         var darkBasemap = new ArcGISTiledMapServiceLayer("//tiles1.arcgis.com/tiles/P3ePLMYs2RVChkJx/arcgis/rest/services/World_Dark_Gray_Base_Beta/MapServer");
 46 |         map.addLayer(darkBasemap);
 47 | 
 48 |         //the default symbology for this service draws each state identically.  in this app, we'd like to define different symbology for individual features based on the value stored in a particular attribute field
 49 |         var states = new FeatureLayer("//sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3", {
 50 |             outFields: [ "STATE_NAME", "MED_AGE" ]
 51 |           });
 52 |         
 53 |         //first we define a generic default symbol to use.
 54 |         var defaultSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
 55 |           new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
 56 |             new Color([60, 60, 60]), 1), new Color([0, 0, 0, 0.2])
 57 |         );
 58 | 
 59 |         //next we define two renderers and define the attribute column that will determine which symbol is used to draw an individual feature
 60 |         var redBreaksRenderer = new ClassBreaksRenderer(defaultSymbol, "MED_AGE");
 61 |         var greenBreaksRenderer = new ClassBreaksRenderer(defaultSymbol, "MED_AGE");
 62 | 
 63 |         var over35Symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
 64 |           new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
 65 |             new Color([60, 60, 60]), 1), new Color([255, 0, 0, 0.3])
 66 |         );
 67 | 
 68 |         var under35Symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
 69 |           new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
 70 |             new Color([60, 60, 60]), 1), new Color([0, 255, 0, 0.3])
 71 |         );
 72 | 
 73 |         //the renderer which is applied when the page loads differentiates states with a median age higher than 35 from the rest.  this renderer could support additional breaks if desired.
 74 |         redBreaksRenderer.addBreak({minValue:35, maxValue:100, symbol: over35Symbol});
 75 |         
 76 |         //our second renderer, which can be substituted via a toggle, alternatively differentiates states with a median age lower than 35 from the others
 77 |         greenBreaksRenderer.addBreak({minValue:0, maxValue:35, symbol: under35Symbol});
 78 | 
 79 |         states.setInfoTemplate(new InfoTemplate("Median Age 2000", "${STATE_NAME}<br>${MED_AGE}"));
 80 | 
 81 |         map.addLayer(states);
 82 |         
 83 |         states.on("load", function(evt) {
 84 |           //lets use our first clientside class breaks renderers to symbolize the data
 85 |           evt.layer.setRenderer(redBreaksRenderer);
 86 |           evt.layer.refresh();
 87 |         });
 88 | 
 89 |         // Set popup
 90 |         var popup = map.infoWindow;
 91 |         popup.highlight = true;
 92 |         popup.titleInBody = false;
 93 |         popup.domNode.className += " light";
 94 | 
 95 |         //wire an event listener to detect when someone has selected a new dropdown value
 96 |         on(dom.byId("symbol"), "change", changeSymbol);
 97 | 
 98 |         function changeSymbol() {
 99 |           map.infoWindow.hide();
100 |           var e = dom.byId("symbol");
101 |           var sym = e.options[e.selectedIndex].value;
102 | 
103 |           switch (sym) {            
104 |             case "red":              
105 |               states.setRenderer(redBreaksRenderer);
106 |               break
107 |             case "green":
108 |               map.infoWindow.hide();
109 |               //replace the clientside renderer
110 |               states.setRenderer(greenBreaksRenderer);              
111 |               break      
112 |           }
113 |           states.refresh();
114 |         }
115 |       }
116 |     );
117 |   </script>
118 | </head>
119 | <body>
120 |   <div class="panel panel-primary panel-fixed">
121 |     <div class="panel-heading">
122 |       <h3 class="panel-title">Polygons</h3>
123 |     </div>
124 |     <div class="panel-body">      
125 |       <div class="form-inline">
126 |         <div>
127 |           Apply symbols to features based on an attribute threshold.
128 |           <br><br>
129 |           Here we use the median age from the 2000 Census.
130 |           <br>
131 |           <br>
132 |         </div>
133 |         <div class="form-group">
134 |         <select class="form-control" id="symbol">
135 |           <option value="red" selected="selected">over 35 years old</option>
136 |           <option value="green" >under 35</option>
137 |         </select>    
138 |       </div>
139 |       </div>
140 |     </div>
141 |   </div>
142 |   <div id="mapDiv"></div>  
143 | </body>
144 | </html>
145 | 


--------------------------------------------------------------------------------
/html/symbols/symbols_pts.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5 |   <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
  6 |   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  7 |   <title>Point Symbols</title>
  8 |   <link rel="shortcut icon" href="//esri.github.io/quickstart-map-js/images/favicon.ico">
  9 |   <!-- ArcGIS API for JavaScript CSS-->
 10 |   <link rel="stylesheet" href="//js.arcgis.com/3.10/js/esri/css/esri.css">
 11 |   <!-- Web Framework CSS - Bootstrap (getbootstrap.com) and Bootstrap-map-js (github.com/esri/bootstrap-map-js) -->
 12 |   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
 13 |   <link rel="stylesheet" href="//esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
 14 |   <style>
 15 |     html, body, #mapDiv {
 16 |       height: 100%;
 17 |       width: 100%;
 18 |     }
 19 |   </style>
 20 |   
 21 |   <!-- ArcGIS API for JavaScript library references -->
 22 |   <script src="//js.arcgis.com/3.10compact"></script>
 23 |   <script>
 24 |   /*
 25 |   */
 26 |     require(["esri/map",
 27 |       "esri/InfoTemplate",
 28 |       "esri/layers/FeatureLayer",
 29 |       "esri/Color",
 30 |       "esri/renderers/SimpleRenderer",
 31 |       "esri/symbols/SimpleMarkerSymbol",
 32 |       "esri/symbols/SimpleLineSymbol",
 33 |       "esri/symbols/PictureMarkerSymbol",
 34 |       "dojo/on", 
 35 |       "dojo/dom", 
 36 |       "dojo/domReady!"], 
 37 |       function(Map, InfoTemplate, FeatureLayer, Color, SimpleRenderer, SimpleMarkerSymbol, SimpleLineSymbol, PictureMarkerSymbol, on, dom) {  
 38 |         "use strict"
 39 | 
 40 |         var originalRenderer;
 41 | 
 42 |         // Create map
 43 |         var map = new Map("mapDiv", {
 44 |           basemap: "osm",
 45 |           center: [-94.58, 39.10], //long, lat
 46 |           zoom: 14
 47 |         });
 48 | 
 49 |         var pointFL = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0", {outFields: ["*"]});
 50 |         
 51 |         //we can define an image resource to use as an alternative symbol (within a simple renderer)
 52 |         var bmpSymbol = new PictureMarkerSymbol("http://webarchive.okfn.org/okfn.org/201404/assets.okfn.org/p/opengovernment/img/icon-512.png", 12, 12);
 53 |         var bmpRenderer = new SimpleRenderer(bmpSymbol);
 54 | 
 55 |         //we can also define a simple SVG symbol for all points (green diamond with blue outline)
 56 |         var markerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_DIAMOND, 12,
 57 |           new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
 58 |           //color and width of outline
 59 |           new Color([0,0,255]), 1.5),
 60 |           //color of fill (r,g,b,alpha/transparency)
 61 |           new Color([0,255,0,0.50]));
 62 | 
 63 |         //if all features should be symobolized the same we use a simple renderer, other renderers give us the ability to differentiate based on attributess
 64 |         var simpleRenderer = new SimpleRenderer(markerSymbol);
 65 | 
 66 |         pointFL.setInfoTemplate(new InfoTemplate("Census Block: ${TRACT}/${BLOCK}", "Pop. in 2000: ${POP2000}"));
 67 |         map.addLayer(pointFL);
 68 |         
 69 |         pointFL.on("load", function(evt) {
 70 |           //once the feature layer has loaded, we can retrieve the renderer defined for the service itself (which displays larger circles )
 71 |           originalRenderer = evt.layer.renderer;
 72 |         });
 73 | 
 74 |         // Set popup
 75 |         var popup = map.infoWindow;
 76 |         popup.highlight = false;
 77 |         popup.titleInBody = false;
 78 |         popup.domNode.className += " light";
 79 | 
 80 |         //wire an event listener to detect when someone has selected a new dropdown value
 81 |         on(dom.byId("symbol"), "change", changeSymbol);
 82 | 
 83 |         function changeSymbol() {
 84 |           var e = dom.byId("symbol");
 85 |           var sym = e.options[e.selectedIndex].value;
 86 | 
 87 |           switch (sym) {            
 88 |             case "bmp":
 89 |               //substitute a PictureMarkerSymbol to draw the graphics
 90 |               pointFL.setRenderer(bmpRenderer);
 91 |               pointFL.refresh();
 92 |               break
 93 |             case "svg":
 94 |               //substitute a SimpleMarkerSymbol to draw the graphics
 95 |               pointFL.setRenderer(simpleRenderer);
 96 |               pointFL.refresh();
 97 |               break
 98 |             case "default":
 99 |               //replace the original renderer using the class breaks defined in the service itself
100 |               pointFL.setRenderer(originalRenderer);
101 |               pointFL.refresh();
102 |               break      
103 |           }          
104 |         }
105 |       }
106 |     );
107 |   </script>
108 | </head>
109 | <body>
110 |   <div class="panel panel-primary panel-fixed">
111 |     <div class="panel-heading">
112 |       <h3 class="panel-title">Points</h3>
113 |     </div>
114 |     <div class="panel-body">      
115 |       <div class="form-inline">
116 |         <div>
117 |         Apply different symbols to point graphics in the map<br><br>
118 |         </div>
119 |         <div class="form-group">
120 |         <select class="form-control" id="symbol">
121 |           <option value="default" selected="selected">default (defined in service)</option>
122 |           <option value="bmp">Picture Image</option>
123 |           <option value="svg">SVG Marker</option>          
124 |         </select>    
125 |       </div>
126 |       </div>
127 |     </div>
128 |   </div>
129 |   <div id="mapDiv"></div>  
130 | </body>
131 | </html>
132 | 


--------------------------------------------------------------------------------
/images/black-dot-small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/quickstart-map-js/f00010acc975139bf17292495c719ca35f6572c1/images/black-dot-small.png


--------------------------------------------------------------------------------
/images/blue-dot-small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/quickstart-map-js/f00010acc975139bf17292495c719ca35f6572c1/images/blue-dot-small.png


--------------------------------------------------------------------------------
/images/blue-pin-blank.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/quickstart-map-js/f00010acc975139bf17292495c719ca35f6572c1/images/blue-pin-blank.png


--------------------------------------------------------------------------------
/images/blue-pin-house.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/quickstart-map-js/f00010acc975139bf17292495c719ca35f6572c1/images/blue-pin-house.png


--------------------------------------------------------------------------------
/images/blue-pin-radius.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/quickstart-map-js/f00010acc975139bf17292495c719ca35f6572c1/images/blue-pin-radius.png


--------------------------------------------------------------------------------
/images/blue-pin-star.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/quickstart-map-js/f00010acc975139bf17292495c719ca35f6572c1/images/blue-pin-star.png


--------------------------------------------------------------------------------
/images/blue-pin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/quickstart-map-js/f00010acc975139bf17292495c719ca35f6572c1/images/blue-pin.png


--------------------------------------------------------------------------------
/images/brown-pin-blank.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/quickstart-map-js/f00010acc975139bf17292495c719ca35f6572c1/images/brown-pin-blank.png


--------------------------------------------------------------------------------
/images/brown-pin-house.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/quickstart-map-js/f00010acc975139bf17292495c719ca35f6572c1/images/brown-pin-house.png


--------------------------------------------------------------------------------
/images/brown-pin-start.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/quickstart-map-js/f00010acc975139bf17292495c719ca35f6572c1/images/brown-pin-start.png


--------------------------------------------------------------------------------
/images/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/quickstart-map-js/f00010acc975139bf17292495c719ca35f6572c1/images/favicon.ico


--------------------------------------------------------------------------------
/images/green-dot-small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/quickstart-map-js/f00010acc975139bf17292495c719ca35f6572c1/images/green-dot-small.png


--------------------------------------------------------------------------------
/images/green-pin-blank.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/quickstart-map-js/f00010acc975139bf17292495c719ca35f6572c1/images/green-pin-blank.png


--------------------------------------------------------------------------------
/images/green-pin-house.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/quickstart-map-js/f00010acc975139bf17292495c719ca35f6572c1/images/green-pin-house.png


--------------------------------------------------------------------------------
/images/green-pin-star.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/quickstart-map-js/f00010acc975139bf17292495c719ca35f6572c1/images/green-pin-star.png


--------------------------------------------------------------------------------
/images/green-pin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/quickstart-map-js/f00010acc975139bf17292495c719ca35f6572c1/images/green-pin.png


--------------------------------------------------------------------------------
/images/grey-pin-blank.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/quickstart-map-js/f00010acc975139bf17292495c719ca35f6572c1/images/grey-pin-blank.png


--------------------------------------------------------------------------------
/images/grey-pin-house.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/quickstart-map-js/f00010acc975139bf17292495c719ca35f6572c1/images/grey-pin-house.png


--------------------------------------------------------------------------------
/images/grey-pin-star.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/quickstart-map-js/f00010acc975139bf17292495c719ca35f6572c1/images/grey-pin-star.png


--------------------------------------------------------------------------------
/images/orange-dot-small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/quickstart-map-js/f00010acc975139bf17292495c719ca35f6572c1/images/orange-dot-small.png


--------------------------------------------------------------------------------
/images/orange-pin-blank.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/quickstart-map-js/f00010acc975139bf17292495c719ca35f6572c1/images/orange-pin-blank.png


--------------------------------------------------------------------------------
/images/orange-pin-house.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/quickstart-map-js/f00010acc975139bf17292495c719ca35f6572c1/images/orange-pin-house.png


--------------------------------------------------------------------------------
/images/orange-pin-radius.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/quickstart-map-js/f00010acc975139bf17292495c719ca35f6572c1/images/orange-pin-radius.png


--------------------------------------------------------------------------------
/images/orange-pin-star.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/quickstart-map-js/f00010acc975139bf17292495c719ca35f6572c1/images/orange-pin-star.png


--------------------------------------------------------------------------------
/images/orange-pin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/quickstart-map-js/f00010acc975139bf17292495c719ca35f6572c1/images/orange-pin.png


--------------------------------------------------------------------------------
/images/progress.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/quickstart-map-js/f00010acc975139bf17292495c719ca35f6572c1/images/progress.gif


--------------------------------------------------------------------------------
/images/purple-pin-blank.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/quickstart-map-js/f00010acc975139bf17292495c719ca35f6572c1/images/purple-pin-blank.png


--------------------------------------------------------------------------------
/images/purple-pin-house.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/quickstart-map-js/f00010acc975139bf17292495c719ca35f6572c1/images/purple-pin-house.png


--------------------------------------------------------------------------------
/images/purple-pin-star.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/quickstart-map-js/f00010acc975139bf17292495c719ca35f6572c1/images/purple-pin-star.png


--------------------------------------------------------------------------------
/images/purple-pin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/quickstart-map-js/f00010acc975139bf17292495c719ca35f6572c1/images/purple-pin.png


--------------------------------------------------------------------------------
/images/red-dot-small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/quickstart-map-js/f00010acc975139bf17292495c719ca35f6572c1/images/red-dot-small.png


--------------------------------------------------------------------------------
/images/red-pin-blank.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/quickstart-map-js/f00010acc975139bf17292495c719ca35f6572c1/images/red-pin-blank.png


--------------------------------------------------------------------------------
/images/red-pin-house.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/quickstart-map-js/f00010acc975139bf17292495c719ca35f6572c1/images/red-pin-house.png


--------------------------------------------------------------------------------
/images/red-pin-star.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/quickstart-map-js/f00010acc975139bf17292495c719ca35f6572c1/images/red-pin-star.png


--------------------------------------------------------------------------------
/images/red-pin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/quickstart-map-js/f00010acc975139bf17292495c719ca35f6572c1/images/red-pin.png


--------------------------------------------------------------------------------
/images/yellow-pin-blank.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/quickstart-map-js/f00010acc975139bf17292495c719ca35f6572c1/images/yellow-pin-blank.png


--------------------------------------------------------------------------------
/images/yellow-pin-house.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/quickstart-map-js/f00010acc975139bf17292495c719ca35f6572c1/images/yellow-pin-house.png


--------------------------------------------------------------------------------
/images/yellow-pin-start.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/quickstart-map-js/f00010acc975139bf17292495c719ca35f6572c1/images/yellow-pin-start.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |     <head>
  4 |     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
  6 |     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  8 |     <meta name="description" content=""/>
  9 |     <meta name="author" content="Allan Laframboise"/>
 10 |     <title>Mapping Examples</title>
 11 |     <link rel="shortcut icon" href="//esri.github.io/quickstart-map-js/images/favicon.ico">
 12 |     <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
 13 |     <style type="text/css">
 14 |       .container-narrow {
 15 |         margin: 0 auto;
 16 |         max-width: 700px;
 17 |       }
 18 |       .well-small {
 19 |         max-width: 300px;
 20 |         margin: 0 auto 10px;
 21 |       }
 22 |       .btn-max-width {
 23 |         /*max-width: 250px;*/
 24 |         margin-bottom: 5px;
 25 |       }
 26 |       .btn-wide-75 {
 27 |         width: 65%;
 28 |       }
 29 |       h3 {
 30 |         margin-top: 10px;
 31 |         margin-bottom: 15px;
 32 |       }
 33 |     </style>
 34 |   </head>
 35 |   <body>
 36 |     <a href="https://github.com/esri/quickstart-map-js"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png" alt="Fork me on GitHub"></a>
 37 |     <div class="container-narrow">
 38 |       <div class="row lead text-center">
 39 |         <h3>ArcGIS JavaScript Mapping Examples</h3>
 40 |         <p>Simple apps to get you going fast!</p>
 41 |       </div>
 42 |       <div class="row">
 43 |         <div class="col-sm-6">
 44 |           <div class="well well-small text-center">
 45 |               <h3>Maps</h3>
 46 |               <p>
 47 |               <a href="./html/maps/basemaps.html" class="btn btn-primary btn-wide-75 btn-max-width">Basemaps</a>
 48 |               <a href="./html/maps/basemaps_widget.html" class="btn btn-primary btn-wide-75 btn-max-width">Basemaps Widget</a>
 49 |               <a href="./html/maps/basemap_watercolor.html" class="btn btn-primary btn-wide-75 btn-max-width">Watercolor Basemap</a>
 50 |               <a href="./html/maps/basemaptour.html" class="btn btn-primary btn-wide-75 btn-max-width">Basemap Tour</a>
 51 |               <a target="_blank" href="https://developers.arcgis.com/javascript/jssamples/#search/basemap" class="btn btn-link btn-wide-75 btn-max-width">More Samples...</a>
 52 |               </p>
 53 |           </div>
 54 |         </div>
 55 |         <div class="col-sm-6">
 56 |           <div class="well well-small text-center">
 57 |               <h3>Geocoding</h3>
 58 |               <p>
 59 |               <a href="./html/geocoding/geosearch.html" class="btn btn-primary btn-wide-75 btn-max-width">Find Places</a>
 60 |               <a href="./html/geocoding/geosearch_widget.html" class="btn btn-primary btn-wide-75 btn-max-width">Find Places Widget</a>
 61 |               <a href="./html/geocoding/reversegeocode.html" class="btn btn-primary btn-wide-75 btn-max-width">Find Address</a>
 62 |               <a href="./html/geocoding/geosearch_category.html" class="btn btn-primary btn-wide-75 btn-max-width">Find by Category</a>
 63 |               <a target="_blank" href="https://developers.arcgis.com/javascript/jssamples/#search/geocode" class="btn btn-link btn-wide-75 btn-max-width">More Samples...</a>
 64 |             </p>
 65 |             </div>
 66 |         </div>
 67 |       </div>
 68 |       <div class="row">
 69 |         <div class="col-sm-6">
 70 |           <div class="well well-small text-center">
 71 |               <h3>Directions</h3>
 72 |               <p>
 73 |               <a href="./html/directions/directions.html" class="btn btn-primary btn-wide-75 btn-max-width">Directions</a>
 74 |               <a href="./html/directions/directions_widget.html" class="btn btn-primary btn-wide-75 btn-max-width">Directions Widget</a>
 75 |               <a href="./html/directions/drivetime.html" class="btn btn-primary btn-wide-75 btn-max-width">Drive Time</a>
 76 |               <a href="./html/directions/routes_and_barriers.html" class="btn btn-primary btn-wide-75 btn-max-width">Routes & Barriers</a>
 77 |               <a target="_blank" href="https://developers.arcgis.com/javascript/jssamples/#search/directions" class="btn btn-link btn-wide-75 btn-max-width">More Samples...</a>
 78 |             </p>
 79 |             </div>
 80 |         </div>
 81 |         <div class="col-sm-6">
 82 |           <div class="well well-small text-center">
 83 |               <h3>Data and Services</h3>
 84 |               <p>
 85 |               <a href="./html/data/load_geojson.html" class="btn btn-primary btn-wide-75 btn-max-width">Load GeoJSON</a>
 86 |               <a href="./html/data/load_flickr_json.html" class="btn btn-primary btn-wide-75 btn-max-width">Load Flickr JSON</a>
 87 |               <a href="./html/data/webmapbyid.html" class="btn btn-primary btn-wide-75 btn-max-width">Load Webmap</a>
 88 |               <a href="./html/data/load_feature_service.html" class="btn btn-primary btn-wide-75 btn-max-width">Load Feature Service</a>
 89 |               <a target="_blank" href="https://developers.arcgis.com/javascript/jssamples/#search/feature service" class="btn btn-link btn-wide-75 btn-max-width">More Samples...</a>
 90 |             </p>
 91 |             </div>
 92 |         </div>
 93 |       </div>
 94 |       <div class="row">
 95 |         <div class="col-sm-6">
 96 |           <div class="well well-small text-center">
 97 |               <h3>Query</h3>
 98 |               <p>               
 99 |               <a href="./html/data/draw_select_features.html" class="btn btn-default btn-wide-75 btn-max-width">Shape Query</a>
100 |               <a href="./html/data/query_feature_service.html" class="btn btn-primary btn-wide-75 btn-max-width">SQL Query</a>
101 |               <a href="./html/data/search_by_distance.html" class="btn btn-primary btn-wide-75 btn-max-width">Search By Distance</a>
102 |               <a href="./html/data/show_table_features.html" class="btn btn-default btn-wide-75 btn-max-width">Show Table</a>
103 |               <a target="_blank" href="https://developers.arcgis.com/javascript/jssamples/#search/query" class="btn btn-link btn-wide-75 btn-max-width">More Samples...</a>
104 |             </p>
105 |             </div>
106 |         </div>
107 |         <div class="col-sm-6">
108 |           <div class="well well-small text-center">
109 |               <h3>Colors and Symbols</h3>
110 |               <p>
111 |               <a href="./html/symbols/symbols_pts.html" class="btn btn-primary btn-wide-75 btn-max-width">Point Symbols</a>
112 |               <a href="./html/symbols/symbols_lines.html" class="btn btn-primary btn-wide-75 btn-max-width">Line Symbols</a>
113 |               <a href="./html/symbols/symbols_polygons.html" class="btn btn-primary btn-wide-75 btn-max-width">Polygon Symbols</a>
114 |               <a target="_blank" href="https://developers.arcgis.com/javascript/jssamples/#search/renderer" class="btn btn-link btn-wide-75 btn-max-width">More Samples...</a>
115 |             </p>
116 |             </div>
117 |         </div>
118 |       </div>
119 |       <div class="row">
120 |         <div class="col-sm-6">
121 |           <div class="well well-small text-center">
122 |               <h3>Graphics</h3>
123 |               <p>
124 |               <a href="./html/graphics/graphics.html" class="btn btn-primary btn-wide-75 btn-max-width">Draw Graphics</a>
125 |               <a href="./html/graphics/graphics_toolbar.html" class="btn btn-primary btn-wide-75 btn-max-width">Draw Graphics Widget</a>
126 |               <a href="./html/graphics/graphics_marker.html" class="btn btn-primary btn-wide-75 btn-max-width">Align Marker Symbol</a>
127 |               <a target="_blank" href="https://developers.arcgis.com/javascript/jssamples/#search/graphics" class="btn btn-link btn-wide-75 btn-max-width">More Samples...</a>
128 |             </p>
129 |             </div>
130 |         </div>
131 |         <div class="col-sm-6">
132 |           <div class="well well-small text-center">
133 |               <h3>Misc</h3>
134 |               <p>
135 |               <a href="./html/misc/geolocation.html" class="btn btn-primary btn-wide-75 btn-max-width">HTML 5 Geolocation</a>
136 |               <a href="./html/misc/autocenter.html" class="btn btn-primary btn-wide-75 btn-max-width">Auto Center Map</a>
137 |               <a href="./html/misc/show_panel.html" class="btn btn-primary btn-wide-75 btn-max-width">Show Hide Panel</a>
138 |             </p>
139 |           </div>
140 |         </div>
141 |       </div>
142 |     </div>
143 |   </body>
144 | </html>


--------------------------------------------------------------------------------
/js/oauth/oAuthHelper.js:
--------------------------------------------------------------------------------
  1 | define(
  2 | [
  3 |   "dojo/_base/lang",
  4 |   "dojo/_base/json",
  5 |   "dojo/_base/url",
  6 |   "dojo/cookie",
  7 |   "dojo/Deferred",
  8 |   "dojo/io-query",
  9 |   "esri/IdentityManager"
 10 | ], 
 11 | function(lang, dojoJson, Url, cookie, Deferred, ioquery, idManager) {
 12 |   
 13 |   var oAuthHelper = {
 14 |     
 15 |     portal: "http://www.arcgis.com",
 16 |     
 17 |     popupCallbackPage: window.location.protocol + "//" + 
 18 |                        window.location.host + 
 19 |                        window.location.pathname.replace(/\/[^\/]+$/, "") + 
 20 |                        "/oauth-callback.html",
 21 | 
 22 |     // popupCallbackPage: window.location.protocol + "//" + 
 23 |     //                    window.location.host + 
 24 |     //                    "/GitHub/quickstart-map-js/js/oAuth" + 
 25 |     //                    "/oauth-callback.html",
 26 |     
 27 |     init: function(parameters) {
 28 |       /**
 29 |        * parameters = {
 30 |        *   appId:       "<String>",
 31 |        *   portal:      "<String>", // deafult is "http://www.arcgis.com"
 32 |        *   expiration:   <Number>,  // in minutes
 33 |        *   popup:        <Boolean>
 34 |        * } 
 35 |        */
 36 |       
 37 |       lang.mixin(this, parameters);
 38 |       this.portalUrl = this.portal + "/sharing/rest";
 39 |       
 40 |       // Read OAuth response from the page url fragment if available,
 41 |       // and register with identity manager
 42 |       this.checkOAuthResponse(window.location.href, true);
 43 |       
 44 |       // Read token from cookie if available, and register
 45 |       // with identity manager
 46 |       this.checkCookie();
 47 |       
 48 |       // You don't need this if you require your users to sign-in
 49 |       // before using the app. This override helps trigger OAuth
 50 |       // flow instead of the legacy generateToken flow.
 51 |       this.overrideIdentityManager();
 52 | 
 53 |       this.popupCallbackPage = this.redirect_uri;  // Als - allows callback.html to live outside of current directory!
 54 |     },
 55 |     
 56 |     isSignedIn: function() {
 57 |       return !!idManager.findCredential(this.portalUrl);
 58 |     },
 59 |     
 60 |     signIn: function() {
 61 |       var deferred = (this.deferred = new Deferred());
 62 |       
 63 |       var authParameters = {
 64 |         client_id:      this.appId,
 65 |         response_type:  "token",
 66 |         expiration:     this.expiration, // in minutes. Default is 30.
 67 |         redirect_uri:   this.popup ? 
 68 |                           this.popupCallbackPage : 
 69 |                           window.location.href.replace(/#.*$/, "")
 70 |       };
 71 |       
 72 |       var authUrl = this.portal.replace(/^http:/i, "https:") + 
 73 |                     "/sharing/oauth2/authorize?" + 
 74 |                     ioquery.objectToQuery(authParameters);
 75 |   
 76 |       if (this.popup) {
 77 |         // Internet Explorer 8 throws error if windowName  
 78 |         // (second argument below) has hyphen
 79 |         window.open(
 80 |           authUrl, 
 81 |           "esrioauth", 
 82 |           "width=480,height=320,location=yes,status=yes,scrollbars=yes"
 83 |         );
 84 |       }
 85 |       else {
 86 |         window.location = authUrl;
 87 |       }
 88 |       
 89 |       return deferred;
 90 |     },
 91 |     
 92 |     signOut: function() {
 93 |       // Delete the cookie
 94 |       cookie("arcgis_auth", null, {
 95 |         expires: -1, 
 96 |         path:    "/", 
 97 |         domain:  document.domain
 98 |       });
 99 |       
100 |       window.location.reload();
101 |     },
102 |     
103 |     checkOAuthResponse: function(url, clearHash) {
104 |       // This method will be called from popup callback page as well
105 |       
106 |       var oauthResponse = this.parseFragment(url);
107 |       
108 |       if (oauthResponse) {
109 |         if (clearHash) { // redirection flow
110 |           // Remove OAuth bits from the URL fragment
111 |           window.location.hash = "";
112 |         }
113 | 
114 |         if (oauthResponse.error) {
115 |           var error = new Error(oauthResponse.error);
116 |           error.details = [ oauthResponse.error_description ];
117 |           
118 |           if (this.deferred) {
119 |             this.deferred.reject(error);
120 |           }
121 |         }
122 |         else {
123 |           var credential = this.registerToken(oauthResponse);
124 | 
125 |           // User checked "Keep me signed in" option
126 |           if (oauthResponse.persist) {
127 |             cookie("arcgis_auth", dojoJson.toJson(oauthResponse), {
128 |               expires: new Date(oauthResponse.expires_at),
129 |               path:    "/",
130 |               domain:  document.domain
131 |             });
132 |             
133 |             console.log("[Cookie] Write: ", cookie("arcgis_auth"));
134 |           }
135 |           
136 |           if (this.deferred) {
137 |             this.deferred.resolve(credential);
138 |           }
139 |         }
140 |       }
141 |     },
142 |     
143 |     checkCookie: function() {
144 |       var ckie = cookie("arcgis_auth");
145 | 
146 |       if (ckie) {
147 |         console.log("[Cookie] Read: ", ckie);
148 |         
149 |         var oauthResponse = dojoJson.fromJson(ckie);
150 |         this.registerToken(oauthResponse);
151 |       }
152 |     },
153 |     
154 |     registerToken: function(oauthResponse) {
155 |       // Register the access token with Identity Manager, so that
156 |       // it can be added to all ArcGIS Online REST API requests
157 | 
158 |       idManager.registerToken({
159 |         server:  this.portalUrl,
160 |         userId:  oauthResponse.username,
161 |         token:   oauthResponse.access_token,
162 |         expires: oauthResponse.expires_at,
163 |         ssl:     oauthResponse.ssl
164 |       });
165 |       
166 |       var credential = idManager.findCredential(this.portalUrl, oauthResponse.username);
167 |       
168 |       console.log("Token registered with Identity Manager: ", credential);
169 |       return credential;
170 |     },
171 |     
172 |     parseFragment: function(url) {
173 |       var urlObj = new Url(url),
174 |           fragment = urlObj.fragment ? ioquery.queryToObject(urlObj.fragment) : null;
175 |   
176 |       if (fragment) {
177 |         if (fragment.access_token) {
178 |           console.log("[OAuth Response]: ", fragment);
179 |           
180 |           // Convert from String to Number
181 |           fragment.expires_in = Number(fragment.expires_in);
182 |           
183 |           // Calculate universal time
184 |           fragment.expires_at = (new Date()).getTime() + (fragment.expires_in * 1000);
185 |           
186 |           fragment.ssl = (fragment.ssl === "true");
187 |         }
188 |         else if (fragment.error) {
189 |           console.log("[OAuth Error]: ", fragment.error, " - ", fragment.error_description);
190 |         }
191 |   
192 |         return fragment;
193 |       }
194 |     },
195 |     
196 |     overrideIdentityManager: function() {
197 |       var signInMethod = idManager.signIn,
198 |           helper = this;
199 |       
200 |       idManager.signIn = function(resUrl, serverInfo, options) {
201 |         
202 |         return (serverInfo.server.indexOf(".arcgis.com") !== -1) ?
203 |                   // OAuth flow
204 |                   helper.signIn() :
205 |                   // generateToken flow
206 |                   signInMethod.apply(this, arguments);
207 |       };
208 |     }
209 |   };
210 |   
211 |   window.oAuthHelper = oAuthHelper;
212 |   
213 |   return oAuthHelper;
214 | });  
215 | 


--------------------------------------------------------------------------------
/js/oauth/oauth-callback.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE HTML>
 2 | <html>
 3 | <head>
 4 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5 |   <title>OAuth Popup Callback</title>
 6 |   
 7 |   <style>
 8 |     html, body {
 9 |       height: 100%; 
10 |       width: 100%;
11 |       margin: 0px;
12 |       padding: 0px;
13 |       font-family: Lucida Sans,Lucida Grande,Arial !important;
14 |       font-size: 14px;
15 |     }
16 |   </style>
17 | 
18 |   <script>
19 |     function initialize() {
20 |       //console.log("oauth callback");
21 |       
22 |       //window.opener.OAuthHelper.checkOAuthResponse(window.location.href);
23 |       window.opener.oAuthHelper.checkOAuthResponse(window.location.href);
24 |       window.close();
25 |     }
26 |   </script>
27 | </head>
28 | 
29 | <body onload="initialize();">
30 |   <!--OAuth Popup Callback-->
31 | </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/js/terraformer-arcgis-parser/.bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "terraformer-arcgis-parser",
 3 |   "version": "1.0.4",
 4 |   "main": "terraformer-arcgis-parser.min.js",
 5 |   "ignore": [
 6 |     "versions",
 7 |     "benchmarks"
 8 |   ],
 9 |   "dependencies": {
10 |     "terraformer": "~1.0.3"
11 |   },
12 |   "homepage": "https://github.com/Esri/terraformer-arcgis-parser",
13 |   "_release": "1.0.4",
14 |   "_resolution": {
15 |     "type": "version",
16 |     "tag": "v1.0.4",
17 |     "commit": "fb13001a49136be04885ba4805a13fb9afd9629a"
18 |   },
19 |   "_source": "git://github.com/Esri/terraformer-arcgis-parser.git",
20 |   "_target": "~1.0.4",
21 |   "_originalSource": "terraformer-arcgis-parser",
22 |   "_direct": true
23 | }


--------------------------------------------------------------------------------
/js/terraformer-arcgis-parser/.gitignore:
--------------------------------------------------------------------------------
 1 | # Ignore complexity output
 2 | complexity.xml
 3 | 
 4 | # Ignore Coverage output
 5 | coverage
 6 | 
 7 | # Ignore Grunt temp files
 8 | .grunt
 9 | 
10 | # Mac
11 | .DS_Store
12 | Icon
13 | ._*
14 | .Spotlight-V100
15 | # SublimeText
16 | /*.sublime-project
17 | *.sublime-workspace
18 | 
19 | #Node
20 | node_modules
21 | npm-debug.log


--------------------------------------------------------------------------------
/js/terraformer-arcgis-parser/.npmingnore:
--------------------------------------------------------------------------------
1 | versions


--------------------------------------------------------------------------------
/js/terraformer-arcgis-parser/Gruntfile.js:
--------------------------------------------------------------------------------
  1 | var fs = require('fs');
  2 | 
  3 | module.exports = function (grunt) {
  4 |   grunt.initConfig({
  5 |     pkg:   grunt.file.readJSON('package.json'),
  6 | 
  7 |     meta: {
  8 |       banner: '/*! Terraformer ArcGIS Parser - <%= pkg.version %> - <%= grunt.template.today("yyyy-mm-dd") %>\n' +
  9 |         '*   https://github.com/esri/terraformer-arcgis-parser\n' +
 10 |         '*   Copyright (c) <%= grunt.template.today("yyyy") %> Esri, Inc.\n' +
 11 |         '*   Licensed MIT */'
 12 |     },
 13 | 
 14 |     uglify: {
 15 |       options: {
 16 |         report: 'gzip',
 17 |         banner: '<%= meta.banner %>'
 18 |       },
 19 |       arcgis: {
 20 |         src: ["terraformer-arcgis-parser.js"],
 21 |         dest: 'terraformer-arcgis-parser.min.js'
 22 |       },
 23 |       versioned: {
 24 |         src: ["terraformer-arcgis-parser.js"],
 25 |         dest: 'versions/terraformer-arcgis-parser-<%= pkg.version %>.min.js'
 26 |       }
 27 |     },
 28 | 
 29 |     jasmine: {
 30 |       coverage: {
 31 |         src: [
 32 |           "terraformer-arcgis-parser.js"
 33 |         ],
 34 |         options: {
 35 |           specs: 'spec/*Spec.js',
 36 |           helpers:[
 37 |             "node_modules/terraformer/terraformer.js"
 38 |           ],
 39 |           //keepRunner: true,
 40 |           outfile: 'SpecRunner.html',
 41 |           template: require('grunt-template-jasmine-istanbul'),
 42 |           templateOptions: {
 43 |             coverage: './coverage/coverage.json',
 44 |             report: './coverage',
 45 |             thresholds: {
 46 |               lines: 80,
 47 |               statements: 80,
 48 |               branches: 75,
 49 |               functions: 80
 50 |             }
 51 |           }
 52 |         }
 53 |       }
 54 |     },
 55 | 
 56 |     jasmine_node: {
 57 |       options: {
 58 |         forceExit: true,
 59 |         match: '.',
 60 |         matchall: false,
 61 |         extensions: 'js',
 62 |         specNameMatcher: 'Spec',
 63 |         helperNameMatcher: 'Helpers'
 64 |       },
 65 |       all: ['spec/']
 66 |     },
 67 | 
 68 |     complexity: {
 69 |       generic: {
 70 |         src: [ 'terraformer-arcgis-parser.js' ],
 71 |         options: {
 72 |           jsLintXML: 'complexity.xml', // create XML JSLint-like report
 73 |           errorsOnly: false, // show only maintainability errors
 74 |           cyclomatic: 6,
 75 |           halstead: 15,
 76 |           maintainability: 65
 77 |         }
 78 |       }
 79 |     },
 80 | 
 81 |     s3: {
 82 |       options: {
 83 |         key: '<%= aws.key %>',
 84 |         secret: '<%= aws.secret %>',
 85 |         bucket: '<%= aws.bucket %>',
 86 |         access: 'public-read',
 87 |         headers: {
 88 |           // 1 Year cache policy (1000 * 60 * 60 * 24 * 365)
 89 |           "Cache-Control": "max-age=630720000, public",
 90 |           "Expires": new Date(Date.now() + 63072000000).toUTCString()
 91 |         }
 92 |       },
 93 |       dev: {
 94 |         upload: [
 95 |           {
 96 |             src: 'versions/terraformer-arcgis-parser-<%= pkg.version %>.min.js',
 97 |             dest: 'terraformer-arcgis-parser/<%= pkg.version %>/terraformer-arcgis-parser.min.js'
 98 |           }
 99 |         ]
100 |       },
101 |     }
102 |   });
103 | 
104 |   var awsExists = fs.existsSync(process.env.HOME + '/terraformer-s3.json');
105 | 
106 |   if (awsExists) {
107 |     grunt.config.set('aws', grunt.file.readJSON(process.env.HOME + '/terraformer-s3.json'));
108 |   }
109 | 
110 |   grunt.loadNpmTasks('grunt-contrib-uglify');
111 |   grunt.loadNpmTasks('grunt-contrib-jasmine');
112 |   grunt.loadNpmTasks('grunt-jasmine-node');
113 |   grunt.loadNpmTasks('grunt-complexity');
114 |   grunt.loadNpmTasks('grunt-s3');
115 | 
116 |   grunt.registerTask('test', ['jasmine_node', 'jasmine']);
117 |   grunt.registerTask('version', ['test', 'uglify', 's3']);
118 |   grunt.registerTask('default', ['test']);
119 | };


--------------------------------------------------------------------------------
/js/terraformer-arcgis-parser/README.md:
--------------------------------------------------------------------------------
 1 | # Terraformer ArcGIS JSON Parser
 2 | 
 3 | This plugin handles 2 way conversion between [GeoJSON](http://geojson.org/geojson-spec.html) and the [ArcGIS Geometry](http://help.arcgis.com/en/arcgisserver/10.0/apis/rest/geometry.html) format used by Esri.
 4 | 
 5 | This package is part of the [Terraformer](http://terraformer.io) project.
 6 | 
 7 | ## Installing
 8 | 
 9 | ### Node.js
10 | 
11 |     $ npm install terraformer-arcgis-parser
12 | 
13 | ### Browser
14 | 
15 | In the browser, [Terraformer](http://github.com/esri/terraformer) is required.
16 | 
17 | You can use [Bower](http://bower.io/) to install the components if you like or download them and host them yourself.
18 | 
19 | ```
20 | $ bower install terraformer-arcgis-parser
21 | ```
22 | 
23 | ## Documentation
24 | 
25 | For full documentation check out the [offical website](http://terraformer.io/arcgis-parser/).
26 | 
27 | ```js
28 | var ArcGIS = require('terraformer-arcgis-parser');
29 | 
30 | // parse ArcGIS JSON, convert it to a Terraformer.Primitive (GeoJSON)
31 | var primitive = ArcGIS.parse({
32 |     x:"-122.6764",
33 |     y:"45.5165",
34 |     spatialReference: {
35 |       wkid: 4326
36 |     }
37 |   });
38 | 
39 | // take a Terraformer.Primitive or GeoJSON and convert it back to ArcGIS JSON
40 | var point = ArcGIS.convert({
41 |   "type": "Point",
42 |   "coordinates": [45.5165, -122.6764]
43 | });
44 | ```
45 | 
46 | ```html
47 |   <!-- Load the main Terraformer library -->
48 |   <script src="terraformer.min.js" type="text/javascript"></script>
49 |   
50 |   <!-- Load the ArcGIS Parser -->
51 |   <script src="terraformer-arcgis-parser.min.js" type="text/javascript"></script>
52 |   
53 |   <!-- Use it! -->
54 |   <script>
55 |     var primitive = Terraformer.ArcGIS.parse({
56 |       x:"-122.6764",
57 |       y:"45.5165",
58 |       spatialReference: {
59 |         wkid: 4326
60 |       }
61 |     });
62 | 
63 |     // take a Terraformer.Primitive or GeoJSON and convert it to ArcGIS JSON
64 |     var point = Terraformer.ArcGIS.convert({
65 |       "type": "Point",
66 |       "coordinates": [45.5165, -122.6764]
67 |     });
68 |   </script>
69 |   ```
70 | 
71 | ## Resources
72 | 
73 | * [Terraformer Website](http://terraformer.io)
74 | * [twitter@EsriPDX](http://twitter.com/esripdx)
75 | 
76 | ## Issues
77 | 
78 | Find a bug or want to request a new feature?  Please let us know by submitting an issue.
79 | 
80 | ## Contributing
81 | 
82 | Esri welcomes contributions from anyone and everyone. Please see our [guidelines for contributing](https://github.com/esri/contributing).
83 | 
84 | [](Esri Tags: Terraformer GeoJSON ArcGIS)
85 | [](Esri Language: JavaScript)
86 | 


--------------------------------------------------------------------------------
/js/terraformer-arcgis-parser/bower.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "terraformer-arcgis-parser",
3 |   "version": "1.0.3",
4 |   "main": "terraformer-arcgis-parser.min.js",
5 |   "ignore"        : ["versions", "benchmarks"],
6 |   "dependencies": {
7 |     "terraformer": "~1.0.3"
8 |   }
9 | }


--------------------------------------------------------------------------------
/js/terraformer-arcgis-parser/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "terraformer-arcgis-parser",
 3 |   "version": "1.0.4",
 4 |   "description": "ArcGIS JSON format parser and converter",
 5 |   "main": "terraformer-arcgis-parser.js",
 6 |   "directories": {
 7 |     "test": "test"
 8 |   },
 9 |   "scripts": {
10 |     "test": "grunt test"
11 |   },
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "git@github.com:Esri/terraformer-arcgis-parser.git"
15 |   },
16 |   "keywords": [
17 |     "ArcGIS",
18 |     "Esri",
19 |     "GIS",
20 |     "Geography"
21 |   ],
22 |   "author": "Patrick Arlt <patrick.arlt@gmail.com> (http://patrickarlt.com)",
23 |   "license": "MIT",
24 |   "dependencies": {
25 |     "terraformer": "~1.0.4"
26 |   },
27 |   "devDependencies": {
28 |     "grunt": "0.4.x",
29 |     "grunt-complexity": "~0.1.3",
30 |     "grunt-contrib-uglify": "~0.2.2",
31 |     "grunt-contrib-jasmine": "~0.4.2",
32 |     "grunt-jasmine-node": "https://github.com/magicmoose/grunt-jasmine-node/tarball/master",
33 |     "grunt-template-jasmine-istanbul": "~0.2.4",
34 |     "benchmark": "~1.0.0",
35 |     "grunt-s3": "~0.2.0-alpha.3"
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/js/terraformer-arcgis-parser/terraformer-arcgis-parser.min.js:
--------------------------------------------------------------------------------
1 | /*! Terraformer ArcGIS Parser - 1.0.4 - 2014-06-17
2 | *   https://github.com/esri/terraformer-arcgis-parser
3 | *   Copyright (c) 2014 Esri, Inc.
4 | *   Licensed MIT */!function(a,b){if("object"==typeof module&&"object"==typeof module.exports&&(exports=module.exports=b(require("terraformer"))),"object"==typeof a.navigator){if(!a.Terraformer)throw new Error("Terraformer.ArcGIS requires the core Terraformer library. https://github.com/esri/Terraformer");a.Terraformer.ArcGIS=b(a.Terraformer)}}(this,function(a){function b(a){var b,c,d,e,f=0,g=0,h=[];d=a.match(/((\+|\-)[^\+\-]+)/g),e=parseInt(d[0],32);for(var i=1;i<d.length;i+=2)b=parseInt(d[i],32)+f,f=b,c=parseInt(d[i+1],32)+g,g=c,h.push([b/e,c/e]);return h}function c(a){return d(a[0],a[a.length-1])||a.push(a[0]),a}function d(a,b){for(var c=0;c<a.length;c++)if(a[c]!==b[c])return!1;return!0}function e(a){var b={};for(var c in a)a.hasOwnProperty(c)&&(b[c]=a[c]);return b}function f(a){var b,c=0,d=0,e=a.length,f=a[d];for(d;e-1>d;d++)b=a[d+1],c+=(b[0]-f[0])*(b[1]+f[1]),f=b;return c>=0}function g(a){var b=[],d=a.slice(0),e=c(d.shift().slice(0));if(e.length>=4){f(e)||e.reverse(),b.push(e);for(var g=0;g<d.length;g++){var h=c(d[g].slice(0));h.length>=4&&(f(h)&&h.reverse(),b.push(h))}}return b}function h(a){for(var b=[],c=0;c<a.length;c++)for(var d=g(a[c]),e=d.length-1;e>=0;e--){var f=d[e].slice(0);b.push(f)}return b}function i(b,c){var d=a.Tools.arraysIntersectArrays(b,c),e=a.Tools.coordinatesContainPoint(b,c[0]);return!d&&e?!0:!1}function j(a){for(var b=[],d=[],e=0;e<a.length;e++){var g=c(a[e].slice(0));if(!(g.length<4))if(f(g)){var h=[g];b.push(h)}else d.push(g)}for(;d.length;){for(var j=d.pop(),k=!1,l=b.length-1;l>=0;l--){var m=b[l][0];if(i(m,j)){b[l].push(j),k=!0;break}}k||b.push([j.reverse()])}return 1===b.length?{type:"Polygon",coordinates:b[0]}:{type:"MultiPolygon",coordinates:b}}function k(c,d){var f={};d=d||{},d.idAttribute=d.idAttribute||void 0,"number"==typeof c.x&&"number"==typeof c.y&&(f.type="Point",f.coordinates=[c.x,c.y],(c.z||c.m)&&f.coordinates.push(c.z),c.m&&f.coordinates.push(c.m)),c.points&&(f.type="MultiPoint",f.coordinates=c.points.slice(0)),c.paths&&(1===c.paths.length?(f.type="LineString",f.coordinates=c.paths[0].slice(0)):(f.type="MultiLineString",f.coordinates=c.paths.slice(0))),c.rings&&(f=j(c.rings.slice(0))),(c.compressedGeometry||c.geometry||c.attributes)&&(f.type="Feature",c.compressedGeometry&&(c.geometry={paths:[b(c.compressedGeometry)]}),f.geometry=c.geometry?k(c.geometry):null,f.properties=c.attributes?e(c.attributes):null,c.attributes&&(f.id=c.attributes[d.idAttribute]||c.attributes.OBJECTID||c.attributes.FID));var g=c.geometry?c.geometry.spatialReference:c.spatialReference;return g&&102100===g.wkid&&(f=a.toGeographic(f)),new a.Primitive(f)}function l(b,c){var d;c=c||{};var f=c.idAttribute||"OBJECTID";d=c.sr?{wkid:c.sr}:b&&b.crs===a.MercatorCRS?{wkid:102100}:{wkid:4326};var i,j={};switch(b.type){case"Point":j.x=b.coordinates[0],j.y=b.coordinates[1],b.coordinates[2]&&(j.z=b.coordinates[2]),b.coordinates[3]&&(j.m=b.coordinates[3]),j.spatialReference=d;break;case"MultiPoint":j.points=b.coordinates.slice(0),j.spatialReference=d;break;case"LineString":j.paths=[b.coordinates.slice(0)],j.spatialReference=d;break;case"MultiLineString":j.paths=b.coordinates.slice(0),j.spatialReference=d;break;case"Polygon":j.rings=g(b.coordinates.slice(0)),j.spatialReference=d;break;case"MultiPolygon":j.rings=h(b.coordinates.slice(0)),j.spatialReference=d;break;case"Feature":b.geometry&&(j.geometry=l(b.geometry,c)),j.attributes=b.properties?e(b.properties):{},j.attributes[f]=b.id;break;case"FeatureCollection":for(j=[],i=0;i<b.features.length;i++)j.push(l(b.features[i],c));break;case"GeometryCollection":for(j=[],i=0;i<b.geometries.length;i++)j.push(l(b.geometries[i],c))}return j}function m(c){return new a.LineString(b(c))}var n={};return n.parse=k,n.convert=l,n.toGeoJSON=k,n.fromGeoJSON=l,n.parseCompressedGeometry=m,n});


--------------------------------------------------------------------------------
/js/terraformer/.bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "terraformer",
 3 |   "version": "1.0.3",
 4 |   "main": "terraformer.min.js",
 5 |   "ignore": [
 6 |     "docs",
 7 |     "examples",
 8 |     "spec",
 9 |     "versions",
10 |     "source",
11 |     "Gemfile",
12 |     "config.rb"
13 |   ],
14 |   "homepage": "https://github.com/Esri/Terraformer",
15 |   "_release": "1.0.3",
16 |   "_resolution": {
17 |     "type": "version",
18 |     "tag": "v1.0.3",
19 |     "commit": "cc459746715e4b199dc1b8c71610eb8840d8e1fe"
20 |   },
21 |   "_source": "git://github.com/Esri/Terraformer.git",
22 |   "_target": "~1.0.3",
23 |   "_originalSource": "terraformer",
24 |   "_direct": true
25 | }


--------------------------------------------------------------------------------
/js/terraformer/.gitignore:
--------------------------------------------------------------------------------
 1 | # Ignore complexity output
 2 | complexity.xml
 3 | 
 4 | # Ignore Coverage output
 5 | .coverage
 6 | 
 7 | # Ignore Grunt temp files
 8 | .grunt
 9 | 
10 | # Ignore environment variables set on this machine
11 | .env
12 | 
13 | # Ignore the doc output
14 | docs-build
15 | 
16 | # Mac
17 | .DS_Store
18 | Icon
19 | ._*
20 | .Spotlight-V100
21 | # SublimeText
22 | /*.sublime-project
23 | *.sublime-workspace
24 | 
25 | # SASS
26 | .sass-cache
27 | 
28 | #Node
29 | node_modules
30 | 
31 | #anvil
32 | /index.html
33 | 
34 | # Ruby
35 | *.gem
36 | *.rbc
37 | .bundle
38 | .config
39 | coverage
40 | InstalledFiles
41 | lib/bundler/man
42 | pkg
43 | rdoc
44 | spec/reports
45 | test/tmp
46 | test/version_tmp
47 | tmp
48 | Gemfile.lock
49 | 
50 | # YARD artifacts
51 | .yardoc
52 | _yardoc
53 | doc/
54 | 


--------------------------------------------------------------------------------
/js/terraformer/.npmignore:
--------------------------------------------------------------------------------
1 | examples
2 | versions
3 | source
4 | out
5 | docs


--------------------------------------------------------------------------------
/js/terraformer/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 |   - "0.11"
4 |   - "0.10"
5 |   - "0.8"


--------------------------------------------------------------------------------
/js/terraformer/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (c) 2013 Esri, Inc
2 | 
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4 | 
5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6 | 
7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
8 | 


--------------------------------------------------------------------------------
/js/terraformer/README.md:
--------------------------------------------------------------------------------
 1 | # Terraformer
 2 | 
 3 | Terraformer is a modular toolkit for working with geographic data.
 4 | 
 5 | ## Modules
 6 | 
 7 | The Terraformer project to broken up into a series of smaller modules.
 8 | 
 9 | * [Terraformer Core](http://terraformer.io/core/) - Contains methods and objects for working with GeoJSON. This also contains common methods used by other modules.
10 | * [WKT Parser](http://terraformer.io/wkt-parser/) - Parse Well Known Text into GeoJSON and vica-versa.
11 | * [ArcGIS Geometry Parser](http://terraformer.io/arcgis-parser/) - Parse the [ArcGIS Geometry Format](http://resources.arcgis.com/en/help/arcgis-rest-api/#/Geometry_Objects/02r3000000n1000000/) into GeoJSON and vica-versa.
12 | * [GeoStore](http://terraformer.io/geostore/) - A framework for persisting and querying GeoJSON features with pluggable indexes and persistant stores.
13 | 
14 | ## Features
15 | 
16 | * Designed to work in Node and the browser
17 | * No dependancies of other tools or libraries
18 | 
19 | ## Getting Started
20 | 
21 | Check out the getting [started guide](http://terraformer.io/getting-started/) which will give you an overview of core concepts and methods in Terraformer.
22 | 
23 | ## Documentation
24 | 
25 | Make sure your check out the full documentation on the [Terraformer website](http://terraformer.io/core/) and the [getting started guide](http://terraformer.io/getting-started/).
26 | 
27 | ```js
28 | var polygon = new Terraformer.Primitive({
29 |   "type": "Polygon",
30 |   "coordinates": [
31 |     [
32 |       [-122.66589403152467, 45.52290150862236],
33 |       [-122.66926288604736, 45.52291654238294],
34 |       [-122.67115116119385, 45.518406234030586],
35 |       [-122.67325401306151, 45.514000817199715],
36 |       [-122.6684260368347, 45.5127377671934],
37 |       [-122.66765356063841, 45.51694782364431],
38 |       [-122.66589403152467, 45.52290150862236 ]
39 |     ]
40 |   ]
41 | });
42 | 
43 | var point = new Terraformer.Primitive({
44 |   "type": "Point",
45 |   "coordinates": [-122.66947746276854, 45.51775972687403]
46 | });
47 | ```
48 | 
49 | Now that you have a point and a polygon primitive you can use the primitive helper methods.
50 | 
51 | ```js
52 | // add a new vertex to our polygon
53 | polygon.insertVertex([-122.6708507537842, 45.513188859735436], 2);
54 | 
55 | // figure out if our point is within our polygon
56 | point.within(polygon); // returns true
57 | ```
58 | 
59 | You can also have Terraformer perform many geometric operations like convex hulls and bounding boxes.
60 | 
61 | ```js
62 | var convexHull = polygon.convexHull();
63 | 
64 | point.within(convexHull); // returns true
65 | 
66 | var boundingBox = polygon.bbox(); // returns the geojson bounding box for this object.
67 | ```
68 | 
69 | ## Resources
70 | 
71 | * [Terraformer Website](http://terraformer.io)
72 | * [twitter@EsriPDX](http://twitter.com/esripdx)
73 | 
74 | ## Building the documentation
75 | 
76 | To build the site locally, first `bundle install` then `bundle exec middleman` to run a local server. Once you're satisfied, run `bundle exec middleman build`, then `grunt gh-pages` to deploy to github pages.
77 | 
78 | ## Issues
79 | 
80 | Find a bug or want to request a new feature?  Please let us know by submitting an issue.
81 | 
82 | ## Contributing
83 | 
84 | Esri welcomes contributions from anyone and everyone. Please see our [guidelines for contributing](https://github.com/esri/contributing).
85 | 
86 | [](Esri Tags: Terraformer GeoJSON)
87 | [](Esri Language: JavaScript)
88 | 


--------------------------------------------------------------------------------
/js/terraformer/bower.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name"          : "terraformer",
3 |   "version"       : "1.0.3",
4 |   "main"          : "terraformer.min.js",
5 |   "ignore"        : ["docs", "examples", "spec", "versions", "source", "Gemfile", "config.rb"]
6 | }


--------------------------------------------------------------------------------
/js/terraformer/gruntfile.js:
--------------------------------------------------------------------------------
  1 | var fs = require('fs');
  2 | 
  3 | module.exports = function (grunt) {
  4 | 
  5 |   grunt.initConfig({
  6 |     pkg: grunt.file.readJSON('package.json'),
  7 | 
  8 |     jshint: {
  9 |       files: [ 'gruntfile.js', 'terraformer.js' ],
 10 |       options: {
 11 |         node: true
 12 |       }
 13 |     },
 14 | 
 15 |     uglify: {
 16 |       options: {
 17 |         report: 'gzip',
 18 |         banner: '/*! Terraformer JS - <%= pkg.version %> - <%= grunt.template.today("yyyy-mm-dd") %>\n' +
 19 |         '*   https://github.com/esri/Terraformer\n' +
 20 |         '*   Copyright (c) <%= grunt.template.today("yyyy") %> Environmental Systems Research Institute, Inc.\n' +
 21 |         '*   Licensed MIT */'
 22 |       },
 23 |       terraformer: {
 24 |         src: ['terraformer.js'],
 25 |         dest: 'terraformer.min.js'
 26 |       },
 27 |       versioned: {
 28 |         src: ['terraformer.js'],
 29 |         dest: 'versions/terraformer-<%= pkg.version %>.min.js'
 30 |       }
 31 |     },
 32 | 
 33 |     jasmine: {
 34 |       coverage: {
 35 |         src: [
 36 |           "terraformer.js"
 37 |         ],
 38 |         options: {
 39 |           specs: 'spec/*Spec.js',
 40 |           helpers: 'spec/*Helpers.js',
 41 |           //keepRunner: true,
 42 |           outfile: 'SpecRunner.html',
 43 |           template: require('grunt-template-jasmine-istanbul'),
 44 |           templateOptions: {
 45 |             coverage: './.coverage/coverage.json',
 46 |             report: './.coverage',
 47 |             thresholds: {
 48 |               lines: 90,
 49 |               statements: 90,
 50 |               branches: 90,
 51 |               functions: 90
 52 |             }
 53 |           }
 54 |         }
 55 |       }
 56 |     },
 57 | 
 58 |     jasmine_node: {
 59 |       options: {
 60 |         forceExit: true,
 61 |         match: '.',
 62 |         matchall: false,
 63 |         extensions: 'js',
 64 |         specNameMatcher: 'Spec',
 65 |         helperNameMatcher: 'Helpers'
 66 |       },
 67 |       all: ['spec/']
 68 |     },
 69 | 
 70 |     complexity: {
 71 |       generic: {
 72 |         src: [ 'terraformer.js' ],
 73 |         options: {
 74 |           jsLintXML: 'complexity.xml', // create XML JSLint-like report
 75 |           errorsOnly: false, // show only maintainability errors
 76 |           cyclomatic: 6,
 77 |           halstead: 15,
 78 |           maintainability: 65
 79 |         }
 80 |       }
 81 |     },
 82 | 
 83 |     s3: {
 84 |       options: {
 85 |         key: '<%= aws.key %>',
 86 |         secret: '<%= aws.secret %>',
 87 |         bucket: '<%= aws.bucket %>',
 88 |         access: 'public-read',
 89 |         headers: {
 90 |           // 1 Year cache policy (1000 * 60 * 60 * 24 * 365)
 91 |           "Cache-Control": "max-age=630720000, public",
 92 |           "Expires": new Date(Date.now() + 63072000000).toUTCString()
 93 |         }
 94 |       },
 95 |       dev: {
 96 |         upload: [
 97 |           {
 98 |             src: 'versions/terraformer-<%= pkg.version %>.min.js',
 99 |             dest: 'terraformer/<%= pkg.version %>/terraformer.min.js'
100 |           }
101 |         ]
102 |       },
103 |     },
104 | 
105 |     'gh-pages': {
106 |       options: {
107 |         base: 'docs-build',
108 |         repo: 'git@github.com:Esri/Terraformer.git',
109 |         branch: 'gh-pages'
110 |       },
111 |       src: ['**']
112 |     },
113 | 
114 | 
115 |     middleman: {
116 |       server: {
117 |         options: {
118 |           useBundle: true
119 |         }
120 |       },
121 |       build: {
122 |         options: {
123 |           useBundle: true,
124 |           server: false,
125 |           command: "build"
126 |         }
127 |       }
128 |     }
129 | 
130 |   });
131 | 
132 |   var awsExists = fs.existsSync(process.env.HOME + '/terraformer-s3.json');
133 | 
134 |   if (awsExists) {
135 |     grunt.config.set('aws', grunt.file.readJSON(process.env.HOME + '/terraformer-s3.json'));
136 |   }
137 | 
138 |   grunt.loadNpmTasks('grunt-contrib-jshint');
139 |   grunt.loadNpmTasks('grunt-contrib-uglify');
140 |   grunt.loadNpmTasks('grunt-complexity');
141 |   grunt.loadNpmTasks('grunt-contrib-jasmine');
142 |   grunt.loadNpmTasks('grunt-jasmine-node');
143 |   grunt.loadNpmTasks('grunt-s3');
144 |   grunt.loadNpmTasks('grunt-gh-pages');
145 |   grunt.loadNpmTasks('grunt-middleman');
146 | 
147 |   grunt.registerTask('test', ['jshint', 'jasmine_node', 'jasmine']);
148 |   grunt.registerTask('version', ['test', 'uglify', 's3']);
149 |   grunt.registerTask('default', ['test']);
150 |   grunt.registerTask('deploy-docs', ['middleman:build', 'gh-pages']);
151 | };
152 | 


--------------------------------------------------------------------------------
/js/terraformer/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "terraformer",
 3 |   "version": "1.0.3",
 4 |   "description": "A Geo-toolkit built in Javascript.",
 5 |   "main": "terraformer.js",
 6 |   "devDependencies": {
 7 |     "grunt": "0.4.x",
 8 |     "grunt-contrib-jshint": "0.6.x",
 9 |     "grunt-contrib-uglify": "~0.2.2",
10 |     "grunt-complexity": "~0.1.3",
11 |     "grunt-contrib-jasmine": "~0.4.2",
12 |     "grunt-jasmine-node": "https://github.com/magicmoose/grunt-jasmine-node/tarball/master",
13 |     "grunt-template-jasmine-istanbul": "~0.2.4",
14 |     "grunt-s3": "~0.2.0-alpha.3",
15 |     "grunt-gh-pages": "~0.8.1",
16 |     "grunt-middleman": "~0.1.0"
17 |   },
18 |   "scripts": {
19 |     "test": "grunt test"
20 |   },
21 |   "repository": {
22 |     "type": "git",
23 |     "url": "git://github.com/esri/terraformer.git"
24 |   },
25 |   "author": "Patrick Arlt <parlt@esri.com> (http://patrickarlt.com)",
26 |   "contributors": [
27 |     "Patrick Arlt <parlt@esri.com> (http://patrickarlt.com)",
28 |     "Jerry Sievert <jsievert@esri.com> (http://legitimatesounding.com)"
29 |   ],
30 |   "license": "MIT"
31 | }
32 | 


--------------------------------------------------------------------------------
/license.txt:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/quickstart-map-js/f00010acc975139bf17292495c719ca35f6572c1/license.txt


--------------------------------------------------------------------------------
/quickstart-map-js.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/quickstart-map-js/f00010acc975139bf17292495c719ca35f6572c1/quickstart-map-js.png


--------------------------------------------------------------------------------