From cf6578e85d947b0f1ebff4ae28b8285d213d4227 Mon Sep 17 00:00:00 2001
From: Matthew Penny <mpenny@apption.com>
Date: Tue, 12 Jul 2016 14:05:45 -0400
Subject: [PATCH 01/22] Add map UI button and pivot fields

---
 .../paragraph/paragraph-chart-selector.html   |  5 ++
 .../notebook/paragraph/paragraph-graph.html   |  5 ++
 .../notebook/paragraph/paragraph-pivot.html   | 52 ++++++++++++++++++-
 .../paragraph/paragraph.controller.js         | 44 ++++++++++++++--
 4 files changed, 102 insertions(+), 4 deletions(-)

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html
index 0c763189fa5..e2e4e352b10 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html
@@ -47,6 +47,11 @@
           ng-class="{'active': isGraphMode('scatterChart')}"
           ng-click="setGraphMode('scatterChart', true)"><i class="cf cf-scatter-chart"></i>
   </button>
+  <button type="button" class="btn btn-default btn-sm"
+          ng-if="paragraph.result.type == 'TABLE'"
+          ng-class="{'active': isGraphMode('map')}"
+          ng-click="setGraphMode('map', true)"><i class="fa fa-map-marker"></i>
+  </button>
 
   <button type="button"
           ng-if="paragraph.result.type != 'TABLE'"
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-graph.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-graph.html
index c844bf861cf..d3cfdae75d1 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph-graph.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-graph.html
@@ -51,4 +51,9 @@
        id="p{{paragraph.id}}_scatterChart">
     <svg></svg>
   </div>
+
+  <div ng-if="getGraphMode()=='map'"
+       id="p{{paragraph.id}}_map">
+    <div></div>
+  </div>
 </div>
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-pivot.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-pivot.html
index 66f570b183f..b2d1df1f995 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph-pivot.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-pivot.html
@@ -32,7 +32,7 @@
     </ul>
   </div>
 
-  <div class="row" ng-if="getGraphMode()!='scatterChart'">
+  <div class="row" ng-if="getGraphMode()!='scatterChart' && getGraphMode()!='map'">
     <div class="col-md-4">
       <span class="columns lightBold">
         Keys
@@ -165,4 +165,54 @@
       </span>
     </div>
   </div>
+
+  <div class="row" ng-if="getGraphMode()=='map'">
+    <div class="col-md-4">
+      <span class="columns lightBold">
+        Latitude
+        <ul data-drop="true"
+            ng-model="paragraph.config.graph.map.lat"
+            jqyoui-droppable="{onDrop:'onGraphOptionChange()'}"
+            class="list-unstyled"
+            style="height:36px">
+          <li ng-if="paragraph.config.graph.map.lat">
+            <div class="btn btn-primary btn-xs">
+              {{paragraph.config.graph.map.lat.name}} <span class="fa fa-close" ng-click="removeMapOptionLat($index)"></span>
+            </div>
+          </li>
+        </ul>
+      </span>
+    </div>
+    <div class="col-md-4">
+      <span class="columns lightBold">
+        Longitude
+        <ul data-drop="true"
+            ng-model="paragraph.config.graph.map.lng"
+            jqyoui-droppable="{onDrop:'onGraphOptionChange()'}"
+            class="list-unstyled"
+            style="height:36px">
+          <li ng-if="paragraph.config.graph.map.lng">
+            <div class="btn btn-primary btn-xs">
+              {{paragraph.config.graph.map.lng.name}} <span class="fa fa-close" ng-click="removeMapOptionLng($index)"></span>
+            </div>
+          </li>
+        </ul>
+      </span>
+    </div>
+    <div class="col-md-4">
+      <span class="columns lightBold">
+        Pin contents
+        <ul data-drop="true"
+            ng-model="paragraph.config.graph.map.pin"
+            jqyoui-droppable="{multiple:true, onDrop:'onGraphOptionChange()'}"
+            class="list-unstyled">
+          <li ng-repeat="item in paragraph.config.graph.map.pin">
+            <div class="btn btn-primary btn-xs">
+              {{item.name}} <span class="fa fa-close" ng-click="removeMapOptionPinInfo($index)"></span>
+            </div>
+          </li>
+        </ul>
+      </span>
+    </div>
+  </div>
 </div>
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
index f1d04cd8f37..033ef7735c6 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
@@ -245,6 +245,12 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
       config.graph.scatter = {};
     }
 
+    if (!config.graph.map) {
+      config.graph.map = {
+        pin: []
+      };
+    }
+
     if (config.enabled === undefined) {
       config.enabled = true;
     }
@@ -907,6 +913,8 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
 
       if (!type || type === 'table') {
         setTable($scope.paragraph.result, refresh);
+      } else if (type === 'map') {
+        setMap($scope.paragraph.result, refresh);
       } else {
         setD3Chart(type, $scope.paragraph.result, refresh);
       }
@@ -1131,6 +1139,9 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
     $timeout(retryRenderer);
   };
 
+  var setMap = function(data, refresh) {
+  };
+
   $scope.isGraphMode = function(graphName) {
     var activeAppId = _.get($scope.paragraph.config, 'helium.activeApp');
     if ($scope.getResultType() === 'TABLE' && $scope.getGraphMode() === graphName && !activeAppId) {
@@ -1193,6 +1204,24 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
     $scope.setGraphMode($scope.paragraph.config.graph.mode, true, false);
   };
 
+  $scope.removeMapOptionLat = function(idx) {
+    $scope.paragraph.config.graph.map.lat = null;
+    clearUnknownColsFromGraphOption();
+    $scope.setGraphMode($scope.paragraph.config.graph.mode, true, false);
+  };
+
+  $scope.removeMapOptionLng = function(idx) {
+    $scope.paragraph.config.graph.map.lng = null;
+    clearUnknownColsFromGraphOption();
+    $scope.setGraphMode($scope.paragraph.config.graph.mode, true, false);
+  };
+
+  $scope.removeMapOptionPinInfo = function(idx) {
+    $scope.paragraph.config.graph.map.pin.splice(idx, 1);
+    clearUnknownColsFromGraphOption();
+    $scope.setGraphMode($scope.paragraph.config.graph.mode, true, false);
+  };
+
   /* Clear unknown columns from graph option */
   var clearUnknownColsFromGraphOption = function() {
     var unique = function(list) {
@@ -1223,7 +1252,7 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
       }
     };
 
-    var removeUnknownFromScatterSetting = function(fields) {
+    var removeUnknownFromFields = function(fields) {
       for (var f in fields) {
         if (fields[f]) {
           var found = false;
@@ -1235,7 +1264,7 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
               break;
             }
           }
-          if (!found) {
+          if (!found && !(fields[f] instanceof Array)) {
             fields[f] = null;
           }
         }
@@ -1250,7 +1279,10 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
     unique($scope.paragraph.config.graph.groups);
     removeUnknown($scope.paragraph.config.graph.groups);
 
-    removeUnknownFromScatterSetting($scope.paragraph.config.graph.scatter);
+    removeUnknownFromFields($scope.paragraph.config.graph.scatter);
+
+    removeUnknownFromFields($scope.paragraph.config.graph.map);
+    removeUnknown($scope.paragraph.config.graph.map.pin);
   };
 
   /* select default key and value if there're none selected */
@@ -1271,6 +1303,12 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
         $scope.paragraph.config.graph.scatter.xAxis = $scope.paragraph.result.columnNames[0];
       }
     }
+
+    if (!$scope.paragraph.config.graph.map.lat && !$scope.paragraph.config.graph.map.lng &&
+            $scope.paragraph.result.columnNames.length > 1) {
+      $scope.paragraph.config.graph.map.lat = $scope.paragraph.result.columnNames[0];
+      $scope.paragraph.config.graph.map.lng = $scope.paragraph.result.columnNames[1];
+    }
   };
 
   var pivot = function(data) {

From 45858e1b66674acae4d3c2642c2ee677c7d29745 Mon Sep 17 00:00:00 2001
From: Matthew Penny <mpenny@apption.com>
Date: Tue, 12 Jul 2016 15:38:33 -0400
Subject: [PATCH 02/22] Add Esri ArcGIS map rendering support to paragraphs

---
 zeppelin-web/bower.json                       |  3 +-
 zeppelin-web/src/app/app.js                   |  3 +-
 .../paragraph/paragraph.controller.js         | 49 ++++++++++++++++++-
 .../src/app/notebook/paragraph/paragraph.css  | 10 ++++
 zeppelin-web/src/index.html                   |  1 +
 5 files changed, 63 insertions(+), 3 deletions(-)

diff --git a/zeppelin-web/bower.json b/zeppelin-web/bower.json
index ae29f70cca9..e20493fa7fc 100644
--- a/zeppelin-web/bower.json
+++ b/zeppelin-web/bower.json
@@ -32,7 +32,8 @@
     "bootstrap3-dialog": "bootstrap-dialog#~1.34.7",
     "handsontable": "~0.24.2",
     "moment-duration-format": "^1.3.0",
-    "select2": "^4.0.3"
+    "select2": "^4.0.3",
+    "angular-esri-map": "~2.0.0"
   },
   "devDependencies": {
     "angular-mocks": "1.5.0"
diff --git a/zeppelin-web/src/app/app.js b/zeppelin-web/src/app/app.js
index 20ccfb11f9e..f0f1d89cee5 100644
--- a/zeppelin-web/src/app/app.js
+++ b/zeppelin-web/src/app/app.js
@@ -33,7 +33,8 @@
           'xeditable',
           'ngToast',
           'focus-if',
-          'ngResource'
+          'ngResource',
+          'esri.map'
       ])
         .filter('breakFilter', function() {
           return function(text) {
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
index 033ef7735c6..bde3169199d 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
@@ -16,7 +16,7 @@
 angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $rootScope, $route, $window,
                                                                       $routeParams, $location, $timeout, $compile,
                                                                       $http, websocketMsgSrv, baseUrlSrv, ngToast,
-                                                                      saveAsService) {
+                                                                      saveAsService, esriLoader) {
   var ANGULAR_FUNCTION_OBJECT_NAME_PREFIX = '_Z_ANGULAR_FUNC_';
   $scope.parentNote = null;
   $scope.paragraph = null;
@@ -1140,6 +1140,53 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
   };
 
   var setMap = function(data, refresh) {
+    var createMap = function(MapView, Map) {
+      var mapdiv = angular.element('#p' + $scope.paragraph.id + '_map div')
+      .css('height', $scope.paragraph.config.graph.height).get(0);
+
+      esriLoader.require(['esri/views/MapView', 'esri/Map'], function(MapView, Map) {
+        $scope.map = new MapView({
+          container: mapdiv,
+          map: new Map({
+            basemap: 'streets'
+          }),
+          center: [-75.69719, 45.42153],  // Apption (lng, lat)
+          zoom: 16
+        });
+      });
+    };
+
+    var renderMap = function() {
+      // on chart type change, destroy map to force reinitialization.
+      if ($scope.map && !refresh) {
+        $scope.map.map.destroy();
+        $scope.map = null;
+      }
+
+      // create map if not exists.
+      if (!$scope.map) {
+        if (!esriLoader.isLoaded()) {
+          esriLoader.bootstrap({
+            url: '//js.arcgis.com/4.0'
+          }).then(createMap);
+        } else {
+          createMap();
+        }
+      }
+    };
+
+    var retryRenderer = function() {
+      if (angular.element('#p' + $scope.paragraph.id + '_map div').length) {
+        try {
+          renderMap();
+        } catch (err) {
+          console.log('Map drawing error %o', err);
+        }
+      } else {
+        $timeout(retryRenderer,10);
+      }
+    };
+    $timeout(retryRenderer);
   };
 
   $scope.isGraphMode = function(graphName) {
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.css b/zeppelin-web/src/app/notebook/paragraph/paragraph.css
index d8b464eeed1..3069a58085b 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.css
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.css
@@ -333,6 +333,16 @@ table.dataTable.table-condensed .sorting_desc:after {
   height: auto;
 }
 
+/*
+  Above, the max-width property of img tags inside tableDisplay divs was just
+  set to a percentage (max-width is relative to the parent element). However, the
+  parent elements of Esri map tiles don't have a width, resulting in an invisible
+  map (100% of 0px is 0px)! The below rule corrects for this.
+*/
+.tableDisplay .esri-display-object {
+	width: 100%;
+}
+
 .tableDisplay .btn-group span {
   margin: 10px 0 0 10px;
   font-size: 12px;
diff --git a/zeppelin-web/src/index.html b/zeppelin-web/src/index.html
index b23db7a7530..62361cedd80 100644
--- a/zeppelin-web/src/index.html
+++ b/zeppelin-web/src/index.html
@@ -70,6 +70,7 @@
     <!-- endbuild -->
     <link rel="stylesheet" ng-href="assets/styles/looknfeel/{{looknfeel}}.css" />
     <link rel="stylesheet" href="assets/styles/printMode.css" />
+    <link rel="stylesheet" href="//js.arcgis.com/4.0/esri/css/main.css" />
   </head>
   <body ng-class="{'bodyAsIframe': asIframe}">
     <!--[if lt IE 7]>

From 78285abf5c83a67d0d27791a83426a230cb6473c Mon Sep 17 00:00:00 2001
From: Matthew Penny <mpenny@apption.com>
Date: Thu, 14 Jul 2016 09:42:15 -0400
Subject: [PATCH 03/22] Add pin rendering to map based on user pivot selection
 for data

---
 .../paragraph/paragraph.controller.js         | 118 +++++++++++++++++-
 .../src/app/notebook/paragraph/paragraph.css  |  12 +-
 2 files changed, 115 insertions(+), 15 deletions(-)

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
index bde3169199d..2e07698b54f 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
@@ -1140,19 +1140,125 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
   };
 
   var setMap = function(data, refresh) {
-    var createMap = function(MapView, Map) {
+    var createPinMapLayer = function(pins, cb) {
+      esriLoader.require(['esri/layers/FeatureLayer'], function(FeatureLayer) {
+        var pinLayer = new FeatureLayer({
+          id: 'pins',
+          spatialReference: $scope.map.spatialReference,
+          geometryType: 'point',
+          source: pins,
+          fields: [],
+          objectIdField: '_ObjectID',
+          renderer: $scope.map.pinRenderer,
+          popupTemplate: {
+            title: '[{_lng}, {_lat}]',
+            content: [{
+              type: 'fields',
+              fieldInfos: []
+            }]
+          }
+        });
+
+        // add user-selected pin info fields to popup
+        var pinInfoCols = $scope.paragraph.config.graph.map.pin;
+        for (var i = 0; i < pinInfoCols.length; ++i) {
+          pinLayer.popupTemplate.content[0].fieldInfos.push({
+            fieldName: pinInfoCols[i].name,
+            visible: true
+          });
+        }
+        cb(pinLayer);
+      });
+    };
+
+    var getMapPins = function(cb) {
+      esriLoader.require(['esri/geometry/Point'], function(Point, FeatureLayer) {
+        var latCol = $scope.paragraph.config.graph.map.lat;
+        var lngCol = $scope.paragraph.config.graph.map.lng;
+        var pinInfoCols = $scope.paragraph.config.graph.map.pin;
+        var pins = [];
+
+        // construct objects for pins
+        if (latCol && lngCol && data.rows) {
+          for (var i = 0; i < data.rows.length; ++i) {
+            var row = data.rows[i];
+            var lng = row[lngCol.index];
+            var lat = row[latCol.index];
+            var pin = {
+              geometry: new Point({
+                x: lng,
+                y: lat
+              }),
+              attributes: {
+                _ObjectID: i,
+                _lng: lng,
+                _lat: lat
+              }
+            };
+
+            // add pin info from user-selected columns
+            for (var j = 0; j < pinInfoCols.length; ++j) {
+              var col = pinInfoCols[j];
+              pin.attributes[col.name] = row[col.index];
+            }
+            pins.push(pin);
+          }
+        }
+        cb(pins);
+      });
+    };
+
+    var updateMapPins = function() {
+      var pinLayer = $scope.map.map.findLayerById('pins');
+      $scope.map.popup.close();
+      if (pinLayer) {
+        $scope.map.map.remove(pinLayer);
+      }
+
+      // add pins to map as layer
+      getMapPins(function(pins) {
+        createPinMapLayer(pins, function(pinLayer) {
+          $scope.map.map.add(pinLayer);
+          if (pins.length > 0) {
+            $scope.map.goTo(pinLayer.source);
+          }
+        });
+      });
+    };
+
+    var createMap = function() {
       var mapdiv = angular.element('#p' + $scope.paragraph.id + '_map div')
       .css('height', $scope.paragraph.config.graph.height).get(0);
 
-      esriLoader.require(['esri/views/MapView', 'esri/Map'], function(MapView, Map) {
+      esriLoader.require(['esri/views/MapView',
+                          'esri/Map',
+                          'esri/renderers/SimpleRenderer',
+                          'esri/symbols/SimpleMarkerSymbol'],
+                          function(MapView, Map, SimpleRenderer, SimpleMarkerSymbol) {
         $scope.map = new MapView({
           container: mapdiv,
           map: new Map({
             basemap: 'streets'
           }),
-          center: [-75.69719, 45.42153],  // Apption (lng, lat)
-          zoom: 16
+          center: [-75.7325985, 45.4041593],  // Apption (lng, lat)
+          zoom: 16,
+          pinRenderer: new SimpleRenderer({
+            symbol: new SimpleMarkerSymbol({
+              'color': [255, 0, 0, 0.5],
+              'size': 16.5,
+              'outline': {
+                'color': [0, 0, 0, 1],
+                'width': 1.125,
+              },
+              // map pin SVG path
+              'path': 'M16,3.5c-4.142,0-7.5,3.358-7.5,7.5c0,4.143,7.5,18.121,7.5,' +
+                      '18.121S23.5,15.143,23.5,11C23.5,6.858,20.143,3.5,16,3.5z ' +
+                      'M16,14.584c-1.979,0-3.584-1.604-3.584-3.584S14.021,7.416,' +
+                      '16,7.416S19.584,9.021,19.584,11S17.979,14.584,16,14.584z'
+            })
+          })
         });
+        updateMapPins();
       });
     };
 
@@ -1160,6 +1266,7 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
       // on chart type change, destroy map to force reinitialization.
       if ($scope.map && !refresh) {
         $scope.map.map.destroy();
+        $scope.map.pinRenderer = null;
         $scope.map = null;
       }
 
@@ -1172,6 +1279,8 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
         } else {
           createMap();
         }
+      } else {
+        updateMapPins();
       }
     };
 
@@ -1329,6 +1438,7 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
     removeUnknownFromFields($scope.paragraph.config.graph.scatter);
 
     removeUnknownFromFields($scope.paragraph.config.graph.map);
+    unique($scope.paragraph.config.graph.map.pin);
     removeUnknown($scope.paragraph.config.graph.map.pin);
   };
 
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.css b/zeppelin-web/src/app/notebook/paragraph/paragraph.css
index 3069a58085b..3e5dafe3f09 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.css
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.css
@@ -327,22 +327,12 @@ table.dataTable.table-condensed .sorting_desc:after {
 .tableDisplay div {
 }
 
-.tableDisplay img {
+.tableDisplay img:not(.esri-bitmap) {
   display: block;
   max-width: 100%;
   height: auto;
 }
 
-/*
-  Above, the max-width property of img tags inside tableDisplay divs was just
-  set to a percentage (max-width is relative to the parent element). However, the
-  parent elements of Esri map tiles don't have a width, resulting in an invisible
-  map (100% of 0px is 0px)! The below rule corrects for this.
-*/
-.tableDisplay .esri-display-object {
-	width: 100%;
-}
-
 .tableDisplay .btn-group span {
   margin: 10px 0 0 10px;
   font-size: 12px;

From 26bda505a00ed00ef96390e476581bc9cf763524 Mon Sep 17 00:00:00 2001
From: Matthew Penny <mpenny@apption.com>
Date: Thu, 14 Jul 2016 12:22:24 -0400
Subject: [PATCH 04/22] Fix CSS hiding pins

---
 zeppelin-web/src/app/notebook/paragraph/paragraph.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.css b/zeppelin-web/src/app/notebook/paragraph/paragraph.css
index 3e5dafe3f09..754ec619232 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.css
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.css
@@ -333,6 +333,10 @@ table.dataTable.table-condensed .sorting_desc:after {
   height: auto;
 }
 
+.esri-display-object > svg {
+  overflow: visible;
+}
+
 .tableDisplay .btn-group span {
   margin: 10px 0 0 10px;
   font-size: 12px;

From 984e2b155c8e99ed674a0fdc2478a9eb64bf4be5 Mon Sep 17 00:00:00 2001
From: Matthew Penny <mpenny@apption.com>
Date: Thu, 14 Jul 2016 16:00:31 -0400
Subject: [PATCH 05/22] Only update pins after map is loaded, and try to detect
 latitude and logitude columns in data

---
 .../paragraph/paragraph.controller.js         | 31 ++++++++++++++-----
 1 file changed, 24 insertions(+), 7 deletions(-)

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
index 2e07698b54f..64ddf1339d7 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
@@ -1219,7 +1219,7 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
       getMapPins(function(pins) {
         createPinMapLayer(pins, function(pinLayer) {
           $scope.map.map.add(pinLayer);
-          if (pins.length > 0) {
+          if (pinLayer.source.length > 0) {
             $scope.map.goTo(pinLayer.source);
           }
         });
@@ -1241,7 +1241,7 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
             basemap: 'streets'
           }),
           center: [-75.7325985, 45.4041593],  // Apption (lng, lat)
-          zoom: 16,
+          zoom: 14,
           pinRenderer: new SimpleRenderer({
             symbol: new SimpleMarkerSymbol({
               'color': [255, 0, 0, 0.5],
@@ -1258,7 +1258,7 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
             })
           })
         });
-        updateMapPins();
+        $scope.map.then(updateMapPins);
       });
     };
 
@@ -1461,10 +1461,27 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
       }
     }
 
-    if (!$scope.paragraph.config.graph.map.lat && !$scope.paragraph.config.graph.map.lng &&
-            $scope.paragraph.result.columnNames.length > 1) {
-      $scope.paragraph.config.graph.map.lat = $scope.paragraph.result.columnNames[0];
-      $scope.paragraph.config.graph.map.lng = $scope.paragraph.result.columnNames[1];
+    /* try to find columns for the map logitude and latitude */
+    var i;
+    var col;
+    if (!$scope.paragraph.config.graph.map.lat) {
+      for (i = 0; i < $scope.paragraph.result.columnNames.length; ++i) {
+        col = $scope.paragraph.result.columnNames[i];
+        if (col.name.toUpperCase().indexOf('LAT') !== -1) {
+          $scope.paragraph.config.graph.map.lat = col;
+          break;
+        }
+      }
+    }
+
+    if (!$scope.paragraph.config.graph.map.lng) {
+      for (i = 0; i < $scope.paragraph.result.columnNames.length; ++i) {
+        col = $scope.paragraph.result.columnNames[i];
+        if (col.name.toUpperCase().indexOf('LONG') !== -1) {
+          $scope.paragraph.config.graph.map.lng = col;
+          break;
+        }
+      }
     }
   };
 

From 236094797f2f9fe464332d412eab70c2d63cf23e Mon Sep 17 00:00:00 2001
From: Matthew Penny <mpenny@apption.com>
Date: Wed, 20 Jul 2016 13:24:21 -0400
Subject: [PATCH 06/22] Add tests

---
 zeppelin-web/test/spec/controllers/paragraph.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/zeppelin-web/test/spec/controllers/paragraph.js b/zeppelin-web/test/spec/controllers/paragraph.js
index bb483f4b3c0..50691ba3591 100644
--- a/zeppelin-web/test/spec/controllers/paragraph.js
+++ b/zeppelin-web/test/spec/controllers/paragraph.js
@@ -39,7 +39,7 @@ describe('Controller: ParagraphCtrl', function() {
     'getResultType', 'loadTableData', 'setGraphMode', 'isGraphMode', 'onGraphOptionChange',
     'removeGraphOptionKeys', 'removeGraphOptionValues', 'removeGraphOptionGroups', 'setGraphOptionValueAggr',
     'removeScatterOptionXaxis', 'removeScatterOptionYaxis', 'removeScatterOptionGroup',
-    'removeScatterOptionSize'];
+    'removeScatterOptionSize', 'removeMapOptionLat', 'removeMapOptionLng', 'removeMapOptionPinInfo'];
 
   functions.forEach(function(fn) {
     it('check for scope functions to be defined : ' + fn, function() {

From effcff3f8a09e39189c3a3b5b09f2ad7047b9ec8 Mon Sep 17 00:00:00 2001
From: Matthew Penny <mpenny@apption.com>
Date: Fri, 22 Jul 2016 15:12:19 -0400
Subject: [PATCH 07/22] Add basemap selection, and some minor cleanup/renaming

---
 .../paragraph/paragraph-graphOptions.html     | 15 ++++++++
 .../notebook/paragraph/paragraph-pivot.html   |  6 ++--
 .../paragraph/paragraph.controller.js         | 34 +++++++++++++------
 3 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-graphOptions.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-graphOptions.html
index 496f1b79cd4..0f4e8ead73f 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph-graphOptions.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-graphOptions.html
@@ -28,4 +28,19 @@
       show line chart with focus
     </label>
   </div>
+  <div class="ng-if=isGraphMode('map')">
+    <label>Basemap</label>
+    <span class="dropdown">
+      <button type="button" class="btn btn-default btn-sm dropdown-toggle" style="min-width: 0px;" data-toggle="dropdown">
+        <span ng-bind="paragraph.config.graph.map.baseMapType"></span>
+        <span class="caret"></span>
+      </button>
+      <ul class="dropdown-menu" role="menu" style="min-width: 70px;">
+        <li ng-repeat="opt in baseMapOption">
+          <a ng-click="setMapBaseMap(opt)">{{opt}}</a>
+        </li>
+      </ul>
+    </span>
+    <br/>
+  </div>
 </div>
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-pivot.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-pivot.html
index b2d1df1f995..819c836dfd4 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph-pivot.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-pivot.html
@@ -203,12 +203,12 @@
       <span class="columns lightBold">
         Pin contents
         <ul data-drop="true"
-            ng-model="paragraph.config.graph.map.pin"
+            ng-model="paragraph.config.graph.map.pinCols"
             jqyoui-droppable="{multiple:true, onDrop:'onGraphOptionChange()'}"
             class="list-unstyled">
-          <li ng-repeat="item in paragraph.config.graph.map.pin">
+          <li ng-repeat="col in paragraph.config.graph.map.pinCols">
             <div class="btn btn-primary btn-xs">
-              {{item.name}} <span class="fa fa-close" ng-click="removeMapOptionPinInfo($index)"></span>
+              {{col.name}} <span class="fa fa-close" ng-click="removeMapOptionPinInfo($index)"></span>
             </div>
           </li>
         </ul>
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
index 64ddf1339d7..a4819ee9d3b 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
@@ -93,6 +93,7 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
     $scope.parentNote = note;
     $scope.originalText = angular.copy(newParagraph.text);
     $scope.chart = {};
+    $scope.baseMapOption = ['Streets', 'Satellite', 'Hybrid', 'Topo', 'Gray', 'Oceans', 'Terrain'];
     $scope.colWidthOption = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
     $scope.paragraphFocused = false;
     if (newParagraph.focus) {
@@ -246,9 +247,15 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
     }
 
     if (!config.graph.map) {
-      config.graph.map = {
-        pin: []
-      };
+      config.graph.map = {};
+    }
+
+    if (!config.graph.map.baseMapType) {
+      config.graph.map.baseMapType = $scope.baseMapOption[0];
+    }
+
+    if (!config.graph.map.pinCols) {
+      config.graph.map.pinCols = [];
     }
 
     if (config.enabled === undefined) {
@@ -1160,7 +1167,7 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
         });
 
         // add user-selected pin info fields to popup
-        var pinInfoCols = $scope.paragraph.config.graph.map.pin;
+        var pinInfoCols = $scope.paragraph.config.graph.map.pinCols;
         for (var i = 0; i < pinInfoCols.length; ++i) {
           pinLayer.popupTemplate.content[0].fieldInfos.push({
             fieldName: pinInfoCols[i].name,
@@ -1175,7 +1182,7 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
       esriLoader.require(['esri/geometry/Point'], function(Point, FeatureLayer) {
         var latCol = $scope.paragraph.config.graph.map.lat;
         var lngCol = $scope.paragraph.config.graph.map.lng;
-        var pinInfoCols = $scope.paragraph.config.graph.map.pin;
+        var pinInfoCols = $scope.paragraph.config.graph.map.pinCols;
         var pins = [];
 
         // construct objects for pins
@@ -1238,7 +1245,7 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
         $scope.map = new MapView({
           container: mapdiv,
           map: new Map({
-            basemap: 'streets'
+            basemap: $scope.paragraph.config.graph.map.baseMapType.toLowerCase()
           }),
           center: [-75.7325985, 45.4041593],  // Apption (lng, lat)
           zoom: 14,
@@ -1298,6 +1305,13 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
     $timeout(retryRenderer);
   };
 
+  $scope.setMapBaseMap = function(bm) {
+    $scope.paragraph.config.graph.map.baseMapType = bm;
+    if ($scope.map) {
+      $scope.map.map.basemap = bm.toLowerCase();
+    }
+  };
+
   $scope.isGraphMode = function(graphName) {
     var activeAppId = _.get($scope.paragraph.config, 'helium.activeApp');
     if ($scope.getResultType() === 'TABLE' && $scope.getGraphMode() === graphName && !activeAppId) {
@@ -1373,7 +1387,7 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
   };
 
   $scope.removeMapOptionPinInfo = function(idx) {
-    $scope.paragraph.config.graph.map.pin.splice(idx, 1);
+    $scope.paragraph.config.graph.map.pinCols.splice(idx, 1);
     clearUnknownColsFromGraphOption();
     $scope.setGraphMode($scope.paragraph.config.graph.mode, true, false);
   };
@@ -1420,7 +1434,7 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
               break;
             }
           }
-          if (!found && !(fields[f] instanceof Array)) {
+          if (!found && (fields[f] instanceof Object) && !(fields[f] instanceof Array)) {
             fields[f] = null;
           }
         }
@@ -1437,9 +1451,9 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
 
     removeUnknownFromFields($scope.paragraph.config.graph.scatter);
 
+    unique($scope.paragraph.config.graph.map.pinCols);
+    removeUnknown($scope.paragraph.config.graph.map.pinCols);
     removeUnknownFromFields($scope.paragraph.config.graph.map);
-    unique($scope.paragraph.config.graph.map.pin);
-    removeUnknown($scope.paragraph.config.graph.map.pin);
   };
 
   /* select default key and value if there're none selected */

From efdb889b3ab29a1d7464386fb2d9b90fe6ecad61 Mon Sep 17 00:00:00 2001
From: Matthew Penny <mpenny@apption.com>
Date: Tue, 2 Aug 2016 08:04:20 -0400
Subject: [PATCH 08/22] Add angular-esri-map to license document

---
 zeppelin-distribution/src/bin_license/LICENSE | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/zeppelin-distribution/src/bin_license/LICENSE b/zeppelin-distribution/src/bin_license/LICENSE
index ffecbe21ec0..2537a67433c 100644
--- a/zeppelin-distribution/src/bin_license/LICENSE
+++ b/zeppelin-distribution/src/bin_license/LICENSE
@@ -114,6 +114,9 @@ The following components are provided under Apache License.
     (Apache 2.0) Utility classes for Jetty (org.mortbay.jetty:jetty-util:6.1.26 - http://javadox.com/org.mortbay.jetty/jetty/6.1.26/overview-tree.html)
     (Apache 2.0) Servlet API (org.mortbay.jetty:servlet-api:2.5-20081211 - https://en.wikipedia.org/wiki/Jetty_(web_server))
     (Apache 2.0) Google HTTP Client Library for Java (com.google.http-client:google-http-client-jackson2:1.21.0 - https://github.com/google/google-http-java-client/tree/dev/google-http-client-jackson2)
+    (Apache 2.0) angular-esri-map (https://github.com/Esri/angular-esri-map)
+
+>>>>>>> Add angular-esri-map to license document
 
 ========================================================================
 MIT licenses

From 75e3d496834ac6c29a9b22a7f30de1a72536e6be Mon Sep 17 00:00:00 2001
From: Matthew Penny <mpenny@apption.com>
Date: Tue, 2 Aug 2016 08:17:42 -0400
Subject: [PATCH 09/22] Update index.html and karma.conf.js to include
 angular-esri-map JS

---
 zeppelin-web/src/index.html     | 1 +
 zeppelin-web/test/karma.conf.js | 1 +
 2 files changed, 2 insertions(+)

diff --git a/zeppelin-web/src/index.html b/zeppelin-web/src/index.html
index 62361cedd80..c09cb613c37 100644
--- a/zeppelin-web/src/index.html
+++ b/zeppelin-web/src/index.html
@@ -147,6 +147,7 @@
     <script src="bower_components/handsontable/dist/handsontable.js"></script>
     <script src="bower_components/moment-duration-format/lib/moment-duration-format.js"></script>
     <script src="bower_components/select2/dist/js/select2.js"></script>
+    <script src="bower_components/angular-esri-map/dist/angular-esri-map.js"></script>
     <!-- endbower -->
     <!-- endbuild -->
     <!-- build:js({.tmp,src}) scripts/scripts.js -->
diff --git a/zeppelin-web/test/karma.conf.js b/zeppelin-web/test/karma.conf.js
index f9f03a413fa..3705db07f2d 100644
--- a/zeppelin-web/test/karma.conf.js
+++ b/zeppelin-web/test/karma.conf.js
@@ -66,6 +66,7 @@ module.exports = function(config) {
       'bower_components/moment-duration-format/lib/moment-duration-format.js',
       'bower_components/select2/dist/js/select2.js',
       'bower_components/angular-mocks/angular-mocks.js',
+      'bower_components/angular-esri-map/dist/angular-esri-map.js'
       // endbower
       'src/app/app.js',
       'src/app/app.controller.js',

From 00054e96bab69875cd0c6caa1d7662e6ec3b3811 Mon Sep 17 00:00:00 2001
From: Matthew Penny <mpenny@apption.com>
Date: Tue, 2 Aug 2016 10:35:23 -0400
Subject: [PATCH 10/22] Disable mouse wheel zooming, and start map zoomed out

---
 .../notebook/paragraph/paragraph.controller.js | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
index a4819ee9d3b..9aac68b2aab 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
@@ -1237,6 +1237,20 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
       var mapdiv = angular.element('#p' + $scope.paragraph.id + '_map div')
       .css('height', $scope.paragraph.config.graph.height).get(0);
 
+      // prevent zooming with the scroll wheel
+      var disableZoom = function(e) {
+        var evt = e || window.event;
+        evt.cancelBubble = true;
+        evt.returnValue = false;
+        if (evt.stopPropagation) {
+          evt.stopPropagation();
+        }
+      };
+      var eName = window.WheelEvent ? 'wheel' :  // Modern browsers
+                  window.MouseWheelEvent ? 'mousewheel' :  // WebKit and IE
+                  'DOMMouseScroll';  // Old Firefox
+      mapdiv.addEventListener(eName, disableZoom, true);
+
       esriLoader.require(['esri/views/MapView',
                           'esri/Map',
                           'esri/renderers/SimpleRenderer',
@@ -1247,8 +1261,8 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
           map: new Map({
             basemap: $scope.paragraph.config.graph.map.baseMapType.toLowerCase()
           }),
-          center: [-75.7325985, 45.4041593],  // Apption (lng, lat)
-          zoom: 14,
+          center: [-106.3468, 56.1304],  // Canada (lng, lat)
+          zoom: 2,
           pinRenderer: new SimpleRenderer({
             symbol: new SimpleMarkerSymbol({
               'color': [255, 0, 0, 0.5],

From fbdd41c296b0411f9d125a4e6e4dc098ac4d13fc Mon Sep 17 00:00:00 2001
From: Matthew Penny <mpenny@apption.com>
Date: Tue, 2 Aug 2016 10:42:40 -0400
Subject: [PATCH 11/22] Make map pivot fields the same height and hide basemap
 selection when using other graph modes

---
 .../app/notebook/paragraph/paragraph-graphOptions.html   | 2 +-
 .../src/app/notebook/paragraph/paragraph-pivot.html      | 9 +++------
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-graphOptions.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-graphOptions.html
index 0f4e8ead73f..b1c58023f18 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph-graphOptions.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-graphOptions.html
@@ -28,7 +28,7 @@
       show line chart with focus
     </label>
   </div>
-  <div class="ng-if=isGraphMode('map')">
+  <div ng-if="isGraphMode('map')">
     <label>Basemap</label>
     <span class="dropdown">
       <button type="button" class="btn btn-default btn-sm dropdown-toggle" style="min-width: 0px;" data-toggle="dropdown">
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-pivot.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-pivot.html
index 819c836dfd4..9b1e75027ce 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph-pivot.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-pivot.html
@@ -154,8 +154,7 @@
         <ul data-drop="true"
             ng-model="paragraph.config.graph.scatter.size"
             jqyoui-droppable="{onDrop:'onGraphOptionChange()'}"
-            class="list-unstyled"
-            style="height:36px">
+            class="list-unstyled">
           <li ng-if="paragraph.config.graph.scatter.size">
             <div class="btn btn-xs" style="color:white" ng-class="{'btn-warning': isValidSizeOption(paragraph.config.graph.scatter, paragraph.result.rows)}">
               {{paragraph.config.graph.scatter.size.name}} <span class="fa fa-close" ng-click="removeScatterOptionSize($index)"></span>
@@ -173,8 +172,7 @@
         <ul data-drop="true"
             ng-model="paragraph.config.graph.map.lat"
             jqyoui-droppable="{onDrop:'onGraphOptionChange()'}"
-            class="list-unstyled"
-            style="height:36px">
+            class="list-unstyled">
           <li ng-if="paragraph.config.graph.map.lat">
             <div class="btn btn-primary btn-xs">
               {{paragraph.config.graph.map.lat.name}} <span class="fa fa-close" ng-click="removeMapOptionLat($index)"></span>
@@ -189,8 +187,7 @@
         <ul data-drop="true"
             ng-model="paragraph.config.graph.map.lng"
             jqyoui-droppable="{onDrop:'onGraphOptionChange()'}"
-            class="list-unstyled"
-            style="height:36px">
+            class="list-unstyled">
           <li ng-if="paragraph.config.graph.map.lng">
             <div class="btn btn-primary btn-xs">
               {{paragraph.config.graph.map.lng.name}} <span class="fa fa-close" ng-click="removeMapOptionLng($index)"></span>

From ec7f15530b877ddc826650fd4a6cd1b37072f6ae Mon Sep 17 00:00:00 2001
From: Matthew Penny <mpenny@apption.com>
Date: Tue, 2 Aug 2016 11:29:44 -0400
Subject: [PATCH 12/22] Update map height when paragraph is resized

---
 .../app/notebook/paragraph/paragraph.controller.js | 14 ++++++++------
 .../src/app/notebook/paragraph/paragraph.css       |  3 ++-
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
index 9aac68b2aab..fe84d2578dd 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
@@ -1233,10 +1233,7 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
       });
     };
 
-    var createMap = function() {
-      var mapdiv = angular.element('#p' + $scope.paragraph.id + '_map div')
-      .css('height', $scope.paragraph.config.graph.height).get(0);
-
+    var createMap = function(mapdiv) {
       // prevent zooming with the scroll wheel
       var disableZoom = function(e) {
         var evt = e || window.event;
@@ -1284,6 +1281,9 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
     };
 
     var renderMap = function() {
+      var mapdiv = angular.element('#p' + $scope.paragraph.id + '_map')
+      .css('height', $scope.paragraph.config.graph.height).children('div').get(0);
+
       // on chart type change, destroy map to force reinitialization.
       if ($scope.map && !refresh) {
         $scope.map.map.destroy();
@@ -1296,9 +1296,11 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
         if (!esriLoader.isLoaded()) {
           esriLoader.bootstrap({
             url: '//js.arcgis.com/4.0'
-          }).then(createMap);
+          }).then(function() {
+            createMap(mapdiv);
+          });
         } else {
-          createMap();
+          createMap(mapdiv);
         }
       } else {
         updateMapPins();
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.css b/zeppelin-web/src/app/notebook/paragraph/paragraph.css
index 754ec619232..646c2555aa8 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.css
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.css
@@ -354,7 +354,8 @@ table.dataTable.table-condensed .sorting_desc:after {
 
 }
 
-.tableDisplay .option .columns {
+.tableDisplay .option .columns,
+div.esri-view {
   height: 100%;
 }
 

From fc59b7d8292ef8b7dcb18940f39f6691b1786904 Mon Sep 17 00:00:00 2001
From: Matthew Penny <mpenny@apption.com>
Date: Wed, 3 Aug 2016 12:21:06 -0400
Subject: [PATCH 13/22] Use proper coordinates for map popup

---
 .../notebook/paragraph/paragraph.controller.js  | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
index fe84d2578dd..c35b2a84eb7 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
@@ -1193,8 +1193,9 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
             var lat = row[latCol.index];
             var pin = {
               geometry: new Point({
-                x: lng,
-                y: lat
+                longitude: lng,
+                latitude: lat,
+                spatialReference: $scope.map.spatialReference
               }),
               attributes: {
                 _ObjectID: i,
@@ -1276,6 +1277,18 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
             })
           })
         });
+
+        $scope.map.on('click', function() {
+          // ArcGIS JS API 4.0 does not account for scrolling or position
+          // changes by default (this is a bug, to be fixed in the upcoming
+          // version 4.1; see https://geonet.esri.com/thread/177238#comment-609681).
+          // This results in a misaligned popup.
+
+          // Workaround: manually set popup position to match position of selected pin
+          if ($scope.map.popup.selectedFeature) {
+            $scope.map.popup.location = $scope.map.popup.selectedFeature.geometry;
+          }
+        });
         $scope.map.then(updateMapPins);
       });
     };

From c97651546bdebc181f26766cdc59b01159f2cc5e Mon Sep 17 00:00:00 2001
From: Matthew Penny <mpenny@apption.com>
Date: Wed, 3 Aug 2016 12:28:20 -0400
Subject: [PATCH 14/22] Remove text from merge conflict

---
 zeppelin-distribution/src/bin_license/LICENSE | 2 --
 1 file changed, 2 deletions(-)

diff --git a/zeppelin-distribution/src/bin_license/LICENSE b/zeppelin-distribution/src/bin_license/LICENSE
index 2537a67433c..b33ad64b108 100644
--- a/zeppelin-distribution/src/bin_license/LICENSE
+++ b/zeppelin-distribution/src/bin_license/LICENSE
@@ -116,8 +116,6 @@ The following components are provided under Apache License.
     (Apache 2.0) Google HTTP Client Library for Java (com.google.http-client:google-http-client-jackson2:1.21.0 - https://github.com/google/google-http-java-client/tree/dev/google-http-client-jackson2)
     (Apache 2.0) angular-esri-map (https://github.com/Esri/angular-esri-map)
 
->>>>>>> Add angular-esri-map to license document
-
 ========================================================================
 MIT licenses
 ========================================================================

From 07d6ddbe474b54fae2de85d4a1e760beb121ade9 Mon Sep 17 00:00:00 2001
From: Matthew Penny <mpenny@apption.com>
Date: Tue, 9 Aug 2016 08:21:28 -0400
Subject: [PATCH 15/22] Fix scatter size field height in pivot (accidentally
 changed)

---
 zeppelin-web/src/app/notebook/paragraph/paragraph-pivot.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-pivot.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-pivot.html
index 9b1e75027ce..9ddf9820640 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph-pivot.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-pivot.html
@@ -154,7 +154,8 @@
         <ul data-drop="true"
             ng-model="paragraph.config.graph.scatter.size"
             jqyoui-droppable="{onDrop:'onGraphOptionChange()'}"
-            class="list-unstyled">
+            class="list-unstyled"
+            style="height:36px">
           <li ng-if="paragraph.config.graph.scatter.size">
             <div class="btn btn-xs" style="color:white" ng-class="{'btn-warning': isValidSizeOption(paragraph.config.graph.scatter, paragraph.result.rows)}">
               {{paragraph.config.graph.scatter.size.name}} <span class="fa fa-close" ng-click="removeScatterOptionSize($index)"></span>

From 3c12445ac3f7e44a0f23a0be92af1426da7d55a4 Mon Sep 17 00:00:00 2001
From: Matthew Penny <mpenny@apption.com>
Date: Wed, 10 Aug 2016 08:56:58 -0400
Subject: [PATCH 16/22] Refactoring

---
 .../paragraph/paragraph.controller.js         | 33 ++++++++-----------
 1 file changed, 14 insertions(+), 19 deletions(-)

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
index c35b2a84eb7..3727d06c91e 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
@@ -1295,7 +1295,8 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
 
     var renderMap = function() {
       var mapdiv = angular.element('#p' + $scope.paragraph.id + '_map')
-      .css('height', $scope.paragraph.config.graph.height).children('div').get(0);
+                          .css('height', $scope.paragraph.config.graph.height)
+                          .children('div').get(0);
 
       // on chart type change, destroy map to force reinitialization.
       if ($scope.map && !refresh) {
@@ -1505,27 +1506,21 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
     }
 
     /* try to find columns for the map logitude and latitude */
-    var i;
-    var col;
-    if (!$scope.paragraph.config.graph.map.lat) {
-      for (i = 0; i < $scope.paragraph.result.columnNames.length; ++i) {
-        col = $scope.paragraph.result.columnNames[i];
-        if (col.name.toUpperCase().indexOf('LAT') !== -1) {
-          $scope.paragraph.config.graph.map.lat = col;
-          break;
+    var findDefaultMapCol = function(settingName, keyword) {
+      var col;
+      if (!$scope.paragraph.config.graph.map[settingName]) {
+        for (var i = 0; i < $scope.paragraph.result.columnNames.length; ++i) {
+          col = $scope.paragraph.result.columnNames[i];
+          if (col.name.toUpperCase().indexOf(keyword) !== -1) {
+            $scope.paragraph.config.graph.map[settingName] = col;
+            break;
+          }
         }
       }
-    }
+    };
 
-    if (!$scope.paragraph.config.graph.map.lng) {
-      for (i = 0; i < $scope.paragraph.result.columnNames.length; ++i) {
-        col = $scope.paragraph.result.columnNames[i];
-        if (col.name.toUpperCase().indexOf('LONG') !== -1) {
-          $scope.paragraph.config.graph.map.lng = col;
-          break;
-        }
-      }
-    }
+    findDefaultMapCol('lat', 'LAT');
+    findDefaultMapCol('lng', 'LONG');
   };
 
   var pivot = function(data) {

From a47a86c94216b83efbd554417c586a63ddf43cf6 Mon Sep 17 00:00:00 2001
From: Matthew Penny <mpenny@apption.com>
Date: Wed, 10 Aug 2016 09:05:58 -0400
Subject: [PATCH 17/22] Add padding to bottom-docked map popups

---
 zeppelin-web/src/app/notebook/paragraph/paragraph.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.css b/zeppelin-web/src/app/notebook/paragraph/paragraph.css
index 646c2555aa8..c5cc592d89e 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.css
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.css
@@ -337,6 +337,10 @@ table.dataTable.table-condensed .sorting_desc:after {
   overflow: visible;
 }
 
+.esri-docked.esri-dock-to-bottom {
+  padding: 8px;
+}
+
 .tableDisplay .btn-group span {
   margin: 10px 0 0 10px;
   font-size: 12px;

From 14f8a1f48c2298791c5c860efb441e162e239fcd Mon Sep 17 00:00:00 2001
From: Matthew Penny <mpenny@apption.com>
Date: Wed, 10 Aug 2016 09:37:21 -0400
Subject: [PATCH 18/22] Fit map popup to map

---
 zeppelin-web/src/app/notebook/paragraph/paragraph.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.css b/zeppelin-web/src/app/notebook/paragraph/paragraph.css
index c5cc592d89e..c2dbadd08e8 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.css
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.css
@@ -341,6 +341,10 @@ table.dataTable.table-condensed .sorting_desc:after {
   padding: 8px;
 }
 
+.esri-popup-main {
+  max-height: 100%;
+}
+
 .tableDisplay .btn-group span {
   margin: 10px 0 0 10px;
   font-size: 12px;

From 5a056c8ab3f222ed114820ba7c475d402086488c Mon Sep 17 00:00:00 2001
From: Matthew Penny <mpenny@apption.com>
Date: Thu, 11 Aug 2016 14:12:37 -0400
Subject: [PATCH 19/22] Lazy load map CSS

---
 .../paragraph/paragraph.controller.js         | 28 +++++++++++++++----
 zeppelin-web/src/index.html                   |  1 -
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
index 3727d06c91e..30b10490b1a 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
@@ -1305,17 +1305,33 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
         $scope.map = null;
       }
 
-      // create map if not exists.
-      if (!$scope.map) {
+      var requireMapCSS = function() {
+        var url = '//js.arcgis.com/4.0/esri/css/main.css';
+        if (!angular.element('link[href="' + url + '"]').length) {
+          var link = document.createElement('link');
+          link.rel = 'stylesheet';
+          link.type = 'text/css';
+          link.href = url;
+          angular.element('head').append(link);
+        }
+      };
+
+      var requireMapJS = function(cb) {
         if (!esriLoader.isLoaded()) {
           esriLoader.bootstrap({
             url: '//js.arcgis.com/4.0'
-          }).then(function() {
-            createMap(mapdiv);
-          });
+          }).then(cb);
         } else {
-          createMap(mapdiv);
+          cb();
         }
+      };
+
+      // create map if not exists.
+      if (!$scope.map) {
+        requireMapCSS();
+        requireMapJS(function() {
+          createMap(mapdiv);
+        });
       } else {
         updateMapPins();
       }
diff --git a/zeppelin-web/src/index.html b/zeppelin-web/src/index.html
index c09cb613c37..f195ecc94e8 100644
--- a/zeppelin-web/src/index.html
+++ b/zeppelin-web/src/index.html
@@ -70,7 +70,6 @@
     <!-- endbuild -->
     <link rel="stylesheet" ng-href="assets/styles/looknfeel/{{looknfeel}}.css" />
     <link rel="stylesheet" href="assets/styles/printMode.css" />
-    <link rel="stylesheet" href="//js.arcgis.com/4.0/esri/css/main.css" />
   </head>
   <body ng-class="{'bodyAsIframe': asIframe}">
     <!--[if lt IE 7]>

From 9f72f6f3c10313c6e51a29c636d71ee94a856e54 Mon Sep 17 00:00:00 2001
From: Matthew Penny <mpenny@apption.com>
Date: Thu, 11 Aug 2016 14:28:59 -0400
Subject: [PATCH 20/22] Display error instead of map when there is no internet
 connection

---
 .../notebook/paragraph/paragraph-graph.html   |  9 +++--
 .../paragraph/paragraph.controller.js         | 40 ++++++++++++++-----
 .../src/app/notebook/paragraph/paragraph.css  | 16 ++++++++
 3 files changed, 53 insertions(+), 12 deletions(-)

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-graph.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-graph.html
index d3cfdae75d1..8b75e089c10 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph-graph.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-graph.html
@@ -52,8 +52,11 @@
     <svg></svg>
   </div>
 
-  <div ng-if="getGraphMode()=='map'"
-       id="p{{paragraph.id}}_map">
-    <div></div>
+  <div ng-if="getGraphMode()=='map'" id="p{{paragraph.id}}_map"
+       ng-switch="paragraph.config.graph.map.isOnline">
+    <div ng-switch-when="true"></div>
+    <span class="map-offline-text" ng-switch-default>
+      <span>Maps require internet connectivity.</span>
+    </span>
   </div>
 </div>
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
index 30b10490b1a..012b497322a 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
@@ -254,6 +254,10 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
       config.graph.map.baseMapType = $scope.baseMapOption[0];
     }
 
+    if (!config.graph.map.isOnline) {
+      config.graph.map.isOnline = true;
+    }
+
     if (!config.graph.map.pinCols) {
       config.graph.map.pinCols = [];
     }
@@ -1293,6 +1297,19 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
       });
     };
 
+    var checkMapOnline = function(cb) {
+      // are we able to get a response from the ArcGIS servers?
+      var callback = function(res) {
+        var online = (res.status > 0);
+        $scope.paragraph.config.graph.map.isOnline = online;
+        cb(res.status > 0);
+      };
+      $http.head('//services.arcgisonline.com/arcgis/', {
+        timeout: 5000,
+        withCredentials: false
+      }).then(callback, callback);
+    };
+
     var renderMap = function() {
       var mapdiv = angular.element('#p' + $scope.paragraph.id + '_map')
                           .css('height', $scope.paragraph.config.graph.height)
@@ -1326,15 +1343,20 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
         }
       };
 
-      // create map if not exists.
-      if (!$scope.map) {
-        requireMapCSS();
-        requireMapJS(function() {
-          createMap(mapdiv);
-        });
-      } else {
-        updateMapPins();
-      }
+      checkMapOnline(function(online) {
+        // we need an internet connection to use the map
+        if (online) {
+          // create map if not exists.
+          if (!$scope.map) {
+            requireMapCSS();
+            requireMapJS(function() {
+              createMap(mapdiv);
+            });
+          } else {
+            updateMapPins();
+          }
+        }
+      });
     };
 
     var retryRenderer = function() {
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.css b/zeppelin-web/src/app/notebook/paragraph/paragraph.css
index c2dbadd08e8..91ce4db1f91 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.css
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.css
@@ -345,6 +345,22 @@ table.dataTable.table-condensed .sorting_desc:after {
   max-height: 100%;
 }
 
+span.map-offline-text {
+  display: table;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+
+span.map-offline-text > span {
+  display: table-cell;
+  vertical-align: middle;
+  font-size: 18px;
+  font-weight: 700;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: #212121;
+}
+
 .tableDisplay .btn-group span {
   margin: 10px 0 0 10px;
   font-size: 12px;

From c30b1b72ae0c06a2c8e2046ee9cda2887d4d93eb Mon Sep 17 00:00:00 2001
From: Matthew Penny <mpenny@apption.com>
Date: Thu, 11 Aug 2016 15:24:23 -0400
Subject: [PATCH 21/22] Decrease top margin for bottom-docked map popups

---
 zeppelin-web/src/app/notebook/paragraph/paragraph.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.css b/zeppelin-web/src/app/notebook/paragraph/paragraph.css
index 91ce4db1f91..cb42389c592 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.css
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.css
@@ -337,8 +337,9 @@ table.dataTable.table-condensed .sorting_desc:after {
   overflow: visible;
 }
 
-.esri-docked.esri-dock-to-bottom {
+.esri-popup > .esri-docked.esri-dock-to-bottom {
   padding: 8px;
+  margin-top: 0px;
 }
 
 .esri-popup-main {

From f21ae26857951bb1e5c3ec60655891a5d59abb37 Mon Sep 17 00:00:00 2001
From: Matthew Penny <mpenny@apption.com>
Date: Thu, 11 Aug 2016 15:27:17 -0400
Subject: [PATCH 22/22] Re-use variable (as intended)

---
 zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
index 012b497322a..2dd25720c9a 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
@@ -1302,7 +1302,7 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
       var callback = function(res) {
         var online = (res.status > 0);
         $scope.paragraph.config.graph.map.isOnline = online;
-        cb(res.status > 0);
+        cb(online);
       };
       $http.head('//services.arcgisonline.com/arcgis/', {
         timeout: 5000,